Що таке temporal dead zone?

Повне пояснення

Що це і навіщо

• TDZ (temporal dead zone) – період, коли змінна оголошена через let або const, але ще не ініціалізована. Це запобігає використанню «заглушених» значень і підвищує безпеку коду.

Ключові принципи

• TDZ починається відразу після оголошення і триває до моменту присвоєння значення.
• Доступ до змінної в TDZ викликає ReferenceError.

Як це працює

• При парсингу коду інтерпретатор створює «порожню» область для let/const, але не ініціалізує її.
• Після завершення блоку (наприклад, після }) область видаляється.

Практика і реалізація

let a = 5;
console.log(a); // 5

let b;
console.log(b); // undefined (не TDZ)

let c;
console.log(c); // ReferenceError: Cannot access 'c' before initialization

Тестування

• У Jest можна перевірити TDZ:

test('TDZ throws', () => {
  expect(() => { let x; console.log(x); }).toThrow(ReferenceError);
});

Особливості в контексті JS Core

• TDZ застосовується лише до let/const; var не має TDZ.
• Підтримується в усіх сучасних браузерах і Node.js.

Оптимізація та типові помилки

• Помилкове використання var замість let/const може призвести до непередбачуваних значень.
• Переконайтеся, що оголошення let/const розміщені перед використанням.

Часті помилки

1. Виклик функції, що використовує let, до її оголошення.
2. Імпорт модуля, що містить let, у циклі без правильного порядку.
3. Використання this в arrow-функціях, де let оголошено поза контекстом.
4. Неправильне використання async/await з let у циклі.
5. Змішування var і let в одному блоці.
6. Неочікуване оновлення глобальної області через let у модулях.
7. Підключення скриптів з різними режимами (defer, async).
8. Переозначення змінної в TDZ.

Cheatsheet

• let/const → TDZ.
• var → немає TDZ, підняття (hoisting).
• Доступ до let/const перед ініціалізацією → ReferenceError.
• Після блоку область видаляється.