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

지난 글에서 호이스팅에 대해서 알아보았는데, 이번에는 자바스크립트의 TDZ(Temporal Dead Zone) 개념에 대해 알아보겠습니다.

[Javascript] 호이스팅(Hoisting) 개념정리

---

TDZ(Temporal Dead Zone)이란?

Temporal Dead Zone은 "일시적 사각지대"라는 의미를 가지고 있습니다. TDZ는 변수가 선언되고 초기화 단계에 접어들기 전까지의 구간을 의미합니다. 이 구간에서는 변수에 접근하면 ReferenceError가 발생합니다.

---

 

 

 

하지만 모든 자바스크립트 구문들이 TDZ에 영향을 받는 것은 아닙니다. 아래에서 영향을 받는 구문들과 그렇지 않은 구문들이 어떤 차이가 있는지, 그리고 어떻게 사용하는지 알아보겠습니다.

---

TDZ에 영향을 받게 되면

TDZ에 영향을 받는 구문들은 const, let, class, constructor() 내부의 super(), 그리고 기본 함수 매개변수입니다.

TDZ에 영향을 받으면 어떻게 될까요? 함께 알아봅시다.

 

자바스크립트에서 변수가 사용하는 단계는 총 3단계입니다:

1. 선언: 변수가 메모리에 공간을 확보
2. 초기화: 변수가 정의된 메모리 공간에 초기값을 설정
3. 할당: 변수에 실제 값을 할당

아래의 코드는 변수 선언이 되기 전 변수를 사용하여 ReferenceError를 출력한 것처럼 보이지만, 실제로는 TDZ의 영향을 받아 오류가 발생한 것입니다. 즉, 변수는 선언되었지만 초기화되기 전에 사용했기 때문에 오류가 발생한 것입니다.

 

console.log(count); // ReferenceError 발생
let count; // 초기화
count = 10; // 할당

 

메모리 상에서는 count라는 변수가 선언된 상태이지만, let 변수는 TDZ가 관리하기 때문에 초기화 전에는 ReferenceError가 발생합니다. 그렇다면 TDZ에 영향을 받지 않으면 어떻게 될까요?

---

TDZ에 영향을 받지 않게 되면

TDZ에 영향을 받지 않는 구문들은 var, function, import 구문입니다. 위의 예시를 var를 사용해서 만들어보겠습니다.

 

console.log(count); // undefined 출력
var count; // 초기화
count = 10; // 할당

 

위의 코드는 정상 동작합니다. 왜냐하면 var 변수는 호이스팅에 의해 선언이 끌어올려지기 때문에 선언 전에 접근해도 undefined 값을 출력합니다.

이러한 동작 차이 때문에 let과 const는 TDZ의 영향을 받으며, 초기화 전에 접근할 경우 ReferenceError가 발생합니다.

---

Reference

아이딕 IT 블로그 - [Javascript] TDZ(Temporal Dead Zone)란?

TOAST UI 블로그 - TDZ을 모른 채 자바스크립트 변수를 사용하지 말라