TDZ (Temporal Dead Zone)

🔎 TDZ란?

TDZ

👉 Temporal Dead Zone 의 약자로 우리 말로 번역하면 일시적 사각지대라는 의미이며,
스코프 시작 ~ 초기화 시작 사이의 구간을 의미한다.다른 말로 변수가 선언되고 변수의 초기화가 이루어지기 전까지의 구간

👉const 변수 선언부터 시작해보자. 변수를 선언하고 초기화하면 변수에 접근할 수 있다. 예상한대로 동작한다.

const white = '#FFFFFF';

white; // => '#FFFFFF'

이번에는 선언 전에 white 변수에 접근해보도록 하겠다.

white; // throws `ReferenceError`
const white = '#FFFFFF';

white

const white = '#FFFFFF' 구문 전 줄까지, white 변수는 TDZ에 있다.

TDZ에 있는 white 변수에 접근하게 되면 , ReferenceError: Cannot access 'white' before initialization 자바스크립트 에러가 발생한다.

• 출처 : ui.toast.com

TDZ에 영향을 받는 것

1. let

2. const

3. class

4. class의 constructor() 내부의 super() (해당 클래스의 contructor 에서 super 함수가 호출되기 전까지는 해당 클래스에서 this 를 참조하면 에러 발생)

5. 함수 매개변수 (매개변수 선언 전에 참조하면 에러 발생)

TDZ에 영향을 받지않는 것

1. var

2. function (함수 선언식)

3. import (import 구문)

• 출처 :그림 그리는 개발자의 블로그
  
  

정리하며

• TDZ는 const, let, class 구문의 유효성에 영향을 미치는 중요한 개념이다.
  TDZ는 선언 전에 변수를 사용하는 것을 허용하지 않는다.

• 반대로 var 변수는 선언 전에도 사용할 수 있기 때문에 var 사용은 피하는 것이 좋다.