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

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

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

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

Контент

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

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

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

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

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

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

> Простіше кажучи:
> JavaScript спочатку **сканує весь код**, **реєструє оголошення**,
> а потім починає виконувати команди порядково.

---

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

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

Чому це так працює?
Тому що **під час компіляції** рушій робить ось що:

```javascript
var a;          // оголошення спливло
console.log(a); // undefined
a = 10;         // присвоєння
console.log(a); // 10
```

> Тобто **оголошення (**`var a`**) спливає**,
> але **присвоєння (**`= 10`**) - ні**.

---

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

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

або

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

Хоча `let` і `const` **теж спливають**, вони потрапляють у тимчасову **мертву зону (TDZ - Temporal Dead Zone)**,
ділянку коду від початку області видимості до моменту фактичного оголошення.
У цей час доступ до змінної **заборонений**.

---

## Приклад із функціями

### Function Declaration (спливає повністю):

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

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

Рушій «бачить» усе оголошення функції ще до виконання коду.
Тому можна викликати її **до рядка з визначенням**.

---

### Function Expression (НЕ спливає повністю):

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

> Тут спливає лише **оголошення змінної** (`const sayHello`),
> але не присвоєння функції.
> Тому до моменту ініціалізації доступ заборонений (TDZ).

---

## Підсумуємо

| Що спливає | Коли доступна | Примітка |
|---|---|---|
| `var` | Одразу, але значення `undefined` | Може призводити до багів |
| `let`, `const` | Тільки після оголошення | До цього: TDZ (ReferenceError) |
| `function declaration` | Завжди (повністю) | Можна викликати до визначення |
| `function expression` | Як змінна (`let`, `const`, `var`) | Не доступна до ініціалізації |

---

## Аналогія

Уяви, що інтерпретатор спочатку **будує план будівлі (оголошення)**,
а потім починає **його «заселяти» (присвоєння)**.

- Оголошення функцій - як кімнати, вже готові до використання.
- `var` - кімнати з табличкою, але порожні.
- `let` і `const` - кімнати, які «закриті до відкриття».

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

Для рев’юера

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

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