호이스팅이란?

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.

아래는 가장 대표적인 예시이다.

console.log(a); // undefined

var a = 1;

선언하지 않은 것인데도 에러가 발생하지 않는다.

helloWorld(); // Hello World!

function helloWorld() {
  console.log("Hello World!");
}

선언을 하지도 않았는데 함수에 접근할 수 있다.

왜 그런 것일까??

자바스크립트에서의 변수는 선언 단계 > 초기화 단계> 할당 단계에 걸쳐 생성되는데 컴파일 단계에서 함수와 변수 선언이 스캔된다.

스캔 된 모든 함수, 변수 선언은 Lexical Environment라고 불리는 자바스크립트 데이터 구조 내 메모리에 추가된다.

(이때가 스코프의 선두로 옮긴 것처럼 동작하게끔 보이는 것이고 접근 가능케 되는 것이다. )

console.log(a); // ReferenceError: Cannot access 'greeting' before initialization

const a = 3;

가끔 다른 블로그를 보면 let 과 const가 호이스팅이 안된다고 말하는 사람들이 있는데 그것은 잘못 된 것이다.

var는 선언 단계와 초기화 단계가 한번에 이루어진다. 그래서 undefined가 찍히는 것이다.

반면,let과 const는 호이스팅이 되어 선언단계까지는 왔으나 초기화 단계가 없어서 에러를 뱉는 것이다.

위의 주석처리를 보면 이제 이해가 갈 것이다. 이때를 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠진다고 생각하면 된다.