Порівняйте ключові слова var, let, const.

Повне пояснення

Що це і навіщо

• var, let та const – ключові слова для оголошення змінних у JavaScript. Вони визначають область видимості, можливість переназначення та поведінку під час hoisting.

Ключові принципи/терміни

• Scope: var має функціональний (function) scope, а let/const – блочний (block) scope.
• Hoisting: усі оголошення піднімаються вгору, але var ініціалізується значенням undefined, тоді як let/const залишаються у «temporal dead zone» до моменту ініціалізації.
• Reassignment: var і let можна переназначити, const – ні. Однак об’єкти, оголошені через const, можна мутувати.

Як це працює (логіка)

• Під час парсингу скрипту інтерпретатор створює «environment record» і піднімає всі var‑змінні до початку функції, ініціалізуючи їх undefined. Для let/const створюється «temporal dead zone» – період, коли доступ до змінної недоступний.
• Після підняття виконується реальна ініціалізація: var отримує значення, а let/const – при оголошенні.

Практика і реалізація (JS/TS)

// var – функціональний scope, hoisted
function demoVar() {
  console.log(x); // undefined
  var x = 10;
}

demoVar();

// let – блочний scope, hoisted без ініціалізації
function demoLet() {
  // console.log(y); // ReferenceError: y is not defined
  let y = 20;
}

demoLet();

// const – блочний scope, не‑reassignable
const obj = {a:1};
obj.a = 2; // OK – мутуємо
// obj = {}; // TypeError: Assignment to constant variable.

Тестування

• Unit: перевірка поведінки в різних контекстах (функція, блок). Приклад з Jest:

test('var hoisting', () => {
  expect(() => { console.log(x); var x = 1; }).not.toThrow();
});

• Integration: перевірка, що let/const не доступні поза блоком.

Дизайн‑рішення та моделі даних

• У сучасному коді переважно використовують let/const. var залишаються лише для підтримки legacy‑коду.

Производительность і масштабування

• var створює змінні в функціональному середовищі, що може збільшувати обсяг пам’яті при великій кількості локальних змінних. let/const краще працюють з блочним scope, що полегшує оптимізацію JIT‑компілятора.

Безпека і приватність

• const запобігає випадковому переназначенню, що зменшує ризик логічних помилок. Однак мутування об’єктів через const все одно можливе, тому слід використовувати Object.freeze() або immutable бібліотеки.

Особливості в контексті JS Core

• var підтримується у всіх браузерах, включно з ES3. let/const – частина ES6+ і потребують транспіляції для старих середовищ.

Оптимізація, типові помилки та edge cases

• Не використовуйте var у глобальному просторі – це створює глобальні змінні. У блочних конструкціях використовуйте let/const. Перевіряйте, що не переназначаєте const.

Диагностика і отладка

• Якщо змінна не визначена, перевірте scope: var може бути доступним поза блоком, а let/const – ні.

Альтернативи

• Для констант, що не змінюються, можна використовувати Object.freeze() або бібліотеки immutable.

Крайні випадки і часті помилки (8)

1. var в глобальному просторі створює властивість об’єкта window. 2. Переназначення const → TypeError. 3. Доступ до let/const у TDZ → ReferenceError. 4. Внутрішні цикли з var – одна змінна для всіх ітерацій. 5. Внутрішні цикли з let – окрема змінна для кожної ітерації. 6. Мутування об’єкта, оголошеного через const. 7. Використання var у функціях, що викликаються рекурсивно – потенційна колізія. 8. Підняття let/const у функціях, що викликаються з різних контекстів.

Cheatsheet + follow‑up питання

• var: function scope, hoisted, redeclarable.
• let: block scope, hoisted (TDZ), reassignable.
• const: block scope, hoisted (TDZ), non‑reassignable.

Follow‑up: Як let/const впливають на продуктивність JIT‑компілятора?