[Q] Ch15: let,const 호이스팅 관련

[JeongHeonK]

Questions

예전에 제가 잘못 알고 말씀드렸던 let, const hoisting 관련 정리해서 올립니다.

제가 2주차 스터디때, let, const는 선언과 초기화가 되고 hoisiting은 발생하나, TDZ에 있기 때문에 참조가 안된다고 말씀드렸습니다.

결론적으로 Hoisting은 발생하나 var와 달리, let, const의 경우 선언과 초기화 단계가 분리되어 진행됩니다.
그래서 선언 단계에서 먼저 실행되나, 변수 선언문에 도달했을 때 초기화가 진행됩니다.

만약 Hoisiting이 안된다면, 블록 범위에서 스코프 체인에 의해 외부 변수를 참조해야 합니다.

let x = 1;

{
  console.log(x) // 1예상
  let x = 3;
}

그러나 실행하면 참조 에러가 발생합니다.

let x = 1;

{
  console.log(x) // ReferenceError: Cannot access 'foo' before initialization.
  let x = 3;
}

원리

V8 엔진에서 변수 객체를 생성할 때는 전부 동일하게 처리하지만, 변수를 위해 메모리 공간을 확보하는 단계에서는 키워드를 다르게 처리합니다.

static InitializationFlag DefaultInitializationFlag(VariableMode mode) {
  DCHECK(IsDeclaredVariableMode(mode));
  return mode == VariableMode::kVar ? kCreatedInitialized
                                    : kNeedsInitialization;
}

kVar 를 보시면 바로 kCreatedInitialized가 사용되나, 아닐 경우 kNeedsInitialization가 사용됩니다.

kNeedsInitialization가 사용될 경우 선언은 되어 있으나 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태가 됩니다.

이 상태가 TDZ구간에 있다는 뜻입니다. 그래서 이 때 접근하면 Reference Error가 발생합니다.

추가

왜 '일시적' 사각지대인가?

{
  // TDZ가 스코프 맨 위에서부터 시작
  console.log(letVar) // Reference error 발생

  const func = () => console.log(letVar); // OK

  let letVar = 3; // letVar의 TDZ 종료
  func(); // TDZ 밖에서 호출함
}

코드의 실행 순서에 의해 형성되기 때문입니다.

---

참조
ES6, Hoisiting으로 다시 보는 let, const
JavaScript의 let과 const, 그리고 TDZ
mdn-let

---

혹시 잘못된 내용 있다면, comment 부탁드립니다!

[binjin0]

let, const의 호이스팅과 TDZ에 대해 헷갈리는 부분이었는데 덕분에 잘 이해되었습니다!