[ JavaScript ] ES6 : TDZ (Temporal Dead Zone) | let 참조에러

 

1. let 참조 에러

 

 

아래는 이전 포스팅에서 사용했던 코드이다.

 

 

 

let test = '1';
if(true){
	let test = '2';
    console.log(test);
};
console.log(test);

 

이 코드를 실행하면 아래와 같은 결과를 얻는다.

 

 

 

 

 

아래와 같이 코드를 변경했다.

 

 

let test = '1';
if(true){
	console.log(test);
    let test = '2';
};
console.log(test);

 

 

아래와 같은 결과가 출력된다.

 

 

 

 

 

만약 호이스팅이 없었다면 3번째 test 를 출력하는 과정에서

 

전역스코프의 값인 1 이 출력되었을 것이다.

 

 

그렇지만, 블록스코프 안에 선언된 test(,4번라인 test)가 호이스팅 되어

해당 블록 스코프의 최상단에 test 변수가 선언되게 된다.

 

 

근데 왜 undefined 가 아닌 ReferenceError 가 출력될까?

 

 

 

 

let 은 var 와 다르게 변수가 초기화 되기 전에 접근하면 ReferenceError(참조에러) 가 발생한다.

 

 

 

2. TDZ 란?

 

 

let으로 선언된 변수가 초기화 하기전에 액세스 할 수 없는 구역을

Temporal Dead zone(TDZ ) 라고 한다.

 

아래 코드에서 TDZ 가 정확히 어떤 구역인지 보여주겠다.

 

 

 

let test = '1';
if(true){
	// test 에 대한 TDZ 시작
	console.log(test);
    let test = '2'; // 선언문은 변수 test에 대한 tdz 종료
};
console.log(test);

 

 

위 코드에 달려있는 주석이 TDZ 구역이라고 볼 수 있다.