Що таке Hoisting в JavaScript?

Зазвичай, це запитання можуть задавати в контексті розмови про функції. А саме різниці між Arrow Function та звичайними або при обговорення контексту виконання функцій(this). Тож давайте розберемо, що таке hoisting. Простими словами це механізм JavaScript, який спочатку зчитує файл перед виконанням і реєструє всі змінні та функції. Це дає змогу звертатись до них в коді перед оголошенням. Розглянемо як працює hoisting з різними сутностями в JS:

Var

В реальному проєкті ви скоріше за все не зіштовхнетесь з var(якщо це не древній legacy), але розібравшись як працює hoisting в цьому випадку, дасть ширше розуміння концепції. В прикладі, під час першого зчитування файлу змінна a була зареєстрована і якщо ви хочете доступитись до неї перед оголошенням, вона буде мати значення undefined.

console.log(a); // undefined, а не помилка

var a = 10;

console.log(a); // 10

Function declaration

В цьому випадку при hoisting, реєструється як назва функції так і її тіло тому вона доступна для використання, перед оголошенням. Важливо наголосити, що це працює тільки з Function Declaration і не буде працювати з Function Expression.

foo(); // Через hoisting функція доступна, перед оголошенням

function foo() {

console.log("Hello");

}

Let і const

Фактично, змінні чи константи піддаються hoisting. Вони реєструються так само як і змінні оголошені через var, але замість присвоєння undefined, let i const потрапляють в TDZ(Temporal Dead Zone). Тому при спробі доступу до них перед оголошенням, ви отримаєте помилку - ReferenceError.

Інформації вище, цілком достатньо для того, щоб ваша відповідь на інтервʼю звучала впевнено і інтервʼювер зрозумів, що ви розбирається в даному питанні.

Var

Function declaration

Let і const

Коментарі (0)