Коли я тільки починав працювати з JavaScript, я часто бачив код, який працював ще до того, як змінні були оголошені. Це сильно мене збивало. З часом я дізнався, що це явище називається hoisting.
У цій статті я намагатимусь пояснити, що таке hoisting, і сподіваюся, що це допоможе новачкам, як я колись.
Що таке hoisting?
Hoisting — це поведінка в JavaScript, коли оголошення змінних і функцій переміщуються на початок області видимості ще до виконання коду. Проте піднімаються тільки оголошення, а не їх значення чи присвоєння.
Це може здатися складним, але давайте розглянемо на прикладі.
Приклад зі змінною
console.log(name); // undefined
var name = 'John';
Можливо, ви очікуєте помилку, бо змінна name використовується до її оголошення. Але ні, результат буде undefined.
Чому?
Тому що JavaScript фактично виконує наступне:
var name;
console.log(name); // undefined
name = 'John';
Оголошення var name піднімається на початок, але значення 'John' присвоюється в тому ж місці. Отже, тільки оголошення піднімається, а не значення.
А як щодо let і const?
З let і const ситуація інша.
console.log(age); // ReferenceError
let age = 25;
Цей код викликає помилку. Чому?
Тому що let і const також піднімаються, але вони знаходяться в так званій Temporal Dead Zone (TDZ) до того моменту, поки не досягнута їхня лінія оголошення.
Отже, їх не можна використовувати до оголошення.
Hoisting функцій
Функції в JavaScript обробляються трохи по-іншому. Якщо ви оголосите функцію ось так:
sayHello();
function sayHello() {
console.log('Hello!');
}
Це працює! Вся функція, включаючи її тіло, піднімається на початок, тому ви можете викликати її навіть до того, як вона буде написана в коді.
Але якщо ви створите функцію у вигляді виразу:
greet(); // TypeError: greet is not a function
var greet = function () {
console.log('Hi!');
}
Цей код не працює.
Чому?
Тому що тут піднімається тільки var greet, але значення на момент виконання буде undefined. Коли ви намагаєтесь викликати функцію, це еквівалентно спробі викликати undefined().
Моя порада
Спробуйте завжди оголошувати змінні на початку вашої області видимості. І краще використовувати let і const — вони допоможуть уникнути дивних помилок, пов'язаних з hoisting.
Також будьте обережні з функціями, що виражені як функціональні вирази. Краще оголошувати їх після того, як вони визначені в коді.
Дякую за увагу! Сподіваюся, ця стаття допоможе вам краще зрозуміти hoisting. Якщо у вас є питання, не соромтеся писати в коментарях, і я намагатимусь допомогти. 😊
Перекладено з: Hoisting in JavaScript — Something I Wish I Knew Earlier