var: почему его больше не используют

let и const ограничены блоком — любыми фигурными скобками: телом if, циклом, просто парой {}. Для var блока не существует. Его область видимости — ближайшая функция, а если функции вокруг нет, то весь скрипт целиком.

if (true) {
  var loud = "слышно снаружи";
  let quiet = "только внутри";
  console.log(quiet);
}
console.log(loud);
console.log(typeof quiet);

Отсюда классическая неожиданность: счётчик цикла не исчезает после последней итерации, а остаётся жить дальше вместе со всем, что объявлено внутри тела.

for (var i = 0; i < 3; i++) {
  var last = i;
}
console.log(i);
console.log(last);

var fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(function () { return i; });
}
console.log(fns[0](), fns[1](), fns[2]());

Прежде чем выполнять функцию, движок собирает в ней все объявления var и создаёт имена заранее — со значением undefined. Присваивание остаётся на своей строке. Это и называют всплытием: имя как будто поднялось к началу функции, а значение осталось на месте. Подробно всплытие разобрано в статье «Всплытие и временная мёртвая зона» — здесь оно нужно как одно из отличий var.

console.log(city);
var city = "Дубай";
console.log(city);

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

try {
  console.log(country);
  let country = "ОАЭ";
} catch (err) {
  console.log(err.name);
}

Второй var с тем же именем — не ошибка, а обычное присваивание. В примере на четыре строки это выглядит безобидно; в файле на четыреста строк это способ незаметно затереть переменную, которую кто-то завёл двумястами строками выше.

var total = 10;
console.log(total);
var total = 99;
console.log(total);

let в такой ситуации останавливает вас ещё на разборе кода: SyntaxError: Identifier 'total' has already been declared. Файл вообще не запустится — и это хорошая новость, потому что о конфликте имён вы узнаёте до запуска, а не по странному поведению в проде.

Объявленная на верхнем уровне обычного скрипта, var не просто попадает в глобальную область — она становится свойством глобального объекта (window в браузере, globalThis в любой среде). let и const так не умеют: они тоже глобальные, но объект не засоряют.

var oldWay = "я стал свойством";
let newWay = "а я нет";
console.log(globalThis.oldWay);
console.log(globalThis.newWay);

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

Чем это плохо: глобальный объект — общая доска для всех скриптов страницы. Достаточно назвать переменную name, status или length — и вы переписываете то, что уже принадлежит браузеру или соседней библиотеке. Ломается при этом не ваш файл, а чужой.

var живёт в коде старше 2015 года, в ответах на Stack Overflow, в примерах бумажных книг и в результатах сборки: транспиляторы до сих пор превращают let в var, когда целятся в древние браузеры. Ещё его любят маленькие скрипты, вставленные прямо в страницу без сборщика.

Читая такой код, держите в голове три поправки. Любое var внутри функции считайте объявленным в её первой строке. Фигурные скобки мысленно игнорируйте — на область видимости они не влияют. Встретив знакомое имя второй раз, проверьте, не перезаписали ли его случайно.

Отдельный узнаваемый приём — обёртка в немедленно вызываемую функцию, IIFE. До появления модулей это был единственный способ спрятать переменные от остальной страницы: раз область видимости у var функциональная, значит нужна функция.

var result = (function () {
  var secret = 21;
  return secret * 2;
})();
console.log(result);
console.log(typeof secret);

var не сломан — он просто из времён, когда скрипт на странице занимал тридцать строк, а не был приложением целиком.