[JavaScript] var / let / const 호이스팅과 TDZ

호이스팅이란?

호이스팅은 자바스크립트 엔진이 코드 실행 전에 변수 선언을 해당 스코프의 최상단으로 끌어올리는 동작이다.

중요한 건 var, let, const 셋 다 호이스팅이 된다는 점이다.

💡차이는 초기화 여부에 있다.💡

---

var (선언 + 초기화까지 호이스팅함)

console.log(foo); // undefined
foo = 123;
console.log(foo); // 123
var foo;

JS 엔진은 실행 전에 위 코드를 아래처럼 처리한다. (변화 주목!)

var foo;           // 선언 + undefined 초기화 -> 최상단으로 끌어올림
console.log(foo);  // undefined
foo = 123;
console.log(foo);  // 123

var은 선언과 동시에 undefined로 초기화까지 완료되기 때문에, 선언 이전에 접근해도 에러가 나지 않는다.

호이스팅이 되지 않았다면 ReferenceError가 발생했을 것이다.

---

let / const (선언만 호이스팅함, 초기화는 TDZ로부터 차단)

let과 const도 호이스팅은 된다.

단, 초기화가 이루어지지 않은 채로 끌어올려지기 때문에 선언 이전에 접근하면 ReferenceError가 발생한다.

이 접근 불가 구간을 TDZ(Temporal Dead Zone, 일시적 사각지대) 라고 한다.

console.log(bar); // ReferenceError: Cannot access 'bar' before initialization
let bar = 1;

선언 라인에 도달하는 순간 초기화가 이루어지고, 그 이후부터 정상 접근이 가능하다!

---

세 가지 비교 정리

키워드	호이스팅	초기화	TDZ	선언 전 접근
var	O	undefined로 초기화	X	가능 (undefined)
let	O	초기화 안 됨	O	불가 (ReferenceError)
const	O	초기화 안 됨	O	불가 (ReferenceError)

셋 다 호이스팅되지만, var이 "더 많이" 호이스팅된다고 표현하는 이유가 바로 초기화까지 완료되기 때문이다.