Что означает hoisting переменных и функций в JavaScript?

Что означает hoisting переменных и функций в JavaScript?

• JavaScript: механизм обработки объявлений переменных и функций
• объявления переменных и функций логически поднимаются к началу своей области видимости
• для var: создаётся объявление, но инициализация = undefined
• для let/const: до объявления действует TDZ
• функции объявляются полностью (имя + тело) и доступны до строки объявления
• благодаря этому функции и var можно использовать раньше их позиции в исходном коде
• механизм помогает работать с кодом, но способен приводить к неявному поведению

Подробный ответ

Основной ответ

Всплытие (hoisting) — особенность работы JavaScript, при которой объявления переменных и функций логически "переносятся" в начало соответствующей области видимости — функции или глобального контекста. Это происходит на этапе компиляции, ещё до исполнения кода. Поэтому к объявлению можно обратиться раньше его фактического положения в программе, однако значение переменной в этот момент может быть undefined, если используется var.

Основные особенности

• Переменные var: в начало функции или глобального контекста поднимается именно объявление, тогда как инициализация остаётся на исходном месте. Поэтому обращение к var до присваивания возвращает undefined, а не приводит к ошибке.
• Переменные let и const: находятся во временной "мертвой зоне" (TDZ). Обращение к ним до строки объявления вызывает ReferenceError; таким образом, объявление технически всплывает, но использовать переменную до объявления нельзя.
• Функции, созданные через function declaration: поднимаются полностью, включая имя и тело, поэтому вызвать такую функцию можно ещё до строки, где она определена.
• Функциональные выражения: не поднимаются как функции, поскольку обрабатываются как переменные — отдельного четвертого пункта нет.

Практический пример

На практике hoisting объясняет, почему конструкция foo(); function foo() {} выполняется без ошибок, тогда как вызов bar(); при var bar = function(){} завершается иначе. Понимание всплытия необходимо для отладки и грамотной организации кода, особенно в больших JavaScript-проектах на ES5/ES6+.