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

У большой кофемашины десяток кнопок и меню настроек. У капсульной — одна кнопка, а кофе тот же. Для простого эспрессо удобнее капсульная: меньше движений.

С функциями так же. Выражение функции, которое только складывает два числа, занимает три строки. Ту же функцию можно записать в одну строку, без слова function, фигурных скобок и return:

const add = function (a, b) {
    return a + b;
};

const addArrow = (a, b) => a + b;

console.log(add(2, 3)); // 5
console.log(addArrow(2, 3)); // 5

Давайте сравним две записи:

1. add — выражение функции из прошлых уроков: function, параметры, тело в фигурных скобках и return.
2. addArrow — та же функция в одну строку: параметры, стрелка => и сумма.
3. Оба вызова печатают 5: функции делают одно и то же.

Запись со стрелкой

Стрелочная функция — выражение функции, записанное через =>. Выражение — код со значением, как в теме 3: a + b, 42, вызов square(5).

Разберём запись (a, b) => a + b по частям:

• слева от => стоят параметры в круглых скобках;
• справа от => — тело функции;
• если тело — одно выражение без фигурных скобок, его значение и становится результатом, а return не пишут.

Выражением может быть и условие с ? :: const sign = (n) => n < 0 ? -1 : 1;. Такая функция возвращает -1 для отрицательного числа и 1 для остальных.

Скобки вокруг параметров

Круглые скобки вокруг параметров нужны не всегда. Посмотрим на два случая.

Один параметр

Скобки вокруг единственного параметра можно опустить: x => x * x и (x) => x * x — одна и та же функция. У параметра со значением по умолчанию скобки нужны всегда: (x = 1) => x * 2.

Нет параметров или несколько

Если параметров нет или их несколько, скобки обязательны; у функции без параметров они пустые: ().

const square = x => x * x;
const answer = () => 42;

console.log(square(5), answer()); // 25 42

Здесь square(5) возвращает 25, а answer() без аргументов возвращает 42.

Где стрелочная функция удобна

Стрелочную функцию, как и выражение функции, сохраняют в константе и вызывают по её имени. Вызвать её выше строки с const тоже нельзя: целиком поднимаются только объявления функций.

Стрелочная запись удобна для коротких функций в одно выражение. Длинную функцию с несколькими инструкциями чаще записывают объявлением. Здесь аналогия с капсульной машиной заканчивается: короткая запись не ограничивает стрелочную функцию одним выражением. Тело в фигурных скобках вмещает несколько инструкций.

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

Тело в фигурных скобках

Инструкции if, for и объявления переменных — не выражения. Когда они нужны в теле, его заключают в фигурные скобки. Тогда стрелочная функция работает как обычная: результат возвращает только return.

const clamp = (n, max) => {
    if (n > max) {
        return max;
    }
    return n;
};

console.log(clamp(15, 10), clamp(3, 10)); // 10 3

Давайте разберём оба вызова:

1. clamp(15, 10): 15 больше 10, поэтому срабатывает return max и функция возвращает 10.
2. clamp(3, 10): условие ложно, и функция доходит до return n, то есть возвращает 3.

Тело clamp содержит if, поэтому без фигурных скобок и return его не записать.

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

Тело заключили в фигурные скобки, а return не написали:

const half = (x) => {
    x / 2; // ✗
};

console.log(half(10));

Программа напечатает undefined, и ошибки не будет: фигурные скобки после => JavaScript читает как тело функции. Выражение x / 2 вычисляется, но его значение никуда не попадает, а вызов без return возвращает undefined. Добавьте return x / 2; или уберите фигурные скобки: const half = (x) => x / 2;.

Обычная функция без return ведёт себя так же. У стрелочной функции ошибку труднее заметить: запись в одно выражение приучает обходиться без return. Поэтому на собеседовании любят спрашивать, что напечатает такая функция.

Главное

• Стрелочная функция — выражение функции через =>: (a, b) => a + b.
• Тело из одного выражения без фигурных скобок возвращает своё значение без return.
• Скобки можно опустить только вокруг единственного параметра без значения по умолчанию.
• Тело в фигурных скобках возвращает значение только через return, иначе вызов даёт undefined.