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

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

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

А вот как она выглядит в виде стрелочной функции:

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

Разберём стрелочную функцию по частям:

• const add =: у стрелочной функции нет имени, поэтому мы сохраняем её в переменной, и функция получает имя этой переменной. В JavaScript функция — это значение, как числа и текст, поэтому её можно хранить в переменной. Мы используем const, потому что в переменной всегда будет лежать одна и та же функция.
• (a, b): параметры, как обычно, в скобках.
• =>: стрелка — знак равенства и следом знак «больше». Она отделяет параметры от тела функции.
• a + b: тело. Если после стрелки нет фигурных скобок, функция сама возвращает значение, записанное после стрелки, без return.

Стрелочную функцию вызывают, как любую другую:

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

console.log(add(2, 3));

Это выведет:

5

Если функции нужно несколько строк, поместите её тело в фигурные скобки, как у функции, записанной через function. Но с фигурными скобками return придётся написать самому:

const rectangleArea = (width, height) => {
    const area = width * height;
    return area;
};

console.log(rectangleArea(4, 3));

Это выведет:

12

Обратите внимание на точку с запятой после закрывающей }. Вся функция — это значение переменной, созданной через const, а такая инструкция заканчивается точкой с запятой, как и const price = 45;.

Остерегайтесь двух частых ошибок:

• Фигурные скобки без return. const add = (a, b) => { a + b }; вычисляет сумму, но не возвращает её, поэтому add(2, 3) даёт undefined.
• Вызов функции выше строки, которая её создаёт. Пока эта строка не выполнилась, переменная add не содержит функцию, поэтому вы получите ошибку ReferenceError: Cannot access 'add' before initialization.

Вам могут встретиться и стрелочные функции с одним параметром, записанные без скобок, например number => number * 2. Это то же самое, что (number) => number * 2.