[Javascript] 호이스팅과 TDZ(Temporal Dead Zone)

호이스팅이란?

호이스팅이란 사전적 의미로 끌어 올리기라는 의미입니다. 자바스크립트에서도 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어올리는 현상입니다.

변수 호이스팅

변수는 var, let, const로 선언하는데 호이스팅되는 방식이 다릅니다. 변수의 생성과정은 선언 단계, 초기화 단계, 할당 단계 3가지입니다.

• var: 호이스팅과 동시에 undefinde로 변수를 초기화
• let, const: 선언 자체는 호이스팅은 되었지만 초기화가 되지 않으므로 초기화 전에 호출하게 되면 TDZ라는 일시적인 사각지대에 존재하기 때문에 참조에러가(ReferenceError) 발생

console.log(a); // undefined
var a = 1;

console.log(b); // Uncaught ReferenceError: b is not defined
let b = 20;

console.log(c); // Uncaught ReferenceError: c is not defined
const c = 30;

이렇듯 let과 const는 변수선언 시 선언과 동시에 할당이 되어야 한다. 이러한 이유는 let과 const는 TDZ에 영향을 받기 때문입니다.

함수 호이스팅

함수 선언식은 전체 정의가 호이스팅 되어 var와 같이 어느 위치는 정상적인 호출이 가능합니다. 하지만 함수 표현식은 TDZ의 영향을 받습니다.

foo(); // hi
function foo() {
  console.log("hi");
}

bar(); // Uncaught TypeError: bar is not a function
var bar = () => { 
  console.log("hello");
}

TDZ(Temporal Dead Zone)이란?

자바스크립트는 동적이고 느슨한 타입 시스템을 가지기 때문에 선언과 초기화가 혼동을 일으킬 가능성이 큽니다.

위에 예시로 var로 선언된 변수들은 선언과 동시에 자동으로 undefined로 초기화 해버리기 때문에 어디서 변수가 선언되었는지 추적하기가 어려움이 있습니다.

이러한 혼동을 막기 위해 let과 const를 도입하여 변수가 언제, 어떻게 초기화되는지 명확하게 인지할 수 있도록 합니다. 변수가 초기화 되기 전에 그 값을 참조하는 오류를 예방하기 위함입니다.