Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Чим let і const відрізняються від var?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## 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` - ніколи не використовуй у сучасному коді.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати454 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.