hoisting

JavaScriptJunior~1 хв читання

Що таке hoisting (спливання)

Hoisting - це механізм JavaScript, при якому оголошення змінних і функцій "піднімаються" в початок області видимості (до виконання коду).

Але важливо: спливають тільки оголошення, а не присвоєння значень.

1. Function Declaration - можна викликати до оголошення

javascript

sayHi(); // Працює!

function sayHi() {
  console.log("Привіт!");
}

Чому працює:

На фазі підготовки інтерпретатор знаходить function sayHi і створює функцію заздалегідь у пам'яті.
Коли код виконується порядково, функція вже доступна.

Результат:

javascript

Привіт!

2. Function Expression - не працює

javascript

sayHi(); // TypeError: sayHi is not a function

const sayHi = function() {
  console.log("Привіт!");
};

Чому не працює:

const sayHi спливає (hoisting є), але тільки саме оголошення змінної, без присвоєння функції.
До рядка ініціалізації sayHi перебуває у "тимчасовій мертвій зоні" (TDZ).
При зверненні до неї до присвоєння - помилка.

3. Arrow Function - те саме

javascript

greet(); // TypeError: greet is not a function

const greet = () => console.log("Привіт!");

Чому:

Стрілкові функції - це function expression, просто з іншим синтаксисом.
Тому поведінка така сама: змінна недоступна до моменту присвоєння.

4. var + function expression - особливий випадок

javascript

sayHi(); // TypeError: sayHi is not a function

var sayHi = function() {
  console.log("Привіт!");
};

Що відбувається:

Змінна sayHi спливає (hoisting з var), але їй присвоюється значення undefined до виконання рядка з функцією.
У момент виклику sayHi() - це undefined, а не функція, тому помилка.

Коротко запам'ятати

Спосіб оголошення	Чи можна викликати до оголошення?	Чому
`function declaration`	Так	Функція повністю "спливає"
`function expression` (`const`/`let`)	Ні	Змінна в TDZ
`function expression` (`var`)	Ні	Змінна `undefined` до присвоєння
`arrow function`	Ні	Те саме, що function expression

Візуалізація hoisting

javascript

// Всередині рушія JavaScript відбувається приблизно так:
function sayHi() { console.log("Привіт!"); } // спливає повністю
var sayBye; // спливає, але без значення

sayHi(); // працює
sayBye(); // помилка (undefined)

sayBye = function() { console.log("Бувай!"); };

Підсумок

Function Declaration створюються заздалегідь і доступні у всьому скоупі. Function Expression і Arrow Function - ні, їх можна викликати тільки після оголошення.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.