Почему обычную функцию можно вызвать до её объявления в коде, а стрелочную — нет?

Что такое хоистинг

Хоистинг — это механизм JavaScript, при котором объявления переменных и функций перемещаются в начало их области видимости во время компиляции. Однако поведение различается для разных типов объявлений.

Обычные функции

Объявление функции через function foo() {} полностью поднимается: и имя, и тело функции становятся доступными сразу в начале области видимости. Поэтому вызов до строки объявления работает корректно.

console.log(sum(2, 3)); // 5
function sum(a, b) { return a + b; }

Стрелочные функции

Стрелочная функция — это выражение, которое присваивается переменной (обычно через const или let). Переменная хоистируется, но остаётся в состоянии временной мёртвой зоны (TDZ) до момента выполнения строки присваивания. Попытка вызвать её до этого приводит к ReferenceError.

console.log(sum(2, 3)); // ReferenceError: Cannot access 'sum' before initialization
const sum = (a, b) => a + b;

Практическое применение

Это различие важно при организации кода: обычные функции можно размещать в любом месте модуля, что удобно для читаемости. Стрелочные функции требуют, чтобы объявление шло до использования, что способствует более линейному потоку выполнения и предотвращает случайные ошибки.

Вывод

Используйте обычные функции, когда нужна гибкость вызова из любого места, и стрелочные — когда важна краткость и лексический контекст this, но помните о необходимости объявлять их до использования.