TDZ(Temporal Dead Zone) 란..? TDZ로 인한 var,let,const 알아보기

TDZ(Temporal Dead Zone)

변수를 선언 하기 전의 범위를 TDZ에 있다고 합니다.

변수 선언 전에 변수를 호출 할경우 reference error 가 발생하는데 이때 tdz 에 걸렸다고 표현하죠

자세하게 알아봅시당

	


(function test(){
    console.log(a); //TDZ
    let a;
}())

변수 a 를 선언하기 전 콘솔에 찍었더니 reference error 가 뜨죠?

지금 저 구간이 TDZ인 상태이기 때문이에요

선언되지 않은 변수에 접근 하려고 하니 에러가 발생하는 겁니다.

그럼 var 변수는 어떨까요

	


(function test(){
    console.log(a);
    var a;
}())

undefined가 나옵니다

var 의 경우에는 호이스팅 되면서 a가 맨 상단위로 올라갑니다.

그리고 undefined 까지 초기화 시키죠.

let 같은 경우에는 변수를 초기화 시키지고 않고 변수 정의만 하고 끝내버리니

error 가 발생하는 거에요

그럼 let, const는 호이스팅 되지 않는걸까요?

let,const도 호이스팅이 되지만 변수 초기화가 되기전에 reference error 를 발생하는 것 입니다.

var 에서 변수 호이스팅 후 undefined를 반환 하는 것처럼요

 

그렇다면 let이 호이스팅 되는 지 확인해볼까요?

	


let x = 'test';
(function() {
    console.log(x); 
    let x = 'test';
}());

결과는 reference error 가 발생합니다.

함수안에서 변수x 가 호이스팅 됬기 때문이죠

TDZ는 개발자 입장에선 선언되지 않은 변수에 접근할 경우 에러를 알려주니 좋죠

그런데 TDZ는 오류를 알려주기 위해 탄생한것이 아니라

const를 만드는데 목표를 두었다고 합니다.

바로 선언시에 할당을 할수있도록 말이죠!

const는 변수선언과 값을 동시에 초기화 해야하니까요!