호이스팅과 Temporal Dead Zone

호이스팅 (Hoisting)

자바스크립트에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미

한다.

 

즉, 변수의 선언과 초기화를 분리한 후 선언만 코드의 최상단으로 옮기는 것이다.

var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다.

test();

function test() {
	console.log("test.";
}

//result: "test."

TDZ (Temporal Dead Zone)

TDZ는 일시적인 사각지대로, 변수를 사용하는 것을 비허용하는 개념상의 공간이다. 

TDZ에 있는 값에 접근하게 되면 ReferenceError: Cannot access 'xxx' before initialization가 발행한다.

 

TDZ에 있는 변수 객체는 선언은 되어있지만 아직 초기화가 되지 않아서 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태이다.

 

---

const와 let은 호이스팅이 되지 않는 것이 아니고 호이스팅이 다른 방식으로 작동한다고 말한다.

일단 여기선 편의상 호이스팅이 되는/되지않는으로 구분해보자.

• var 변수: 호이스팅 된다.
• const, let 변수: 호이스팅 되지 않는다.
• 함수 표현식 (Function Expression): 호이스팅 되지 않는다.

a(); // Uncaught TypeError: a is not a function

var a = function () {
  console.log("foo");
};

a();

• 함수 선언문 (Function Declaration): 호이스팅 된다.

say(); // Hello

function say() {
  console.log("Hello");
}

say();