4.4 변수 선언의 실행 시점과 변수 호이스팅

변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점(Run time)이 아닌 소스코드 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다. 이것을 평가 과정이라고 합니다.

자바스크립트 엔진은 변수 선언을 포함한 모든 선언문 (var, let, const, function, function*, class 등)을 소스코드에서 찾아내 먼저 실행합니다.
평가 과정이 끝나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행합니다.

즉 자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행된다. 즉 변수 선언이 소스코드의 어디에 있든 상관없이 어디서든지 변수를 참조할 수 있습니다.

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라고 합니다.

하지만 문제가 생겼습니다. var 키워드 이외의 let, const를 사용 시에
Uncaught ReferenceError: Cannot access 'hello' before initialization 가 발생합니다. 아래는 코드와 에러 이미지입니다.

console.log(hello);

 let hello;

그럼 왜 ReferenceError가 발생했는지 알아봅시다.

Temporal Dead Zone

왜 발생했는지를 알기 위해서는 Temporal Dead Zone에 대해 알아야합니다.

그에 앞서 let, const에 대해 짤막히 설명하자면, ES6에 등장한 키워드입니다. 또한 Block scope입니다.
아래는 block scope 개념을 이해하기 위한 예시코드입니다.
어떤 결과가 나오는지 생각해보시고, var 키워드를 사용해서도 해보세요.

let myAge = 30;
let isTrue = true;

if (isTrue) {
	let myAge = 10;
}

console.log(myAge);

var는 block scope가 아닙니다.

var는 선언과 동시에 undefined로 초기화가 됩니다. 그렇기 때문에 TDZ가 없습니다. 하지만 let, const는 선언과 초기화가 동시에 이루어지지 않기 때문에 TDZ가 생성됩니다.

이제 TDZ의 개념을 알아봅시다.

{
let, const는 block scope입니다. block local scope가 시작하는 곳이 TDZ가 시작하는 곳입니다.
//TDZ starts here (block scope) 

//야식 TDZ continues here
//야식 TDZ continues here
//야식 TDZ continues here
//야식 TDZ continues here
//야식 TDZ continues here

console.log(야식);

//야식 TDZ continues here
//야식 TDZ continues here
//야식 TDZ continues here

let 야식 = '치킨'; //변수가 초기화되는 라인이 TDZ가 종료되는 시점입니다.
  // 야식 TDZ does not exist here
  // 야식 TDZ does not exist here
  // 야식 TDZ does not exist here
}

변수가 초기화가 안됐는데 변수를 가져다 쓰겠다고??

                                   응 에러뱉으면 그만이야~

에러가 발생했다는 것은 변수 선언은 되었지만 초기화가 안되었다는 것을 개발자에게 알려주는 겁니다.

다른 TDZ 예시입니다.

let onePlus = one();
const num = 10;
function one () {return num;}

참고 사이트

https://www.freecodecamp.org/news/what-is-the-temporal-dead-zone/

https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/

https://www.freecodecamp.org/news/javascript-temporal-dead-zone-and-hoisting-explained/