Спливання (hoisting)
Спливання (hoisting) - це механізм JavaScript, за якого оголошення змінних і функцій ніби «підіймаються» вгору своєї області видимості перед виконанням коду.
Простіше кажучи: JavaScript спочатку сканує весь код, реєструє оголошення, а потім починає виконувати команди порядково.
Приклад з var
console.log(a); // undefined
var a = 10;
console.log(a); // 10Чому це так працює? Тому що під час компіляції рушій робить ось що:
var a; // оголошення спливло
console.log(a); // undefined
a = 10; // присвоєння
console.log(a); // 10Тобто оголошення (
var a) спливає, але присвоєння (= 10) - ні.
Приклад з let і const
console.log(b); // ReferenceError
let b = 20;або
console.log(c); // ReferenceError
const c = 30;Хоча let і const теж спливають, вони потрапляють у тимчасову мертву зону (TDZ - Temporal Dead Zone),
ділянку коду від початку області видимості до моменту фактичного оголошення.
У цей час доступ до змінної заборонений.
Приклад із функціями
Function Declaration (спливає повністю):
sayHi(); // "Hi!"
function sayHi() {
console.log("Hi!");
}Рушій «бачить» усе оголошення функції ще до виконання коду. Тому можна викликати її до рядка з визначенням.
Function Expression (НЕ спливає повністю):
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- кімнати, які «закриті до відкриття».
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.