Отличия var, let и const

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

var

• Область видимости: Функциональная область (function-scoped). Переменные, объявленные с помощью var, доступны во всей функции, даже если объявлены внутри блока.
• Hoisting: Переменные var всплывают (hoisted) — их объявление поднимается наверх функции, но инициализация остаётся на месте.
• Переопределение: Можно переопределять и повторно объявлять одну и ту же переменную в одной области видимости.

Пример с var:

function example() {
  console.log(a); // undefined, переменная всплыла, но значение ещё не присвоено
  var a = 10;
  if (true) {
    var a = 20; // переопределение переменной в той же функции
    console.log(a); // 20
  }
  console.log(a); // 20
}

example();

let

• Область видимости: Блочная область (block-scoped). Переменные, объявленные с помощью let, доступны только внутри блока, где они объявлены (например, в фигурных скобках {}).

• Hoisting: let также всплывает, но находится в «временной мёртвой зоне» (Temporal Dead Zone) до момента инициализации.

• Переопределение: Нельзя повторно объявлять переменную с таким же именем в одной и той же области видимости.

Пример с let:

function example() {
  // console.log(b); // Ошибка: нельзя получить доступ до инициализации (ReferenceError)
  let b = 10;
  if (true) {
    let b = 20; // новая переменная, локальная для блока if
    console.log(b); // 20
  }
  console.log(b); // 10
}

example();

const

• Область видимости: Блочная область (block-scoped), как и let.
• Hoisting: const также подвержен всплытию и временной мёртвой зоне до инициализации.
• Переопределение: Переменные, объявленные с помощью const, нельзя переопределить или повторно объявить. При этом объект, объявленный с const, может быть мутирован, если его структура допускает изменение.

Пример с const:

function example() {
  const c = 10;
  // c = 20; // Ошибка: Assignment to constant variable.
  
  if (true) {
    const c = 30; // новая переменная в локальной области видимости
    console.log(c); // 30
  }
  console.log(c); // 10

  const obj = { name: "Alice" };
  obj.name = "Bob"; // Допустимо: меняется свойство объекта
  console.log(obj.name); // "Bob"
  // obj = {}; // Ошибка: нельзя переназначить переменную
}

example();

Основные отличия