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

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

Допрацюйте відповідь до «Змінна до оголошення». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## 1. Усе починається зі **спливання (Hoisting)**

Перед виконанням коду **JavaScript проходить стадію ініціалізації**, де **оголошення змінних і функцій «спливають» угору своєї області видимості**.

Це означає, що рушій **знає про існування змінної заздалегідь**, але **значення їй присвоюється пізніше**, у момент виконання рядка коду.

---

## 2. Різні типи оголошень поводяться по-різному

### `var`

Змінні, оголошені через `var`, **спливають з ініціалізацією значенням** `undefined`.

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

> Пояснення:
> Під час компіляції JS «піднімає» `var a;`, але не присвоює `a = 10;`.
> Тому в момент першого `console.log(a)` змінна вже існує, але ще не ініціалізована.

---

### `let` і `const`

Змінні, оголошені через `let` і `const`, **теж спливають**,
але потрапляють у **«тимчасову мертву зону» (Temporal Dead Zone, TDZ)**,
період від початку області видимості до рядка оголошення.

Спроба звернутися до них до оголошення викличе **помилку**:

```javascript
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

console.log(c); // ReferenceError
const c = 30;
```

> До рядка `let b = 20;` змінна **існує логічно**,
> але доступ до неї **заборонений** - це захист від помилок.

---

### `function`

Функції, оголошені через **function declaration**,
**спливають повністю**, включно з тілом функції:

```javascript
sayHi(); // "Hi!"

function sayHi() {
  console.log('Hi!');
}
```

> Тому їх можна викликати **до оголошення**.

Але якщо функція оголошена як **function expression** (через `const`, `let`, `var`),
то поведінка залежатиме від типу змінної:

```javascript
sayHello(); // ReferenceError
const sayHello = function() {
  console.log('Hello!');
};
```

---

## Коротко: що станеться при використанні змінної до оголошення

| Тип оголошення | Чи можна використовувати до оголошення? | Що станеться |
|---|---|---|
| `var` | Так, але значення буде `undefined` | Немає помилки, але часто джерело багів |
| `let` | Ні | `ReferenceError` (тимчасова мертва зона) |
| `const` | Ні | `ReferenceError` (тимчасова мертва зона) |
| `function declaration` | Так | Функція доступна повністю |

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

Для рев’юера

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

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