Разница между Function Declaration и Function Expression

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

В JavaScript функции можно создавать двумя основными способами: через Function Declaration и Function Expression. Эти два подхода имеют свои особенности и различия, которые важно понимать для правильного использования в коде.

Function Declaration

Function Declaration — это способ объявления функции, который начинается с ключевого слова function, за которым следует имя функции и список параметров в круглых скобках. Тело функции заключается в фигурные скобки.

function greet(name) {
    return `Hello, ${name}!`;
}

• Поднятие (Hoisting): Function Declaration поднимается в начало своей области видимости. Это означает, что функцию можно вызывать до ее фактического объявления в коде.

console.log(greet('Alice')); // Выведет: Hello, Alice!
​
function greet(name) {
    return `Hello, ${name}!`;
}

• Именованность: Функция всегда имеет имя, что делает ее легко идентифицируемой в стеке вызовов и при отладке.

Function Expression

Function Expression — это создание функции в контексте выражения. Функция может быть анонимной или иметь имя, но чаще всего используется анонимная функция, присваиваемая переменной.

const greet = function(name) {
    return `Hello, ${name}!`;
};

• Отсутствие поднятия: Function Expression не поднимается. Это значит, что функцию можно использовать только после того, как она была определена.

console.log(greet('Alice')); // Ошибка: greet is not defined
​
const greet = function(name) {
    return `Hello, ${name}!`;
};

• Анонимность: Функция может быть анонимной, что позволяет создавать функции на лету, например, в качестве аргументов для других функций.

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

• Function Declaration удобно использовать, когда функция должна быть доступна во всей области видимости, например, в глобальной области или в теле модуля.
• Function Expression часто используется для создания функций, которые передаются как аргументы, например, в обработчики событий или методы массивов, такие как map, filter.

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

const numbers = [1, 2, 3, 4, 5];
​
// Используем Function Expression для создания функции обратного вызова
const doubled = numbers.map(function(number) {
    return number * 2;
});
​
console.log(doubled); // Выведет: [2, 4, 6, 8, 10]

В этом примере функция, переданная в map, является Function Expression. Она создается и используется непосредственно в контексте вызова метода map.