자바스크립트의 TDZ (Temporal Dead Zone) 에 대해서 간단히 설명해주실 수 있나요?

Temporal Dead Zone (TDZ) 란?

• Temporal Dead Zone 은 줄여서 TDZ 라고 부르며 한국어로 해석하면 시간상 사각지대 정도로 해석할 수 있습니다.
• let 과 const 로 선언된 변수는 var 와 같이 호이스팅을 거치지만, 초기화 전까지는 TDZ 에 들어간 변수입니다.
• TDZ 에 들어가 있는 변수를 사용하는 경우, Reference Error 를 만나게 됩니다.

console.log(a); // 레퍼런스 에러! TDZ 에 들어간 변수입니다.

let a = 10;

typeof 와 TDZ

console.log(typeof a); // 레퍼런스 에러!
let a = 10;

• typeof 연산자를 사용해도 마찬가지로 Reference Error 를 만나게 됩니다.

어휘적 스코프와 결합한 TDZ

function foo() {
  var v = 3;

  if (v) {
    let v = v + 3; // 레퍼런스 에러!
  }
}

• 레퍼런스 에러가 발생하는 이유는 let 으로 선언한 v 가 호이스팅 되어, var 로 선언한 v 가 아닌 let 으로 선언한 v 를 사용하려 해서 입니다.

function go(n) {
  // 이 n은 매개변수 n
  console.log(n); // Object {a: [1,2,3]}

  for (let n of n.a) {
    // 레퍼런스 에러!
    console.log(n);
  }
}

go({ a: [1, 2, 3] });

• 위 코드에서 레퍼런스 에러가 발생하는 이유는 for(let n of n.a) 중 n.a 를 할 때 사용하는 n 이 for 블럭 밖의 n 이 아닌 방금 작성한 let n 을 가리키기 때문입니다.

TDZ 는 코드의 상하 위치와 관련이 있는 것이 아니라 초기화 시점과 관련이 있다.

function example() {
  const fn = () => {
    console.log(a); // 42
  };

  const a = 42;
  fn();
}

example();

• 위의 코드에서 a 는 fn() 내부에서 먼저 사용됐지만, 코드 실행 시점은 const a = 42 초기화 시점 이후이기 때문에 TDZ 에 의해 에러가 나지 않는다.