1. Function Declaration (Объявление функции)
Синтаксис:
function имяФункции(параметры) {
// тело функции
}
Пример:
function sayHello(name) {
return `Привет, ${name}!`;
}
console.log(sayHello("Анна")); // Привет, Анна!
Особенности:
Объявляется с помощью ключевого слова function.
Поднимается (hoisted) — можно вызывать до её объявления в коде.
Имеет своё имя (может быть использовано для рекурсии).
Создаётся в глобальной области видимости или в области видимости функции, где объявлена.
Пример hoisting:
console.log(greet("Мария")); // Работает! Вывод: Здравствуй, Мария!
function greet(name) {
return `Здравствуй, ${name}!`;
}
2. Function Expression (Функциональное выражение)
Синтаксис:
const имяПеременной = function(параметры) {
// тело функции
};
Пример:
const sayGoodbye = function(name) {
return `Пока, ${name}!`;
};
console.log(sayGoodbye("Иван")); // Пока, Иван!
Особенности:
Функция присваивается переменной.
Не поднимается полностью — переменная поднимается, но не значение (функция).
Можно быть анонимной или именованной.
Часто используется как callback или для передачи функций как аргументов.
Пример с именованной функцией (редко, но возможно):
const factorial = function fact(n) {
return n <= 1 ? 1 : n * fact(n - 1);
};
Важно:
console.log(add(2, 3)); // Ошибка! Cannot access 'add' before initialization
const add = function(a, b) {
return a + b;
};
️ const и let не поднимаются (или поднимаются, но в "temporal dead zone"), поэтому вызов до объявления — ошибка.
3. Arrow Function (Стрелочная функция)
Синтаксис:
const имя = (параметры) => {
// тело функции
};
Примеры:
// Однострочная (неявный return)
const multiply = (a, b) => a * b;
// Многострочная (явный return нужен)
const divide = (a, b) => {
if (b === 0) return "Ошибка: деление на ноль";
return a / b;
};
// Без параметров
const greet = () => "Привет, мир!";
// Один параметр — скобки можно опустить
const square = x => x * x;
Особенности:
Нет собственного this, arguments, super, new.target.
Не поднимается (как и function expression).
Не имеет имени (анонимная), но может быть присвоена переменной.
Лексическое this — берёт this из внешнего контекста.
Не может использоваться как конструктор (new вызовет ошибку).
Не имеет arguments — используйте ...args.
Различия: Сравнение
Характеристика
Function Declaration
Function Expression
Arrow Function
Синтаксис
function name() {}
const f = function() {}
const f = () => {}
Hoisting
Да (вся функция)
Нет (только переменная)
Нет
this
Собственное (зависит от вызова)
Собственное
Лексическое (взято извне)
arguments
Есть
Есть
Нет (используйте ...args)
Можно использовать new
Да
Да
Нет (ошибка)
Имя функции
Да
Может быть (но редко)
Нет (анонимная)
Подходит для методов объекта
Да
Да
Осторожно (из-за this)
Пример с this — ключевое отличие
const user = {
name: "Алексей",
regularFunction: function() {
console.log("Привет, я " + this.name);
},
arrowFunction: () => {
console.log("Привет, я " + this.name); // this — не user!
}
};
user.regularFunction(); // Привет, я Алексей
user.arrowFunction(); // Привет, я undefined (в браузере может быть window.name)
Почему? У стрелочной функции this берётся из внешнего контекста, а не из объекта user.
Когда что использовать?
Тип функции
Когда использовать
Function Declaration
Когда нужна hoisting, простая именованная функция
Function Expression
Когда функция — значение (callback, замыкание)
Arrow Function
Для коротких функций, в map/filter, когда нужен лексический this
Примеры в реальных сценариях
1. Arrow Function в map
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2); // [2, 4, 6]
2. Function Expression как callback
button.addEventListener('click', function() {
console.log('Кнопка нажата');
});
3. Function Declaration — удобно для чтения
function validateEmail(email) {
return email.includes("@");
}
Вывод
Function Declaration — классика, поднимается, удобна для простых функций.
Function Expression — гибкая, не поднимается, хороша для динамических функций.
Arrow Function — короткая, лексическое this, идеальна для колбэков и однострочных операций.
Выбирайте в зависимости от контекста: нужно ли this, нужна ли hoisting, где используется функция.
