Що таке hoisting, як він працює для змінних і функцій?

Повне пояснення

Що це і навіщо Hoisting – механізм, що дозволяє JavaScript‑рушію «підняти» декларації до початку блоку, що полегшує доступ до функцій і змінних var у будь‑якому місці коду.

Ключові принципи/терміни

• declaration – оголошення (var, let, const, function)
• execution context – контекст виконання
• temporal dead zone (TDZ) – період, коли let/const недоступні
• hoisted entity – переміщена декларація

Як це працює

1. Під час створення execution context JavaScript‑рушій проходить через фазу creation.
2. У цій фазі збирає всі декларації функцій і змінних var, розміщуючи їх у верхній частині блоку.
3. Для функцій створюється повний function object; для var – лише змінна з початковим значенням undefined.
4. Після завершення фази creation запускається фаза execution, де виконуються інструкції.

Практика і реалізація

var a;
console.log(a); // undefined – hoisted declaration
function foo() { return 42; }
console.log(foo()); // 42 – hoisted function

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

Тестування

• Unit: перевірка, що функція доступна перед викликом.

test('foo hoisted', () => {
  expect(typeof foo).toBe('function');
});

• Integration: перевірка, що var‑змінна не викликає помилки.

Особливості в контексті JS/TS Core

• У TypeScript типи не змінюють поведінку hoisting; лише синтаксис var/let/const визначає його.
• При використанні export декларації функцій також підлягають hoisting у модулі.

Оптимізація, типові помилки та edge cases

• Не використовуйте var у нових проектах; він піддається непередбачуваним побічним ефектам.
• Помилки TDZ часто виникають, коли намагаються звернутися до let/const перед їх оголошенням.
• Функції, оголошені як arrow functions (const fn = () => {}), не підлягають hoisting.

Диагностика і отладка

• Якщо отримуєте ReferenceError: Cannot access 'x' before initialization, перевірте, чи не використовується let/const перед оголошенням.
• Якщо undefined повертається замість очікуваного значення, перевірте, чи не оголошено змінну через var і чи присвоєння відбувається після використання.

Часті помилки

1. Виклик функції, оголошеної arrow‑функцією, до її декларації.
2. Застосування var у глобальному просторі, що створює глобальні змінні.
3. Змішування var і let/const у одному блоці без чіткого розуміння їх поведінки.

Cheatsheet

• var – hoisted, value = undefined.
• let/const – not hoisted, TDZ.
• Function declarations – fully hoisted.
• Arrow functions (const fn = () => {}) – not hoisted.

Follow‑up питання

• Як впливає hoisting на модульні системи (ESM, CommonJS)?
• Чому варто уникати var у сучасному JavaScript?