Какие объявления функций поддерживают hoisting в JavaScript?

Какие объявления функций поддерживают hoisting в JavaScript?

• Hoisting — механизм поднятия объявлений в JS
• Полностью всплывают Function Declarations
• Имя функции и её тело становятся доступными заранее
• У Function Expressions с var поднимается только имя переменной, а её значение равно undefined
• Arrow functions, являясь Function Expressions, целиком не всплывают
• Function Expressions, объявленные через let или const, до инициализации недоступны
• Это позволяет вызывать некоторые функции до строки с их объявлением

Развёрнутый ответ

Краткий ответ

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

Рассмотрим основные варианты объявления функций и особенности их всплытия:

1. Function Declaration — традиционное объявление функции:

function foo() { ... }

Такое объявление поднимается полностью, включая тело функции. Поэтому вызвать её можно в любой точке собственной области видимости, в том числе до строки, где она объявлена.

1. Function Expression с переменной var —

var foo = function() { ... };

В область видимости заранее попадает только переменная foo, причём до присваивания её значение — undefined. Функция создаётся лишь во время выполнения этой строки. До инициализации foo существует как undefined, поэтому попытка вызвать её заканчивается ошибкой TypeError.

1. Function Expression, объявленное через let или const —

let foo = function() { ... };
const foo = () => { ... };

До момента инициализации переменные foo недоступны: они находятся в temporal dead zone. Полноценного всплытия в этом случае нет.

Главные выводы

• Function Declaration поднимается вместе с телом, поэтому такую функцию допустимо вызвать до её текстового объявления.
• Function Expression с var поднимает переменную со значением undefined; вызвать функцию до инициализации нельзя.
• Function Expression с let/const не становится доступным заранее, а обращение до объявления вызывает ReferenceError.
• В ES6 Arrow Functions представляют собой синтаксический сахар для Function Expressions, поэтому при hoisting ведут себя так же, как конструкции с let/const.

Практическое значение

При построении кода важно учитывать эти различия, чтобы не получать ошибки при вызове функций до их определения. В больших проектах и в React 18+ обычно рекомендуют применять const вместе с arrow functions: это делает код понятнее и помогает избежать проблем, связанных с hoisting.