В чем разница между объявлением функции Function Expression и Function Declaration

Вопрос

В чем разница между объявлением функции Function Expression и Function Declaration

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает различия в синтаксисе, поведении (hoisting) и практическом использовании Function Expression и Function Declaration.

Ключевые тезисы

• Function Declaration создается с помощью синтаксиса function имяФункции() {} и всплывает в начало области видимости (hoisting), что позволяет вызывать функцию до её объявления.
• Function Expression создается через присвоение функции переменной const имяПеременной = function() {} и не всплывает, поэтому её можно вызывать только после объявления.
• Function Expression может быть анонимной или именованной, а также использоваться как аргумент в других функциях или как часть выражения.
• Function Declaration всегда имеет имя, что упрощает отладку и анализ стека вызовов.
• Function Expression более гибкая и может быть использована в контексте стрелочных функций и IIFE (Immediately Invoked Function Expression).

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

Function Declaration и Function Expression — это два способа объявления функций в JavaScript, которые отличаются синтаксисом и поведением. Function Declaration объявляется с использованием ключевого слова function и имени функции, например: function myFunction() {}. Такая функция всплывает (hoisting) в начало своей области видимости, что позволяет вызывать её до объявления в коде. Это удобно, но может привести к путанице, если не учитывать порядок выполнения кода. Function Expression, напротив, создается через присвоение функции переменной, например: const myFunction = function() {}. Она не всплывает, поэтому её можно вызывать только после объявления. Function Expression более гибкая: она может быть анонимной или именованной, использоваться как аргумент в других функциях или быть частью выражений, таких как IIFE (Immediately Invoked Function Expression).

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

Пример 1

Пример использования Function Declaration:

function greet() {
  console.log('Hello!');
}
greet(); // Выведет: Hello!

Пример 2

Пример использования Function Expression:

const greet = function() {
  console.log('Hello!');
};
greet(); // Выведет: Hello!

Пример 3

Пример использования Function Expression в качестве аргумента:

setTimeout(function() {
  console.log('Hello after 1 second!');
}, 1000);

Пример 4

Пример использования IIFE:

(function() {
  console.log('This function runs immediately!');
})();

Частые ошибки

• Попытка вызвать Function Expression до её объявления, что вызовет ошибку.
• Использование Function Declaration в местах, где требуется гибкость Function Expression, например, в качестве аргумента функции.

Связанные темы

• Hoisting в JavaScript
• Стрелочные функции
• IIFE (Immediately Invoked Function Expression)
• Область видимости в JavaScript

Follow-up вопросы

Можете ли вы привести пример использования Function Expression в качестве аргумента другой функции?

Уровень: basic

Да, например, в методе массива map: const result = [1, 2, 3].map(function(item) { return item * 2; });. Здесь анонимная Function Expression передается как аргумент в map.

Что такое IIFE и как это связано с Function Expression?

Уровень: intermediate

IIFE (Immediately Invoked Function Expression) — это функция, которая выполняется сразу после своего создания. Пример: (function() { console.log('IIFE'); })();. Она использует синтаксис Function Expression для немедленного вызова.

Может ли Function Expression быть стрелочной функцией?

Уровень: basic

Да, Function Expression может быть стрелочной функцией, например: const func = () => { console.log('Hello'); };. Стрелочные функции — это синтаксический сахар для Function Expression.

Как влияет hoisting на Function Expression и Function Declaration?

Уровень: intermediate

Function Declaration всплывает (hoisting), что позволяет вызывать функцию до её объявления. Function Expression не всплывает, поэтому её можно вызвать только после объявления.

Какие преимущества дает использование именованной Function Expression перед анонимной?

Уровень: advanced

Именованная Function Expression упрощает отладку, так как её имя отображается в стеке вызовов. Это также делает код более читаемым, особенно в сложных сценариях.