В чем разница между var, let и const

В JavaScript var, let и const — это три способа объявления переменных, которые отличаются областью видимости, поведением при всплытии (hoisting) и возможностью изменения. var — устаревший способ с функциональной областью видимости, let и const — современные с блочной областью видимости, при этом const запрещает повторное присваивание.

Как это работает

Область видимости

• var имеет функциональную область видимости: переменная доступна внутри всей функции, где объявлена, даже если объявлена внутри блока {}. Если объявлена вне функции — становится глобальной.
• let и const имеют блочную область видимости: переменная доступна только внутри блока {}, где объявлена (например, внутри if, for, while).

Всплытие (hoisting)

• var всплывает: объявление переменной перемещается в начало функции, но инициализация остаётся на месте. До строки с присваиванием переменная имеет значение undefined.
• let и const не всплывают в том же смысле: они попадают во временную мёртвую зону (temporal dead zone) до момента инициализации. Обращение к ним до объявления вызывает ReferenceError.

Изменение и переопределение

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

Пример

if (true) {
  var a = 1;
  let b = 2;
  const c = 3;
}
console.log(a); // 1 — var видна вне блока
console.log(b); // ReferenceError — let видна только внутри блока
console.log(c); // ReferenceError — const видна только внутри блока

const obj = { x: 1 };
obj.x = 2; // допустимо, меняем свойство объекта
console.log(obj.x); // 2

// obj = { y: 3 }; // TypeError: Assignment to constant variable.

Подводные камни

• Временная мёртвая зона: обращение к let или const до объявления приводит к ошибке, даже если переменная уже объявлена ниже по коду.
• В циклах for с var переменная захватывается по ссылке, что приводит к классической проблеме с замыканиями. let создаёт новую переменную на каждой итерации, поэтому замыкания работают корректно.
• const не делает объект иммутабельным: можно менять свойства, но не саму переменную. Для полной неизменяемости нужны Object.freeze() или другие методы.
• В глобальной области видимости var создаёт свойство на объекте window, а let и const — нет.

Когда использовать

• По умолчанию используйте const — это делает намерение явным и защищает от случайного переприсваивания.
• Используйте let, когда нужно переприсваивать значение (например, счётчик в цикле).
• Избегайте var в новом коде: оно ведёт к неожиданному поведению из-за функциональной области видимости и всплытия. Исключение — поддержка очень старых браузеров, но это редкость.

Коротко

• var — функциональная область видимости, всплытие, можно переопределять; устарел.
• let — блочная область видимости, нельзя переопределять, но можно изменять.
• const — блочная область видимости, нельзя переопределять и изменять (кроме свойств объектов/элементов массивов).
• Правило: const по умолчанию, let при необходимости переприсваивания, var не использовать.