Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «hoisting». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Hoisting** - це механізм JavaScript, при якому оголошення змінних і функцій "піднімаються" в початок області видимості до виконання коду. **Ключове:** спливають тільки оголошення, а не присвоєння значень, тому Function Declaration можна викликати до оголошення, а Function Expression і Arrow Function - ні.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Що таке hoisting (спливання) **Hoisting** - це механізм JavaScript, при якому **оголошення змінних і функцій "піднімаються" в початок області видимості** (до виконання коду). Але важливо: **спливають тільки оголошення**, а не присвоєння значень. --- ## 1. Function Declaration - можна викликати до оголошення ```javascript sayHi(); // Працює! function sayHi() { console.log("Привіт!"); } ``` **Чому працює:** - На фазі підготовки інтерпретатор знаходить `function sayHi` і **створює функцію заздалегідь** у пам'яті. - Коли код виконується порядково, функція вже доступна. **Результат:** ```javascript Привіт! ``` --- ## 2. Function Expression - не працює ```javascript sayHi(); // TypeError: sayHi is not a function const sayHi = function() { console.log("Привіт!"); }; ``` **Чому не працює:** - `const sayHi` спливає (hoisting є), але **тільки саме оголошення змінної**, без присвоєння функції. - До рядка ініціалізації `sayHi` перебуває у **"тимчасовій мертвій зоні" (TDZ)**. - При зверненні до неї до присвоєння - помилка. --- ## 3. Arrow Function - те саме ```javascript greet(); // TypeError: greet is not a function const greet = () => console.log("Привіт!"); ``` **Чому:** - Стрілкові функції - це **function expression**, просто з іншим синтаксисом. - Тому поведінка така сама: змінна недоступна до моменту присвоєння. --- ## 4. var + function expression - особливий випадок ```javascript sayHi(); // TypeError: sayHi is not a function var sayHi = function() { console.log("Привіт!"); }; ``` **Що відбувається:** - Змінна `sayHi` спливає (hoisting з `var`), але їй присвоюється значення `undefined` до виконання рядка з функцією. - У момент виклику `sayHi()` - це `undefined`, а не функція, тому помилка. --- ## Коротко запам'ятати | Спосіб оголошення | Чи можна викликати до оголошення? | Чому | |---|---|---| | `function declaration` | Так | Функція повністю "спливає" | | `function expression` (`const`/`let`) | Ні | Змінна в TDZ | | `function expression` (`var`) | Ні | Змінна `undefined` до присвоєння | | `arrow function` | Ні | Те саме, що function expression | --- ## Візуалізація hoisting ```javascript // Всередині рушія JavaScript відбувається приблизно так: function sayHi() { console.log("Привіт!"); } // спливає повністю var sayBye; // спливає, але без значення sayHi(); // працює sayBye(); // помилка (undefined) sayBye = function() { console.log("Бувай!"); }; ``` --- ## Підсумок > **Function Declaration** створюються заздалегідь і доступні у всьому скоупі. > **Function Expression** і **Arrow Function** - ні, їх можна викликати **тільки після оголошення**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.