Прежде чем читать эту статью, прочтите следующие статьи:
1. Именованное связывание JavaScript, область действия и закрытие
2. Поднятие JavaScript

Что такое ТДЗ?

TDZ расшифровывается как Временная мертвая зона. Эта концепция была введена с введением переменных блочной области (let и const) в ECMAScript 2015 (ES6).

Это концепция, связанная с переменными, объявленными с ключевыми словами let и const в JavaScript, но не с var. TDZ относится к периоду между началом области (например, блока или функции) и точкой, в которой объявлена ​​переменная.

Во время TDZ переменные существуют, но к ним нельзя получить доступ или на них нельзя ссылаться. Если вы попытаетесь получить доступ к переменной в TDZ, это приведет к ошибке ReferenceError. TDZ завершается, когда в коде встречается объявление переменной.

TDZ относится к периоду между началом области (например, блока или функции) и точкой, в которой объявлена ​​переменная.

Преимущества:

  1. Это механизм, предназначенный для предотвращения использования переменных до того, как они будут должным образом инициализированы.
  2. Это помогает улучшить использование переменных и предотвращает ошибки, вызванные доступом к переменным до их объявления в области блока.
  3. Важно знать о TDZ и убедиться, что переменные правильно объявлены и доступны в их соответствующих областях, чтобы избежать ошибок.

Советы:

  1. Переменные, объявленные с помощью var, поднимаются наверх содержащей их функции или глобальной области видимости. Это означает, что вы можете получить доступ к переменной var до ее фактического объявления, но ее значение будет undefined до тех пор, пока ей не будет присвоено значение.
  2. Переменные, объявленные с помощью let и const, поднимаются в верхнюю часть своей области блока, но не инициализируются. Они недоступны до тех пор, пока их оператор объявления не встретится во время выполнения (TDZ).
console.log(x); // undefined
console.log(y); // Uncaught ReferenceError: y is not defined

var x = 10;
let y = 20;
undefined
Uncaught ReferenceError: y is not defined at <anonymous>:2:13
let x = 10;

if (true) {
  console.log(x);   // Uncaught ReferenceError: Cannot access 'x' before initialization
  let x = 20;
}
Uncaught ReferenceError: Cannot access 'x' before initialization at <anonymous>:4:15

Использованная литература:

  1. Временная мертвая зона и поведение при подъеме в JS
  2. Временная мертвая зона (TDZ) и подъем в JavaScript
  3. Что такое временная мертвая зона в JavaScript?
  4. Что такое временная мертвая зона?
  5. Подъем и TDZ (временная мертвая зона) в JavaScript