호이스팅(hoisting)

이번에 강의를 통해 호이스팅이라는 걸 처음 알게 됐는데, 실제 예제를 찾아보니 내가 제대로 이해하고 있지 않은 것 같다는 생각이 들어서 관련 내용을 좀 더 찾아보게 되었다.

// 1.
let a
console.log(a)
a = 3

// 2.
console.log(a)
let a = 3

// 3.
console.log(a)
var a = 3

1, 3번의 경우 undefined가 출력되고, 2번의 경우 참조 에러가 발생한다. 왜 이런 결과가 나오는지를 이해하고 설명할 수 있다면 당신은 호이스팅에 대해 제대로 이해한 것이다.

자바스크립트를 실행시키는 인터프리터는 변수를 생성하는 단계를 선언단계와 할당 단계로 분할한다. 코드를 실행하기 전 변수의 선언 부분은 현재 범위의 맨 위로 호이스팅 된다.

이 때, 호이스팅된 var 변수는 undefined 값이 할당된다. 이것이 3번 예제 코드가 undefined를 출력하는 이유이다.

반면, 호이스팅된 let, const 변수는 값을 할당받지 않고, TDZ 상태에 있게 된다. TDZ(Temporal Dead Zone)란 일시적 데드 존으로, 변수를 사용할 수 없는 일시적인 비활성 상태를 의미한다. 이 상태에서 변수에 접근하게 되면 참조 에러를 발생시킨다. 이것이 2번 예제 코드에서 참조 에러가 발생하는 이유이다.

클래스도 let, const 변수와 동일한 메커니즘이 적용된다.

마지막으로 함수의 경우에도 동일하게 호이스팅 개념이 적용된다.

hello()

function hello() {
  console.log("hello")
}

위와 같은 함수 선언문의 경우, 선언문 자체가 호이스팅되므로 함수 선언 전에 함수를 호출해도 정상적으로 함수를 호출할 수 있다.

hello()

var hello = () => {
  console.log("hello")
}

반면 위와 같은 함수 표현식의 경우, 선언문(var hello;)만 호이스팅되므로 함수 선언 전에 함수를 호출하면 참조 에러가 발생하게 된다.