1. Хоістинг: Що це таке?

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

Як піднімаються різні оголошення:

var:

• Піднімається на початок своєї області видимості і ініціалізується значенням undefined.
• Безпечно звертатися до нього до оголошення, але значення буде undefined.

let та const:

• Піднімаються на початок блоку, але залишаються неініціалізованими.
• Звернення до них до оголошення призводить до ReferenceError (це називається Temporal Dead Zone).

Функції:

• Оголошення функцій повністю піднімаються, що означає, що їх можна викликати до того, як вони будуть визначені.
• Функціональні вирази та стрілочні функції не піднімаються, оскільки їх значення присвоюється під час виконання.

2. Temporal Dead Zone (TDZ)

TDZ — це час між початком блоку та моментом, коли змінна оголошена. Під час цього часу звертання до змінної викликає ReferenceError.

Для let та const змінна існує в TDZ до моменту її оголошення.

3. Приклади для розуміння Хоістингу та TDZ

Приклад 1: Хоістинг з var

console.log(a); // undefined (піднята, але ще не ініціалізована)  
var a = 5;  
console.log(a); // 5

• Оголошення var a піднімається на початок, але його ініціалізація (a = 5) відбувається під час виконання.

Приклад 2: Хоістинг з let та const

console.log(b); // ReferenceError: Cannot access 'b' before initialization  
let b = 10;  
console.log(c); // ReferenceError: Cannot access 'c' before initialization  
const c = 15;

• Змінні b та c піднімаються, але залишаються в Temporal Dead Zone до моменту їх оголошення.

Приклад 3: Хоістинг оголошень функцій і функціональних виразів

// Оголошення функції  
greet(); // "Hello!"  
function greet() {  
 console.log("Hello!");  
}  
// Функціональний вираз  
sayHi(); // TypeError: sayHi is not a function  
var sayHi = function () {  
 console.log("Hi!");  
};

• Оголошення функцій повністю піднімаються.
• Функціональні вирази поводяться як змінні, оголошені за допомогою var, тому лише оголошення змінної (var sayHi) піднімається, а не присвоєння функції.

4. Завдання

A. Звертання до змінних до їх оголошення

console.log(x); // undefined  
var x = 10;  
console.log(y); // ReferenceError  
let y = 20;  
console.log(z); // ReferenceError  
const z = 30;

B. Тестування оголошень функцій і функціональних виразів

// Оголошення функції  
hello(); // "Hello, Function Declaration!"  
function hello() {  
 console.log("Hello, Function Declaration!");  
}  
// Функціональний вираз  
try {  
 hi(); // TypeError: hi is not a function  
} catch (error) {  
 console.error(error.message);  
}  
var hi = function () {  
 console.log("Hi, Function Expression!");  
};

C. Експериментування з TDZ

{  
 console.log(myVar); // undefined  
 var myVar = "var variable";  
 // TDZ починається тут для `let` та `const`  
 console.log(myLet); // ReferenceError  
 let myLet = "let variable";  
 console.log(myConst); // ReferenceError  
 const myConst = "const variable";  
}

5. Ключові поради

1. var піднімається, але ініціалізується значенням undefined. Доступ до нього до присвоєння дозволений, але дасть undefined.
2. let та const піднімаються, але залишаються в TDZ до свого оголошення. Звертання до них до оголошення викликає ReferenceError.
3. Оголошення функцій піднімаються повністю, тоді як функціональні вирази поводяться як змінні.

Перекладено з: Hoisting & Temporal Dead Zone (TDZ) in Javascript