호이스팅 (Hoisting) 이란?

호이스팅이란 변수와 함수의 선언들이 스코프의 맨 위로 끌어 올려지는 자바스크립트의 메커니즘이다.

`var`의 경우

스코프 내에 var로 선언한 변수가 존재할 경우 호이스팅 때문에 아래 코드의 결과가 undefined가 된다.

console.log(v); // v는 선언되었지만 아직 할당 (바인딩) 되지 않았다 => undefined
var v = 1;

v를 선언하지 않는 경우, 아래와 같이 ReferenceError가 나오게 된다.

console.log(v); // ReferenceError: v is not defined

const, let의 경우 var과 다르게 작동하기 때문에 호이스팅이 적용되지 않는다고 생각하기 쉽지만, const와 let에도 호이스팅이 적용된다.

const x = 'a';
(() => {
  console.log(x); // ??
  const x = 'b';
}) ();

만약 호이스팅이 const에 적용되지 않았다면 위 코드에서 console.log(x)의 결과는 ‘a’여야 한다.

하지만, 실제 결과는 ReferenceError: Cannot access ‘x’ before initialization 에러가 나오게 된다.

이것은 익명 함수 내의 x가 호이스팅 되어 바깥 쪽 x가 가려졌기 때문이다.

하지만 let과 const의 경우 호이스팅이 적용된다 해도 선언문 전에는 접근할 수 없다.

그래서 Cannot access ‘x’ before initialization 에러를 맞닥뜨리게 된다.

이렇게 호이스팅 되어서 범위 내에 존재하지만 선언되기 전 변수에 접근할 수 없는 영역을 TDZ (Temporal dead zone) 이라고 부른다.