[JS] hoisting과 TDZ(Temporal Dead Zone)

자바스크립트 ES6 문법에서 변수 공부 중
전에는 어려워서 접근 못하던 TDZ에 대해 좀 더 정리를 해볼 수 있을 것 같아 포스팅해본다.
> 변수기본개념 복습했던 포스팅

Hoisting?

변수의 선언은 선언 / 초기화 / 할당의 단계로 나누어 진행된다.

• 선언 var name 등의 방식으로 변수를 정의한다.
• 초기화 선언단계의 변수를 위한 메모리를 만들고, undefined로 값을 초기화 한다.
• 할당 초기화된 메모리에 다른 값을 할당한다.

hoisting 이라는 단어는 끌어올린다는 뜻이다.
호이스팅은 선언하는 단계의 코드가 유효범위의 최상단으로 올라가면서, 변수의 할당 이전에도 실행될 수 있는 것을 말한다.

console.log(name); // undefined

var name = "Jessie";

console.log(name); // 'Jessie'

변수를 선언하고 할당하는 코드보다 console.log 로 호출하는 코드가 먼저 왔음에도 불구하고,
var 로 만든 변수의 ‘선언’과 ‘초기화’ 단계는 호이스팅되어 먼저 실행할 수 있게 되므로 에러가 뜨지 않고 undefined로 뜬다.

var name = 'Jessie'로 값이 할당되고 나서야 console.log(name) 은 ‘Jessie’를 출력한다.

하지만 위의 코드에서 var 대신 let 이나 const 로 선언되었다면 이야기가 달라진다.

let 과 const 의 선언도 호이스팅 되는 것은 같지만, 시간상 자각지대 (Temporal Dead Zone)로 인해 에러가 발생한다.

TDZ(Temporal Dead Zone)

TDZ라는 ‘일시적인 사각지대’는 유효범위의 시작지점부터 초기화 단계까지의 구간을 말한다.
var 키워드는 선언과 초기화 단계가 유효범위 최우선으로 동시에 진행된다. (= 호이스팅 된다)
그래서 변수를 선언하는 코드 이전에 호출해도 undefined로 초기화된 변수가 나올 수 있는 것이다.

하지만 let 과 const 키워드는 선언과 초기화 단계가 분리된다.

console.log(name); // ReferenceError

let name = "Jessie";

먼저 let 변수의 선언단계는 호이스팅되어 최상단에서 등록되었다.
값이 할당되어 초기화 되기 전에 console.log 가 변수를 참조하려 했지만
아직 TDZ에 있는 변수를 참조할 수 없기 때문에 접근할 수 없으므로 에러가 발생한다.