Підняття

Термін підняття (hoisting) ви не знайдете у жодній нормативній специфікації до ECMAScript® 2015 Language Specification. Підняття придумали як загальне поняття того, як працюють контексти виконання (зокрема, стадії створення та виконання) у JavaScript. Однак, спочатку ця концепція може дещо заплутати.

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

Дізнайтесь більше

Технічний приклад

Однією з переваг розміщення оголошення функцій у пам'яті до того, як JavaScript виконає будь-який код, є те, що це дозволяє використовувати функцію до того, як ви оголосили її у коді. Наприклад:

function catName(name) {
  console.log("Мого кота звуть " + name);
}

catName("Тигр");

/*
Результат наведеного коду: "Мого кота звуть Тигр"
*/

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

catName("Барсик");

function catName(name) {
  console.log("Мого кота звуть  " + name);
}
/*
Результат наведеного коду: "Мого кота звуть Барсик"
*/

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

Підняття добре працює з іншими типами даних та змінними. Змінні можна ініціалізувати та використовувати до того, як вони були оголошені.

Піднімаються лише оголошення

У JavaScript піднімаються лише оголошення, а не ініціалізації. Якщо змінна була оголошена та ініціалізована після того, як була використана, її значенням буде undefined. Наприклад:

console.log(num); // Вертає undefined 
var num;
num = 6;

Якщо ви оголошуєт змінну після того, як вона була використана, але ініціалізуєте заздалегідь, буде повернене значення:

num = 6;
console.log(num); // вертає 6
var num;

Нижче більше прикладів, що демонструють підняття.

//Приклад 1 - Не піднімається
var x = 1; // Ініціалізація x
console.log(x + " " + y); // '1 undefined'
var y = 2; // Initialize y
//Це не працюватиме, бо у JavaScript піднімаються лише оголошення

//Приклад 2 - Піднімається
var num1 = 3; //Оголосити та ініціалізувати num1
num2 = 4; //Ініціалізувати num2
console.log(num1 + " " + num2); //'3 4'
var num2; //Оголосити num2 для підняття

//Приклад 3 - Піднімається
a = 'Журав'; //Ініціалізувати a
b = 'лина'; //Ініціалізувати b
console.log(a + "" + b); // 'Журавлина'
var a, b; //Оголосити a & b для підняття

Технічна довідка