[JS] hoisting과 TDZ(Temporal Dead Zone)

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

>> 변수 기본개념 포스팅  2021.12.27 - [Javascript] - [JS] const, let, var 개념정리 (feat. hoisting, scope)

 

👀 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에 있는 변수를 참조할 수 없기 때문에 접근할 수 없으므로 에러가 발생한다.

 

 

 

[참고글]

https://noogoonaa.tistory.com/78

https://velog.io/@open_h/Hoisting-and-TDZ