[JavaScript] TDZ (Temporal Dead Zone) 이란?

let과 const는 호이스팅 시에 변수는 선언되고 초기화는 되지 않아 ReferenceError가 발생하며, TDZ에 빠지게 된다.

TDZ에 빠진다는 것은 알고 있었지만 정확하게 TDZ가 뭔지는 알지 못해서 한번 제대로 알아보고자 한다. 

TDZ에 대해서 이해하기 위해 변수 선언의 3단계를 먼저 알아보자.

 

📌 변수 선언의 3단계

 

자바스크립트에서 변수는 기본적으로 다음 3단계를 거쳐서 생성이 된다.

 

1) 선언 단계 (Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록한다.

-> 이 변수 객체는 스코프가 참조하는 대상이 된다.

2) 초기화 단계 (Initialization phase) : 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만든다.

-> 이 단계에서 할당된 메모리에는 undefined로 초기화된다.

3) 할당 단계 (Assignment phase) : 사용자가 undefined로 초기화된 메모리에 다른 값을 할당한다.

 

✅ TDZ (Temporal Dead Zone) 이란?

TDZ는 선언 단계부터 초기화 시작 전까지의 구간이다. 
선언 단계와 초기화 단계 사이에 잠시 머물러 있는 것이라고 할 수 있다.

 

 

1️⃣ Var의 라이프사이클

 

 

var은 변수 선언 전에 선언 단계와 초기화 단계가 동시에 실행된다. 

선언과 초기화가 동시에 실행되기 때문에 실행 컨텍스트가 생성될 때 이미 undefined로 초기화가 끝난 상태이다. 

따라서 var은 TDZ가 존재하지 않기 때문에 선언 전에 접근해도 referenceError가 발생하지 않는다.

 

2️⃣ let/const의 라이프사이클

 

let과 const는 var과는 다르게 선언 단계와 초기화 단계가 따로 분리되어 실행된다.

그렇기에 선언 단계에서 실행 컨텍스트에 변수는 등록이 되었지만 메모리가 할당되지 않아 접근할 수 없어서 ReferenceError가 발생한다. 이런 사각지대를 TDZ (일시적 사각지대) 라고 한다.

 

3️⃣ 함수 선언식의 라이프사이클 

 

함수 선언식의 경우 선언, 초기화, 할당이 동시에 진행되기 때문에 호이스팅도 가능하고 실행도 가능하다. 

---

📚 정리

var은 선언과 동시에 undefined로 초기화되기 때문에 TDZ가 없고, let과 const는 선언은 되었지만 초기화 전까지 TDZ라는 구간에 빠져 접근이 불가능하다. 그래서 var은 선언 전에도 undefined가 찍히지만 let/const 변수는 RefereneError가 발생한다.