Javascript TDZ(Temporal Dead Zone)이란?

 

 

 

 

Javascript let의 특징을 찾아볼때 TDZ(Temporal Dead Zone)이란 개념이 나옵니다.

 

let 변수는 스코프 최상단부터 선언이 완료되는 시점까지의 공간을 '시간상 사각지대(TDZ, Temporal Dead Zone)'에 들어간 변수라고 표현합니다.  '시간상' 이라는 말이 붙는 이유는 사각지대가 코드의 작성 순서가 아니라 코드의 실제 실행 순서에 의해 형성되기 때문입니다.

 

 

 

  시간상 사각지대(TDZ, Temporal Dead Zone)

'시간상 사각지대(TDZ, Temporal Dead Zone)'의 이해를 위해 아래 예시를 같이 보겠습니다.

 

function onEvent()
{
    // TDZ 시작지점 (변수 x가 사용됨)
    var tempFunc = () => console.log(x);
    
    // TDZ 안에서 x변수에 접근을 하면 'ReferenceError' 발생.
    // console.log(x);
    
    let x = 'value';
    // TDZ 종료지점 (변수 x가 초기화됨)
    
    tempFunc(); // TDZ 밖에서 호출되었으므로 정상 호출
}

 

let 변수 x가 사용되는 시점이 TDZ의 시작지점이 됩니다. 변수 x는 초기화 되는 시점이 TDZ 종료지점이 됩니다.

변수 x가 사용되는 아래에서 초기화가 되지만 실제 변수가 사용되는 함수(tempFunc) 호출 시점이 시간상 사각지대(TDZ) 밖이므로 정상 동작하게 됩니다.

 

위의 경우가 아니고 TDZ의 범위 안에서 변수가 사용이 된다면 'ReferenceError' 와 같은 오류가 발생합니다.

 

 

 

[같이보면 좋은 자료]

> [Javascript] - var와 let 차이점

 

 

[참고자료]

mozila.org: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let