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, где используется функция.
Пример замыкания:
