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

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

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

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

Контент

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

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

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

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

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

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

| Ключове слово | Область видимості |
|---|---|
| `var` | **Функціональна** (function scope) |
| `let`, `const` | **Блочна** (block scope) |

**Функціональна область** - змінна видна в усій функції, де оголошена, незалежно від блоку `{}`.
**Блочна область** - змінна видна **лише всередині блоку** `{ ... }`, де оголошена.

---

### Приклад

```javascript
function test() {
  if (true) {
    var x = 1;
    let y = 2;
    const z = 3;
  }

console.log(x); // 1
  console.log(y); // ReferenceError
  console.log(z); // ReferenceError
}
test();
```

`x` доступний, тому що `var` "ігнорує" блок `if` і піднімається на рівень функції.
А `y` і `z` видні лише всередині `if`.

---

## 2. Підняття (hoisting)

Усі змінні **піднімаються (hoisted)**,
але поводяться по-різному.

| Ключове слово | Піднімається | Можна використати до оголошення? |
|---|---|---|
| `var` | так | так, але `undefined` |
| `let`, `const` | так | ні (помилка через TDZ - *temporal dead zone*) |

---

### Приклад з `var`

```javascript
console.log(a); // undefined
var a = 10;
```

JS "піднімає" оголошення `var a`,
але не присвоєння (`a = 10`).

---

### Приклад з `let` і `const`

```javascript
console.log(b); // ReferenceError
let b = 20;
```

Хоча `b` піднімається, вона перебуває у "тимчасовій мертвій зоні" (TDZ)
- від початку області до фактичного оголошення.

---

## 3. Повторне оголошення

| Ключове слово | Повторно оголосити можна? |
|---|---|
| `var` | Так (перезапише значення) |
| `let`, `const` | Ні (SyntaxError) |

### Приклад

```javascript
var x = 1;
var x = 2; // дозволено
console.log(x); // 2

let y = 1;
let y = 2; // SyntaxError
```

---

## 4. Перепризначення значення

| Ключове слово | Можна змінити значення? |
|---|---|
| `var` | Так |
| `let` | Так |
| `const` | Ні (але об'єкт всередині можна мутувати) |

### Приклад

```javascript
let name = 'Tim';
name = 'Oleh'; // можна

const user = { name: 'Tim' };
user.name = 'Oleh'; // можна мутувати об'єкт
user = {}; // TypeError - не можна перепризначити посилання
```

---

## 5. Приклад, що показує всі відмінності

```javascript
function demo() {
  console.log(a); // undefined
  // console.log(b); // ReferenceError
  // console.log(c); // ReferenceError

var a = 1;
  let b = 2;
  const c = 3;

if (true) {
    var a = 10; // та сама змінна!
    let b = 20; // нова змінна
    const c = 30; // нова змінна
    console.log(a, b, c); // 10 20 30
  }

console.log(a, b, c); // 10 2 3
}

demo();
```

`var a` "витекла" з блоку,
а `let` і `const` створили власні локальні змінні всередині блоку.

---

## 6. Де що використовувати

| Ключове слово | Коли використовувати |
|---|---|
| `let` | Для змінних значень |
| `const` | Типово - завжди (якщо не потрібно змінювати посилання) |
| `var` | Ніколи (тільки для підтримки старого коду) |

---

## ПІДСУМОК

| Властивість | `var` | `let` | `const` |
|---|---|---|---|
| Область видимості | Функціональна | Блочна | Блочна |
| Піднімається | Так | Так | Так |
| Використання до оголошення | undefined | Помилка (TDZ) | Помилка (TDZ) |
| Повторне оголошення | Так | Ні | Ні |
| Перепризначення | Так | Так | Ні |
| Сучасний стандарт | Застарілий | Рекомендується | Типово |

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

Для рев’юера

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

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