текст перекладу Пояснення підйому в JavaScript: var, let, const та функції

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

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

Підйом з var

При використанні var оголошення змінної піднімається на початок її області видимості (глобальної або функціональної), але ініціалізація залишається на місці. Якщо ви намагаєтеся звернутися до змінної до її ініціалізації, вона поверне undefined.

Приклад 1: Підйом з var

console.log(a); // undefined  
var a = 10;  
console.log(a); // 10

Пояснення

На самому справді, JavaScript інтерпретує код ось так:

var a; // Оголошення підняте на початок  
console.log(a); // undefined (бо ініціалізація ще не відбулася)  
a = 10; // Ініціалізація залишається на місці  
console.log(a); // 10

Ключові моменти для підйому з var

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

Підйом з let та const

Змінні, оголошені за допомогою let та const, піднімаються, але вони не ініціалізуються. Звернення до них до оголошення призводить до ReferenceError через так звану "Тимчасову мертву зону" (Temporal Dead Zone, TDZ).

Приклад 2: Підйом з let і const

let b; // Підняте, але недоступне до ініціалізації  
const c; // Підняте, але недоступне до ініціалізації  

console.log(b); // ReferenceError  
b = 20;  
console.log(b); // 20

Пояснення

На самому справді, JavaScript піднімає оголошення, але не ініціалізує їх:

let b; // Підняте, але недоступне до ініціалізації  
const c; // Підняте, але недоступне до ініціалізації  

console.log(b); // ReferenceError  
b = 20;  
console.log(b); // 20

Ключові моменти для підйому з let і const

• Оголошення піднімаються, але ініціалізація не піднімається.
• Звернення до них до ініціалізації викликає ReferenceError.
• Змінні мають блокову область видимості, тобто вони доступні лише в межах блоку {}, в якому були оголошені.
• const повинна бути ініціалізована під час оголошення, на відміну від let.

Підйом у оголошеннях функцій проти функціональних виразів

Оголошення функцій (Піднімаються)

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

sayHello(); // Працює без проблем  
function sayHello() {  
 console.log("Привіт!");  
}

Функціональні вирази (Не повністю піднімаються)

Функціональні вирази (призначені змінним) підкоряються правилам підйому змінних.

greet(); // TypeError: greet не є функцією  
var greet = function () {  
 console.log("Привіт!");  
};

У наведеному випадку greet підняте, але до ініціалізації воно розглядається як undefined.

Тимчасова мертва зона (TDZ) з let і const

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

console.log(myVar); // ReferenceError  
let myVar = 50;  
console.log(myVar); // 50

У наведеному прикладі область до оголошення let myVar є TDZ, що означає, що ви не можете звертатися до myVar до того, як вона буде оголошена.

Висновки

• Підйом переміщує оголошення змінних і функцій на початок області видимості.
• var піднімається і ініціалізується значенням undefined.
• let і const піднімаються, але не ініціалізуються (застосовується TDZ).
• Оголошення функцій піднімаються, але функціональні вирази не піднімаються повністю.
• Завжди дотримуйтесь найкращих практик для написання передбачуваного та підтримуваного коду.

Чи був цей посібник корисним? Поділіться своїми думками в коментарях нижче та давайте обговоримо!

Перекладено з: JavaScript Hoisting Explained: var, let, const, and Functions