Всплытие и временная мёртвая зона

Кажется, что JavaScript выполняет код сверху вниз, строка за строкой. Почти: перед выполнением движок делает быстрый проход по области видимости (что это такое, разобрано в статье «Область видимости») и заводит в ней все имена, которые в ней объявлены — переменные, функции, классы. Только после этого начинается собственно выполнение.

Этот подготовительный проход и называют всплытием (hoisting). Важно, что имена заводятся все сразу, а вот значения в них попадают по-разному — и именно эта разница даёт все сюрпризы.

console.log(hello());
function hello() {
  return "Привет!";
}

Переменная, объявленная через var, заводится на подготовительном проходе и сразу получает временное значение undefined. Присваивание же остаётся на своём месте и сработает, только когда выполнение до него дойдёт.

console.log(count);
var count = 5;
console.log(count);

Не путайте это с обращением к имени, которого нет вообще: там будет честная ошибка. Разницу удобно увидеть через typeof — он единственный, кому позволено спрашивать про несуществующие имена.

try {
  console.log(missing); // такого имени нигде нет
} catch (err) {
  console.log(err.name);
}
console.log(typeof missing);

function check(flag) {
  if (flag) {
    var mark = "да";
  }
  return mark;
}
console.log(check(true));
console.log(check(false));

let и const тоже всплывают: имя резервируется в блоке с самого начала. Но значения — даже временного — у него нет, и любое обращение к переменной до строки объявления заканчивается ошибкой. Отрезок от начала блока до объявления называют временной мёртвой зоной (TDZ, temporal dead zone).

try {
  console.log(user);
} catch (err) {
  console.log(err.name);
}
let user = "Аня";
console.log(user);

Мёртвая зона — не «переменной ещё нет». Она есть, и потому перекрывает одноимённую внешнюю: обратиться к внешнему значению в блоке, где объявлен свой let, уже не получится. И typeof здесь тоже не спасает — он падает наравне с обычным обращением.

let color = "красный";
{
  try { console.log(color); }
  catch (err) { console.log(err.name); }
  let color = "синий";
}

«Всплытие» — метафора, код никуда не переезжает. Просто имена в области видимости заводятся раньше, чем выполнение до них доходит.

Объявление функции (function имя() {}) всплывает вместе с телом: к моменту выполнения функция полностью готова. Поэтому её можно вызвать выше по файлу, чем она написана, — из всего, что объявляется в самом файле, так умеет только она.

console.log(sum(2, 3));
function sum(a, b) {
  return a + b;
}

Функция-выражение — это обычное присваивание, просто справа стоит функция. Значит, действуют правила той переменной, в которую её кладут: у const и let это мёртвая зона со всеми последствиями.

try {
  console.log(mul(2, 3));
} catch (err) {
  console.log(err.name);
}
const mul = (a, b) => a * b;
console.log(mul(2, 3));

console.log(typeof calc);
try {
  calc(1);
} catch (err) {
  console.log(err.name);
}
var calc = function (n) { return n * 2; };

Вопрос живучий, потому что за ним стоит не заучивание, а понимание: код не выполняется строго сверху вниз, области видимости готовятся заранее, а var, let и объявление функции ведут себя по-разному. Обычно просят предсказать вывод короткого фрагмента — и ошибаются как раз на том, что var даёт undefined, а let — исключение.

Практический вывод простой: пишите на const, а если значение меняется — на let, и объявляйте переменную прямо перед первым использованием. Тогда мёртвая зона остаётся страховкой от опечаток, а не источником загадок, и вопрос про всплытие превращается в вопрос про историю языка. Саму эту историю — почему var остался в языке и как читать код, где он встречается, — разбирает статья «var: почему его больше не используют».