TDZ(Temporal Dead Zone) 이란?
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)
라고 합니다.