Чим let і const відрізняються від var?

JavaScriptJunior~1 хв читання

1. Основні відмінності

Критерій	`var`	`let`	`const`
Область видимості	Функція або глобальна	Блочна (`{ ... }`)	Блочна (`{ ... }`)
Підйом (hoisting)	Піднімається й ініціалізується `undefined`	Піднімається, але не ініціалізується (помилка при зверненні до оголошення)	Піднімається, але не ініціалізується (помилка при зверненні до оголошення)
Повторне оголошення	Дозволено в одній області	Помилка	Помилка
Перезапис значення	Можна	Можна	Не можна
Додавання в об'єкт window (у браузері)	Так (`window.varName`)	Ні	Ні

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

`var` - функціональна область видимості

javascript

if (true) {
  var a = 10;
}
console.log(a); // 10 (доступна за межами блока!)

`let` / `const` - блочна область видимості

javascript

if (true) {
  let b = 20;
  const c = 30;
}
console.log(b); // ReferenceError
console.log(c); // ReferenceError

let і const "живуть" тільки всередині блока {}.

3. Hoisting (підйом змінних)

Усі змінні "піднімаються" на початок області видимості, але var ініціалізується значенням undefined, а let і const потрапляють у Temporal Dead Zone (TDZ) - "тимчасову мертву зону".

javascript

console.log(a); // undefined (var піднімається)
var a = 5;

console.log(b); // ReferenceError (в TDZ)
let b = 10;

console.log(c); // ReferenceError (в TDZ)
const c = 15;

4. Повторне оголошення і перезапис

javascript

var x = 1;
var x = 2; // можна
console.log(x); // 2

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

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

5. Поведінка з об'єктами та масивами при `const`

const захищає посилання, а не вміст.

javascript

const user = { name: 'Tim' };
user.name = 'Alex'; // можна змінити властивість
console.log(user.name); // 'Alex'

user = {}; // Не можна перепризначити сам об'єкт

6. Поведінка в браузері (глобальні змінні)

javascript

var x = 10;
let y = 20;
const z = 30;

console.log(window.x); // 10
console.log(window.y); // undefined
console.log(window.z); // undefined

var додає змінну до глобального об'єкта (window, globalThis), а let і const - ні, що робить код безпечнішим.

7. Резюме - як використовувати

Ситуація	Що використовувати	Чому
Змінна повинна змінюватися	`let`	Безпечніше, ніж `var`, з блочною областю
Змінна не повинна змінюватися	`const`	Явно показує незмінність
Старий код (до ES6)	`var`	Застаріло, використовувати тільки для підтримки старих проектів

Просте правило запам'ятовування

const - за замовчуванням. let - якщо потрібно змінити значення. var - ніколи не використовуй у сучасному коді.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.