VARIABLES - TDZ(Temporal Dead Zone)

출처 Nomadcoders ES6의정석

TDZ란 변수 선언 시 선언-초기화-할당 절차로 진행되는데
이중 선언과 초기화사이 지점을 TDZ라고 한다.

let과 같이 소개되는 개념으로 var와 대비하여 이해하는것이 좋다.

var myName = "kimspractice"
console.log(myName);

결과를 보면 정상적으로 출력된다.
그러나 순서가 역순으로 된다면 어떻게될까

console.log(myName);
var myName = "kimspractice"

undefined가 출력된다.
javascript는 위에서 아래로 코드를 실행한다. 그렇다면 선언되지 않은 myName에 대해서
왜 에러를 발생시키지 않는것일까?

바로 Hoisting 때문이다. 호이스팅은 들어올리다 라는 뜻을 가지고 있다.
즉 코드 실행 전 선언된 변수들을 전부 최상단으로 끌어올린다.

var myName;
console.log(myName);
myName = "kimspractice"

호이스팅이 되고나면 위 코드와 같이 myName이라는 변수가 먼저 선언되기 떄문에 log를 찍을때
myName이라는 변수는 있지만 값은 할당되지않아 undefined가 출력되는것이다.
그럼 let을 사용하면 어떻게 될까?

console.log(myName);
let myName = "kimspractice"

우리가 원하던 참조 오류를 확인할 수 있다.

그럼 위 var와 let의 차이는 무엇일까? 바로 TDZ의 차이이다.
기존의 var는 선언+초기화 -> 할당 의 순서를 가지게 된다. 그렇기 떄문에
변수가 선언됨과 동시에 초기화가 진행되어 메모리를 할당받게 되고, 참조가 가능해져 undefined라고 출력이 되는것이다.
그러나 let으로 선언시에는 선언과 초기화단계 사이에 TDZ가 생겨난다.
기존에 선언과 초기화가 동시에 진행되었던것이 TDZ에 의하여 초기화 단계로 넘어가지 못하고 메모리 할당을 받지못하는 상태가 되어, 우리가 원하던 참조 오류를 확인할 수 있는것이다.