호이스팅과 TDZ (시간상 사각지대)

호이스팅

let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. (var로 선언한 변수의 경우 호이스팅시 undefined로 초기화한다.)

• 호이스팅이란 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
• 주로 “변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것"을 말한다.
• ES6 이전의 호이스팅은 javascript에서 실행 맥락, 특히 생성 및 실행 단계의 동작 방식을 설명하는 일반적인 방법이었다.
• var, let, const, fuction, class등 선언은 호이스팅 대상이다.

---

함수 선언 후에 호출되는 일반적인 예

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

catName("호랑이");
// "제 고양이의 이름은 호랑이입니다"

호출 후에 함수를 선언하지만 여전히 동작하는 예

catName("호랑이");
// "제 고양이의 이름은 호랑이입니다"

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

함수 호출이 함수 자체보다 앞서 존재하지만 코드는 동작한다. JavaScript에서 실행 맥락이 동작하는 방식이다.

---

let으로 선언한 함수 표현식은 ReferenceError가 발생

위는 함수 선언식이며, 아래는 함수 표현식이다. 두 경우 모두 호출 후 함수를 선언한 경우이다. let 함수 표현식은 ReferenceError가 발생한다.

🛑 let과 const는 호이스팅이 발생하지 않는 것 처럼 보인다.

let과 선언된 변수는 선언문 이전에 참조하면 ReferenceError가 발생한다. 그래서 마치 호이스팅이 일어나지 않는 것처럼 보이지만 var처럼 undefined로 변수를 초기화하지 않기 때문에 그렇게 보일 뿐 호이스팅은 일어난다. const는 애초에 초기값이 없이 선언만 하면 에러가 발생한다.

// var vs let
console.log(bar); // undefined
console.log(foo); // ReferenceError
var bar = 1;
let foo = 2;

// const
const baz // Missing initializer in const declaration

let test // 초기화
console.log(test) // -> 결과는 undefined

var 변수는 선언 전에 접근하면 undefined입니다.
let 변수는 초기화하기 전에는 읽거나 쓸 수 없습니다.

let은 선언과 초기화 단계가 분리되어 진행된다. 따라서 변수의 초기화를 수행하기 전에 읽는 코드가 먼저 나오면 에러가 발생한다!

‘변수 스코프의 맨 위’에서부터 ‘변수의 초기화 완료 시점까지의 변수’는 "시간상 사각지대"(Temporal Dead Zone, TDZ)에 포함된 변수라고 말한다.

TDZ (Temporal Dead Zone)

시간상 사각지대는 코드의 위치가 아니라 코드의 실행순서에 의해 형성된다. 변수의 스코프 시작 지점부터 초기화 전(노란색 영역)에 letVar가 있지만, func() 함수가 호출되지 않았으므로 예시는 정상적으로 작동한다. 실제 함수의 호출은 TDZ 영역 밖에서 일어난다.

출처

호이스팅 - 용어사전 | MDN
let - javascript | MDN