Стрелочные функции

В JavaScript функция — такое же значение, как число или строка: её можно положить в переменную и передать дальше. Для коротких функций есть компактная запись через стрелку => — стрелочные функции. В современном коде они встречаются на каждом шагу.

Функция в переменной

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

const square = function (n) {
  return n * n;
};
 
console.log(square(5)); // 25

Разница с обычным объявлением одна: такую функцию нельзя вызвать раньше строки, где она создана.

Стрелочная запись

Стрелочная функция — сокращённое функциональное выражение. Слово function убирают, а между параметрами и телом ставят стрелку =>:

const square = (n) => {
  return n * n;
};
 
console.log(square(5)); // 25

Работает она так же: принимает аргументы и возвращает результат через return.

Короткое тело

Если тело состоит из одного выражения, фигурные скобки и return можно убрать. Результат выражения вернётся автоматически — это называют неявным возвратом:

const square = (n) => n * n;
 
console.log(square(5)); // 25

Одна строка вместо трёх — именно поэтому стрелочные функции так популярны.

Параметры

Без параметров пишут пустые скобки, а несколько параметров перечисляют через запятую. Если параметр ровно один, скобки вокруг него можно опустить, но многие оставляют их для единообразия:

const sayHi = () => 'Привет!';
const add = (a, b) => a + b;
const double = n => n * 2;
 
console.log(sayHi());     // Привет!
console.log(add(2, 3));   // 5
console.log(double(4));   // 8

Длинное тело

Если функции нужно несколько строк, тело берут в фигурные скобки. Тогда return снова пишут явно:

const formatPrice = (amount) => {
  const rounded = amount.toFixed(2);
  return `${rounded} $`;
};
 
console.log(formatPrice(9.5)); // 9.50 $

Когда что использовать

Обычные объявления function удобны для крупных функций, которые составляют основу программы. Стрелочные функции хороши для коротких действий, особенно когда функцию передают в другую функцию, — об этом в уроке о колбэках. У стрелочных функций есть и особенность с this, её разберём в главе об объектах.

Частая ошибка

Если взять тело в фигурные скобки, неявный возврат перестаёт работать. Функция без return вернёт undefined:

const double = (n) => { n * 2 };
 
console.log(double(4)); // undefined

Либо уберите фигурные скобки — (n) => n * 2, — либо добавьте return внутрь.