Что такое «временная мёртвая зона» (TDZ)?

👨‍💻 Frontend Developer 🟠 Может встретиться 🎚️ Сложный
#JavaScript #База JS

Краткий ответ

Временная мёртвая зона (TDZ) — это период времени между созданием переменной [let]/[const] и моментом, когда ей присваивается значение. В это время переменная существует, но недоступна — попытка обратиться к ней вызовет ошибку [ReferenceError]. ⚠️

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 5;      // Только здесь переменная становится доступной

Полный ответ

Представь, что ты заказал пиццу, но она ещё не приготовлена. Ты знаешь, что она будет, но взять её нельзя — скажет “ещё не готова!” Это и есть временная мёртвая зона! 🍕⏰

Что такое временная мёртвая зона

Когда JavaScript видит переменную [let] или [const], он создаёт её “в уме”, но ещё не даёт ей значение. Переменная как бы есть, но взять её нельзя:

Простой пример

// Временная мёртвая зона для x
console.log(x); // ❌ Ошибка! Ещё нельзя!
let x = 5;      // Только теперь можно
console.log(x); // ✅ 5

Почему так происходит

JavaScript работает в два этапа:

  1. Создание — переменные создаются, но без значения (только для [let]/[const])
  2. Инициализация — переменным присваиваются значения

Разница между var, let и const

// var — нет временной мёртвой зоны
console.log(a); // undefined (не ошибка)
var a = 1;
 
// let/const — есть временная мёртвая зона
console.log(b); // ❌ ReferenceError
let b = 2;

Где начинается и заканчивается TDZ

TDZ начинается с начала блока и заканчивается в месте объявления переменной:

В блоке

{
  // Начало TDZ для x
  console.log(x); // ❌ Ошибка!
  let x = 10;     // Конец TDZ для x
  console.log(x); // ✅ 10
}

В цикле

for (let i = 0; i < 3; i++) {
  // Каждая итерация имеет свою TDZ для i
  setTimeout(() => {
    console.log(i); // 0, 1, 2 (работает!)
  });
}

Частые ошибки

Обращение до объявления

// ❌ Ошибка!
console.log(name); // ReferenceError
let name = 'Иван';
 
// ✅ Правильно
let name = 'Иван';
console.log(name); // 'Иван'

В функциях

function example() {
  // TDZ для переменной внутри функции
  console.log(value); // ❌ Ошибка!
  let value = 100;
}

В условных блоках

if (true) {
  // TDZ для result
  console.log(result); // ❌ Ошибка!
  let result = 'готово';
}

Как избежать ошибок

1. Объявляй раньше использования

// ✅ Сначала объявление, потом использование
let user = 'Петр';
console.log(user); // 'Петр'

2. Используй var если нужно

// var не имеет TDZ
console.log(message); // undefined (не ошибка)
var message = 'привет';

3. Понимай область видимости

let globalVar = 'внешняя';
 
function example() {
  console.log(globalVar); // ✅ 'внешняя'
  
  // Но не внутреннюю переменную!
  // console.log(localVar); // ❌ Ошибка!
  let localVar = 'внутренняя';
}

Простые правила

  1. TDZ — время между созданием и инициализацией переменной ⏰
  2. let/const — имеют TDZ, var — нет ⚠️
  3. До объявления — нельзя использовать, будет ошибка ❌
  4. После объявления — можно использовать ✅
  5. Объявляй раньше — чтобы избежать ошибок 🎯

Понимание временной мёртвой зоны помогает писать код без ошибок и лучше понимать, как работают переменные в JavaScript! 💪


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪