Чем Function Declaration отличается от Function Expression в JavaScript?

Function Declaration и Function Expression в JavaScript

• Оба варианта создают функции, однако отличаются способом объявления и моментом создания.
• Function Declaration: функция формируется при загрузке скрипта благодаря hoisting и может вызываться ещё до строки объявления.
• Function Expression: функция создаётся во время выполнения программы и становится доступной только после инициализации.
• Function Declaration обязательно имеет имя, тогда как Function Expression может быть как именованным, так и анонимным.
• Function Expression нередко выбирают для колбеков и IIFE.
• Ключевое различие связано с областью доступности функций и их поднятием (hoisting) в коде.
• На практике вариант выбирают с учётом требований к структуре программы и необходимости контролировать порядок вызова функций.

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

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

Function Declaration — классический способ объявить функцию: в начале используется ключевое слово function, после чего создаётся именованная функция, доступная во всей области видимости. Function Expression представляет собой функцию, заданную как выражение и обычно сохранённую в переменной. Главное различие проявляется при hoisting: объявления функций поднимаются в начало своей области видимости, а функциональные выражения — нет.

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

• Hoisting: Function Declarations помещаются в память до начала выполнения кода, поэтому их разрешено вызывать раньше строки объявления. Function Expressions являются значениями переменных и становятся доступными лишь после инициализации.
• Scope и анонимность: Function Declarations всегда получают имя, а Function Expressions могут оставаться анонимными или иметь имя. Это отражается на удобстве отладки и реализации рекурсии.
• Применение на практике: Function Declarations чаще используют для обычных функций, а Function Expressions — в колбеках, замыканиях и сценариях, где функции передаются как объекты первого класса.

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

В React 18+ Function Expressions применяются довольно часто: например, стрелочные функции используют в обработчиках, чтобы сохранить контекст this. В современных проектах такой подход также удобен при работе с замыканиями и функциональными паттернами. Function Declarations, напротив, хорошо подходят для утилит, которые должны быть доступны во всём модуле.