Что такое Temporal Dead Zone (TDZ)?

Question

Accepted Answer

Что такое Temporal Dead Zone

Когда интерпретатор входит в блок (функцию, if, for и т.д.), переменные let и const регистрируются в лексическом окружении немедленно, но инициализируются только при достижении строки let x = .... Промежуток между началом блока и строкой инициализации называется Temporal Dead Zone. Любое обращение к переменной в этот период вызывает ReferenceError.

{
  // TDZ для x начинается здесь
  console.log(typeof x); // ReferenceError: Cannot access 'x' before initialization
  let x = 10;            // TDZ заканчивается, x = 10
  console.log(x);        // 10
}

Сравнение с var

var поднимается (hoisting) и инициализируется undefined при входе в функцию — TDZ нет:

function demo() {
  console.log(a); // undefined — var поднят и инициализирован
  console.log(b); // ReferenceError — let в TDZ
  console.log(c); // ReferenceError — const в TDZ

  var a = 1;
  let b = 2;
  const c = 3;
}
demo();

TDZ в классах

Тело класса использует let/const-семантику; обращение к this до super() в конструкторе — тоже проявление TDZ-подобного ограничения:

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    // console.log(this.name); // ReferenceError: Must call super before accessing 'this'
    super(name);
    this.breed = breed;
  }
}

TDZ в параметрах функций по умолчанию

Параметры со значениями по умолчанию тоже имеют TDZ — нельзя ссылаться на более поздний параметр:

// Ошибка: b ещё в TDZ при вычислении значения a
function bad(a = b, b = 1) {
  return a + b;
}
// bad() → ReferenceError

// Корректно: a объявлен раньше b
function good(a = 1, b = a * 2) {
  return a + b;
}
good(); // 3

TDZ и typeof

Для var и необъявленных переменных typeof возвращает "undefined". Для переменных в TDZ — бросает ReferenceError:

typeof undeclaredVar; // "undefined" — безопасно
typeof x;             // ReferenceError, если x — let в TDZ

// Практический вывод: проверка typeof "variable" !== "undefined"
// как old-school guard не работает с let/const

Диагностика в DevTools

// Типичная ошибка: замыкание + let в петле
const handlers = [];
for (let i = 0; i < 3; i++) {
  handlers.push(() => console.log(i)); // OK: let создаёт новую переменную на каждой итерации
}
handlers.forEach(fn => fn()); // 0, 1, 2 — правильно

// С var была бы проблема:
const handlers2 = [];
for (var j = 0; j < 3; j++) {
  handlers2.push(() => console.log(j));
}
handlers2.forEach(fn => fn()); // 3, 3, 3 — одна переменная j

Подводные камни

TDZ возникает не только в начале блока, но и при каждой итерации блочного цикла — let в for создаёт новую переменную на каждой итерации.
typeof больше не является безопасным способом проверки существования переменной, если она объявлена через let/const.
Circular imports в ES-модулях могут создавать TDZ-ситуации: модуль A импортирует из B, а B импортирует из A; при первичной загрузке A-экспорты могут быть в TDZ.
Сообщение об ошибке в V8 — «Cannot access ... before initialization» — не всегда интуитивно указывает на TDZ; разработчики путают с hoisting.
Class-декларации тоже имеют TDZ — класс нельзя использовать до строки его объявления, в отличие от function-декларации.
Минификаторы (Terser) иногда переупорядочивают объявления и могут случайно вводить TDZ в неожиданных местах при агрессивных оптимизациях.

Что такое Temporal Dead Zone (TDZ)?