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

# Разница между let, const и var в JavaScript

Это один из фундаментальных вопросов в JavaScript. var, let и const имеют существенные различия в области видимости, переопределении, переданию во времени и мутируемости. Понимание этих различий критично для написания надёжного кода.

1. Область видимости (Scope)

var — Function Scope

function example() {
  if (true) {
    var x = 1;
  }
  console.log(x);  // 1 (видна везде в функции)
}

for (var i = 0; i < 3; i++) {}
console.log(i);  // 3 (видна в глобальной области)

var имеет область видимости на уровне функции. Переменная, объявленная в блоке if или for, видна во всей функции.

let и const — Block Scope

function example() {
  if (true) {
    let x = 1;
    const y = 2;
  }
  console.log(x);  // ReferenceError: x is not defined
  console.log(y);  // ReferenceError: y is not defined
}

for (let i = 0; i < 3; i++) {}
console.log(i);  // ReferenceError: i is not defined

let и const имеют блочную область видимости. Они видны только внутри блока { }, где объявлены.

2. Передача во времени (Hoisting)

var — Hoisted с инициализацией undefined

console.log(x);  // undefined
var x = 5;
console.log(x);  // 5

// JavaScript интерпретирует это как:
var x;           // Объявление поднято
console.log(x);  // undefined (инициализирована undefined)
x = 5;
console.log(x);  // 5

let и const — Temporal Dead Zone (TDZ)

console.log(x);  // ReferenceError: Cannot access 'x' before initialization
let x = 5;

console.log(y);  // ReferenceError: Cannot access 'y' before initialization
const y = 10;

// let и const поднимаются, но не инициализируются
// Период между началом блока и объявлением — Temporal Dead Zone

3. Переопределение и переприсвоение

var — можно переопределить и переприсвоить

var x = 1;
var x = 2;  // Окей, переопределение
x = 3;      // Окей, переприсвоение
console.log(x);  // 3

let — можно переприсвоить, но не переопределить

let x = 1;
let x = 2;  // SyntaxError: Identifier 'x' has already been declared

let y = 1;
y = 2;      // Окей, переприсвоение
console.log(y);  // 2

const — нельзя переприсвоить, нельзя переопределить

const x = 1;
const x = 2;  // SyntaxError: Identifier 'x' has already been declared

const y = 1;
y = 2;        // TypeError: Assignment to constant variable

// Но можно мутировать объект/массив!
const obj = { name: 'John' };
obj.name = 'Jane';  // Окей
console.log(obj);   // { name: 'Jane' }

const arr = [1, 2, 3];
arr.push(4);        // Окей
console.log(arr);   // [1, 2, 3, 4]

4. Глобальная область видимости

var в глобальной области создаёт свойство на объекте window

var x = 5;
console.log(window.x);  // 5 (в браузере)

let y = 10;
console.log(window.y);  // undefined

const z = 15;
console.log(window.z);  // undefined

Сравнительная таблица

Практические рекомендации

1. Используйте const по умолчанию

// ✅ ХОРОШО - начинайте с const
const name = 'John';
const count = 0;
const config = { debug: true };

const предотвращает случайные переприсвоения и явно показывает намерение.

2. Используйте let для переменных, которые меняются

// ✅ ХОРОШО
let counter = 0;
for (let i = 0; i < 10; i++) {
  counter++;
}

let user = getUserData();
if (condition) {
  user = new User();
}

3. Избегайте var в современном коде

// ❌ ПЛОХО - не используйте var
var oldStyle = 'deprecated';

// ✅ ХОРОШО
const newStyle = 'modern';
let changeable = 'when needed';

Примеры ошибок, связанные с различиями

Пример 1: Замыкание в цикле

// ❌ ПЛОХО с var
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Выведет: 3, 3, 3

// ✅ ХОРОШО с let
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Выведет: 0, 1, 2

Пример 2: Область видимости в условиях

function process() {
  if (Math.random() > 0.5) {
    var x = 'var is here';
    let y = 'let is here';
  }
  
  console.log(x);  // 'var is here' или undefined
  console.log(y);  // ReferenceError
}

Пример 3: Повторное объявление

var x = 1;
var x = 2;  // Спокойно

let y = 1;
let y = 2;  // Error!

const z = 1;
const z = 2;  // Error!

Лучшие практики в современном JavaScript

1. Используйте const как стандарт для всех переменных, которые не изменяются
2. Используйте let только когда нужна переменная, которая будет изменяться
3. Никогда не используйте var в новом коде (может требоваться в legacy коде)
4. Избегайте глобального состояния — объявляйте переменные максимально близко к их использованию
5. Используйте строгий режим — он помогает избежать случайных ошибок с var

Заключение

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