TDZ(Temporal Dead Zone/일시적 사각지대)란?

TDZ(Temporal Dead Zone)

: 일시적인 사각지대. 이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 의미합니다.

TDZ에 있는 변수에 접근하게 되면 ,

 ReferenceError : Cannot access 'white' before initialization 자바스크립트 에러가 발생합니다.

출처 : https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/

변수 사용시...

• 선언 단계(Declaration phase)
  
   : 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다.
• 초기화 단계(Initialization phase) 
  
  : 변수 객체에 선언 단계의 변수를 위한 '메모리를 만드는 단계' 입니다.
  이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다.
• 할당 단계(Assignment phase) 
  
  : 사용자가 undefined로 초기화된 메모리의 '다른 값'을 할당하는 단계 입니다.

 

TDZ의 영향을 받는 구문.

 

# const로 선언된 변수의 경우.

const 변수는 선언 및 초기화 전 줄까지 TDZ에 있기 때문에, 선언한 후에 사용해야 한다.

 

// Does not work!
pi; // throws `ReferenceError`
const pi = 3.14;

===================================

const pi = 3.14;

// Works!
pi; // => 3.14

 

# let으로 선언된 변수의 경우...!

선언단계와 초기화 단계가 분리되어서 진행이 됩니다.
그렇기 때문에 변수를 등록했지만, 메모리가 할당이 되질 않아 접근할 수 없어 참조 에러(ReferenceError)가 발생하는 것 입니다.
이것을 보고 우리가 호이스팅이 되질 않는다고 생각 할 수 있습니다.

 

// Does not work!
count; // throws `ReferenceError`
let count;

count = 10;

======================================

let count;

// Works!
count; // => undefined
count = 10;

// Works!
count; // => 10

 

# var 키워드 변수의 경우...!

변수 선언 단계와 초기화 단계를 동시에 진행합니다.

그렇기 때문에 변수를 선언하기 전에 호출을 해도 undefined로 호출이 되는 호이스팅이 발생하는 것 입니다.

 

// Works, but don't do this!
value; // => undefined
var value;

 

 

참고 : https://ui.toast.com/weekly-pick/ko_20191014