Act99 기술블로그

[TDZ(Temporal Dead Zone) 일시적 사각지대란?] 본문

개발팁저장소

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

Act99 2022. 2. 9. 10:15

다음 함수부터 먼저 보시죠.

 

만약 이 함수를 봤을 때, 뭔가 이상한 점을 감지하셨다면 TDZ에 대해 어느정도 이해하신 겁니다.

이렇게 코드를 작성하면 다음과 같은 에러를 발생시키죠.

 

이 에러는 변수는 선언되었는데, 변수의 값이 할당되지 않는 것을 의미합니다.

변수 선언의 3단계는 다음과 같습니다.

 

  • 선언단계 : 변수를 실행 컨텍스트의 변수 객체에 등록 (스코프 참조 대상)
  • 초기화 단계: 실행 컨텍스트에 존재하는 변수 객체에 선언 단계의 변수를 위한 메모리 생성 (undefined 로 초기화 시킨다.)
  • 할당 단계: 사용자가 undefined로 초기화된 메모리에 다른 값을 할당한다.

즉, 전에 본 코드는 초기화 단계까지는 갔지만 할당 단계까지 가지 못한 것입니다. 이는 let, const 의 변수 선언이 호이스팅을 일으키지 않는 선언들이기 때문입니다. 또한 그 이유는 let const 가 블록 스코프이기 때문이며 우선 선언된 변수와 상수는 TDZ 구역에 배치되었다가 선언이 실행된 후 TDZ에서 제거되어 사용가능한 상태가 되기 때문입니다.

 

TDZ는 스코프의 시작 지점부터 초기화 시작 지점까지의 사각지대 구간을 의미합니다. 즉, 선언 단계와 초기화 단계 사이에 잠시 머물러있는 것입니다.

 

var 변수의 라이프 사이클은 변수 선언 전, 선언 단계와 초기화 단계를 동시에 진행하고, 선언과 초기화가 동시에 실행되기 때문에 실행 컨텍스트 변수 객체를 등록 후 바로 그 메모리를 undefined 시켜줍니다. 때문에 선언하기도 전에 undefined 호출이 되는 호이스팅이 발생합니다.

 

다음과 같이 var 로 변수선언을 한 후 뒤에 배치시켰을 때

 

var 선언이 미리 undefined 로 결정되었기 때문에 undefined 라는 값이 solution의 인자로 들어가게 되며, undefined 는 map을 사용할 수 없기 때문에 다음과 같은 에러가 발생합니다.

 

var 변수의 라이프사이클

 

let / const 변수의 라이프사이클

let과 const는 var 과 다르게 선언 단계와 초기화 단계가 따로 분리되어 실행됩니다. 그래서 선언 단계와 초기화 단계 사이에서는 실행 컨텍스트에는 변수를 등록했지만 메모리가 할당되지 않은 상태라 “ReferenceError”가 나오게 됩니다. 이런 사각지대롤 TDZ라고 합니다.