TDZ(Temporal Dead Zone) 이란?

2021-12-13

date

Dec 13, 2021

slug

javascript-tdz

summary

TDZ(Temporal Dead Zone)을 알아봅시다.

thumbnail

status

publish

TDZ를 이해하려면 호이스팅에 대한 이해가 필요합니다.

호이스팅 (Hosting)

주어진 선언들이 해당 scope에 최상단으로 이동하는 것을 의미합니다.


console.log(num1); // undefined
console.log(num2); // ReferenceError: num is not defined
console.log(num3); // ReferenceError: num is not defined
var num1 = 1;
let num2 = 2;
const num3 = 3;

위 코드를 보면 선언과 초기화되지 않은 변수를 접근하려 할 때, 호이스팅으로 인해 var 변수는 undefined로 출력이 되지만 let, const 변수는 참조 에러가 발생합니다. let, const 변수는 호이스팅이 일어나지 않는 것이 아니라 TDZ가 발생합니다.

TDZ (Tempoal Dead Zone) 란?

JavaScript에서 변수는 선언, 초기화, 할당 3단계를 거치게 됩니다.

선언 단계 (Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다.

초기화 단계 (Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체를 위한 메모리를 만드는 단계 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다.

할당 단계 (Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계

var 변수

var 같은 경우 선언, 초기화 단계를 같이 진행하여 undefined로 초기화가 됩니다.

let 변수

하지만, let, const 의 경우 선언과 초기화가 따로 진행되기 때문에 호이스팅이 되는 순간 선언만 진행되어 메모리에 할당되지 않아 참조 에러가 발생하게 됩니다.

이렇게 변수 객체의 호이스팅이 일어나지만, 변수 객체의 lifecycle 때문에 메모리 참조가 안되는 구간을 TDZ (Temporal Dead Zone)라고 합니다.