2023-03-28 화요일

✏️ 무엇을 배웠나

---

1. 호이스팅과 TDZ

호이스팅은 변수 선언문이 코드 맨 위로 끌어 올려진 것처럼 작동하는 자바스크립의 특징을 가리킴.

console.log(me); // undefined

var me;

자바스크립트는 순서대로 한 줄씩 실행되는데 me가 어떻게 undefined일까?

왜 호이스팅이 발생하나?

변수 선언문이 실행되는 건 '런타임'이 아니라 '평가 과정' 단계에 해당하기 때문임. 평과 과정에서 각종 선언문이 먼저 실행됨. 그러니까 var me가 나중에 선언되었음에도 불구하고 위 코드가 돌아가는 것임.

호이스팅은 var에서만 일어나는 게 아님!

var뿐만 아니라 let과 const도 호이스팅이 일어난다. 단, let과 const에서 변수 선언보다 변수 사용 코드가 앞서는 경우에는 referrence 에러가 뜨는 것일 뿐.

왜 referrence 에러가 뜨나

var는 평가 과정에서 선언과 동시에 undefined로 초기화가 됨. 그런 이유로 undefined이 뜰지언정 에러는 안 남. 그런데 평과 과정에서 let은 초기화가 이뤄지지 않기 때문에 당연히 referrence 에러를 뱉는 것임. const는 애초에 선언과 초기화가 함께 이뤄져야 하기 때문에 논외다.

let은 선언이 된 시점과 초기화가 되는 시점 사이에 TDZ라는 단계가 있음. 일시적 사각지대라고도 부르는데, 단순히 말하자면 선언은 됐지만 아직 초기화가 안 된 상태를 말함. TDZ 상태일 때 사용해버리면 위 설명처럼 당연히 에러를 뱉음.

const는 선언과 동기에 초기화를 해줘야 하는 상수 키워드이기 때문에 TDZ가 없다.

예시

1) 함수 선언식의 경우

fn("ddddddd");

function fn(a){
  console.log('함수 실행', a); // '함수 실행' 'ddddddd'
};

2) 함수 표현식의 경우

호이스팅에 영향을 받지 않는다. 아마도 함수 자체가 변수이기 때문에.

fn2("ddddddd");

const fn2 = (a) => {
  console.log('함수 실행2', a); // ReferenceError: fn2 is not defined
};

3) 변수의 경우

function fn3(){
  console.log(b) // undefined
  console.log(c) // ReferenceError: c is not defined & TDZ 안에 있음
}

fn3();

var b = 10
let c = 20

2. 매개변수와 인자의 차이

const example = (a, b) => {
	return num1 + num2;
};

example(10, 3)

이런 함수가 있을 때
매개변수(parameter)는 함수를 정의할 때 사용하는 변수를 말함.
인자(argument)는 함수를 실행할 때 전달하는 실제 값을 말함.