[Javascript] TDZ(Temporal Dead Zone)란?

1. TDZ란?

TDZ는 Temporal Dead Zone의 약자로 번역하자면 일시적 사각지대라는 의미를 가지고 있다.
스코프에서 변수는 선언, 초기화, 할당 이렇게 3가지 단계를 거쳐서 생성되는데, TDZ는 변수가 선언되고
초기화 단계에 접어들기 전까지의 구간이라고 할 수 있다.

TDZ를 이해하기 위해서는 변수 생선 단계와 호이스팅에 대한 전반적인 이해를 하고 있어야 접근하기 좋다.
하기 게시물은 변수 생성 단계와 호이스팅에 대한 개념적인 설명이 되어 있다.

 

[Javascript] 변수 선언, 초기화, 할당, 호이스팅, 스코프 개념 및 설명

2. TDZ 예시

cost name = 'kim';

console.log(name);

위와 같이 선언과 초기화를 진행한 이후 name 변수를 참조하게 된다면 정상적으로 작동하는 것을 볼 수 있다.

console.log(name);

cost name = 'kim'; //error : ReferenceError

위 예시는 바로 위의 코드와 반대로 선언과 초기화 이전에 name 변수를 참조한 것인데, 아래 이미지와 같이 선언과 초기화 사이에는 TDZ(Temporal Dead Zone)라는 구간이 존재한다. 

TDZ(Temporal Dead Zone)

때문에 변수가 선언되기 전이거나 변수가 초기화되기 이전의 상태에서 변수를 사용하는 것을 허용하지 않기 때문에
변수를 선언 및 초기화 하기전에 사용하게 되면 TDZ 구간인 변수를 참조하게 되면 ReferenceError 에러가 발생한다.

 

3. TDZ 구간의 영향을 받는 구문

- let

- cost

- class

4. TDZ 구간의 영향을 받지 않는 구문

- var

- funtion

- import

 

 

참고 : https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/