Кратко
Стрелочная функция — это сокращённый способ написания функции. const greet = (name) => 'Привет, ' + name + '!'; — та же функция, но короче. Стрелочные функции особенно удобны для callback-функций.
Подробно
Стрелочные функции (arrow functions) появились в ES6 (2015) и стали стандартом в современном JavaScript.
Синтаксис: // Полная форма const add = (a, b) => { return a + b; };
// Однострочная (неявный return) const add = (a, b) => a + b;
// Один параметр (скобки необязательны) const double = x => x * 2;
// Нет параметров const getFive = () => 5;
Когда использовать arrow functions:
- Для callback-функций: [1,2,3].map(x => x * 2)
- Для коротких функций
- Когда не нужен свой this (обсудим в Intermediate)
Когда НЕ использовать:
- Когда нужен вызов функции до её объявления — поднятие (hoisting) есть только у function declaration, а у const/let со стрелочной функцией его нет
- Когда нужен собственный this (обсудим в Intermediate)
- Для объектных методов (обсудим в Intermediate)
Ментальная модель
Стрелочная функция — это «быстрая запись» обычной функции. Как короткая записка вместо длинного письма: то же сообщение, но быстрее писать и читать.
Примеры
**Самый простой:**
const greet = (name) => 'Привет, ' + name + '!';
console.log(greet('Анна')); // Привет, Анна!Стрелочная функция с одним параметром и неявным return.
**Простой:**
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]Стрелочные функции идеальны для callback-функций: коротко, читаемо, понятно.
**Реальный пример:**
const calculate = {
add: (a, b) => a + b,
multiply: (a, b) => a * b
};
console.log(calculate.add(2, 3)); // 5
console.log(calculate.multiply(2, 3)); // 6Стрелочные функции удобны для методов объекта (но помните про this — обсудим в Intermediate).
Частые ошибки
**Неправильно:** Забывать return в однострочной форме
**Почему:** const add = (a, b) => a + b; — OK const add = (a, b) => { a + b; }; — undefined!
**Правильно:** В однострочной форме return неявный. В блочной {} — явный.
**Неправильно:** Использовать стрелочные функции везде
**Почему:** Стрелочные функции не имеют своего this. А стрелочная функция, сохранённая в const/let, недоступна до строки объявления: поднятия (hoisting), как у function declaration, здесь нет. Это может сломать код.
**Правильно:** Используйте стрелочные для callback-функций. Обычные (function declaration) — для методов и когда нужен вызов функции до её объявления (hoisting).
**Неправильно:** Путать () => {} с объектом {}
**Почему:** const fn = () => ({ key: 'value' }); — нужна обёртка () для объекта
**Правильно:** Для возврата объекта: () => ({ key: 'value' })
Важно запомнить
- const fn = (params) => expression — короткая форма
- const fn = (params) => { ... } — блочная форма с явным return
- Один параметр — скобки необязательны
- Нет параметров — нужны пустые скобки ()
- Идеальны для callback-функций
Связь
Назад: Вы знаете обычные функции (J9) — теперь вы знаете более короткий синтаксис стрелок.
Вперёд: Следующий урок (J11) — объекты: как хранить структурированные данные со свойствами.