자바스크립트에서 호이스팅이란

a = 2;
var a;
console.log(a);

다음의 결과값은 undefined가 아니라 놀랍게도 2입니다.

console.log(a);
var a = 2;

이 코드의 결과값은 undefined입니다.

이런 결과가 나오는 이유는 호이스팅 때문입니다.

호이스팅은 선언문을 끌어올리는 동작입니다.

var a;는 선언문이고 a = 2는 대입문입니다.
따라서, 맨 위의 코드는 var a;가 호이스팅에 의해서 가장 위로 끌어올려지므로 2가 출력됩니다.

하지만, var a = 2;는 다릅니다.
var a = 2;를 자바스크립트 (이하 JS) 엔진은 var a;와 a = 2;로 나누어서 처리합니다.
여기서, 선언문인 var a;만 맨 위로 끌어올려지므로

var a;
console.log(a);
a = 2;

JS 엔진은 실제로 이렇게 처리하게 되므로 출력값은 undefined가 나오게 됩니다.

호이스팅은 스코프별로 작동하므로 어느 스코프에서 호이스팅이 발생한다는 것은 그 스코프 내의 최상단으로 끌어올려진다는 것을 의미합니다.

let, const

console.log(a); // error: Uncaught ReferenceError: Cannot access 'a' before initialization
console.log(b); // error: Uncaught ReferenceError: Cannot access 'b' before initialization
let a = 2;
const b = 3;

let과 const는 var처럼 선언문이 최상단으로 끌어올려지기는 하지만, undefined 대신 ReferenceError를 발생시킵니다.

그 이유는 var는 호이스팅시 선언과 동시에 undefined로 초기화가 되는 반면에 let과 const는 호이스팅이 발생할 때 선언만 될 뿐, 초기화가 이루어지지 않습니다.

바로 이단계에서 TDZ에 들어가게 됩니다. 즉, 선언은 되어있지만, 초기화가 되지 않아 이를 위한 자리가 메모리에 준비되어 있지 않은 상태라는 뜻입니다.

TDZ에서 관리중인 변수를 호출하려고 하기 때문에 에러가 발생하게 되는 것입니다.

함수가 먼저다

변수와 함수 선언문 모두 호이스팅이 적용됩니다. 그러나 먼저 함수가 끌어올려지고 난 다음에 변수가 올려지게 됩니다.

호이스팅은 선언문을 스코프의 맨 위로 끌어올리는 작업이지만 선언문만을 끌어올리며 변수든 함수든 표현식은 끌어올려지지 않는다는 점을 기억해두어야 합니다.