Developer

var, let, const, hoisting, TDZ

↑ 1.4 JavaScript: основы · ← Предыдущая · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

Вопросы про «всплытие» и временную мёртвую зону — обязательная часть собеседования по JS.

Объяснение

varletconst
Областьфункцияблокблок
Hoistingподнимается, инициализируется undefinedподнимается, но недоступна до объявления (TDZ)как let
Повторное объявлениеразрешенонетнет
Переприсваиваниедаданет (но объект внутри изменяем)
Свойство windowда (глобально)нетнет

Hoisting — объявления обрабатываются при создании контекста выполнения до выполнения кода.

console.log(a);   // undefined  (var поднята)
var a = 1;
 
console.log(b);   // ReferenceError: Cannot access 'b' before initialization  (TDZ)
let b = 2;
 
hello();          // работает: Function Declaration поднимается целиком
function hello() { console.log("hi"); }
 
bye();            // TypeError: bye is not a function (var поднята как undefined)
var bye = function () {};
 
for (var i = 0; i < 3; i++) setTimeout(() => console.log(i));   // 3 3 3
for (let j = 0; j < 3; j++) setTimeout(() => console.log(j));   // 0 1 2 (новая привязка на итерацию)
 
const user = { name: "A" };
user.name = "B";   // ок: изменяется содержимое
// user = {};      // TypeError
Object.freeze(user);   // мелкая неизменяемость

TDZ (Temporal Dead Zone) — период от начала блока до строки объявления let/const/class, когда обращение к переменной вызывает ReferenceError.

Нюансы и подводные камни

  • Используйте const по умолчанию, let при переприсваивании, var не используйте.
  • const не делает объект неизменяемым: нужен Object.freeze (мелко) или иммутабельные подходы.
  • typeof в TDZ тоже бросает исключение.
  • Function Declaration в блоках имеет особенности в нестрогом режиме.
  • Глобальные var создают свойства window и могут конфликтовать со сторонним кодом.

Практика

  1. Предскажите вывод 6 фрагментов с var/let и setTimeout в цикле.
  2. Найдите в коде var и замените.
  3. Объясните, почему let в цикле работает иначе.

Вопросы с ответами

Связанные темы

Вид графа

Обратные ссылки