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

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

callback-function.jsjs

1repeat(3, function (i) {2  console.log(`Шаг ${i}`);3});

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

В JavaScript короткие функции такого типа встречаются постоянно. Поэтому для них есть более компактная запись – стрелочная функция:

callback-arrow.jsjs

1repeat(3, (i) => {2  console.log(`Шаг ${i}`);3});

Изменилась только запись переданной функции. repeat по-прежнему получает функцию в параметр action и вызывает её внутри цикла.

Function Expression без слова function

Function Expression

1const double = function (x) {2  return x * 2;3};

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

1const double = (x) => {2  return x * 2;3};

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

У стрелочной функции нет слова function. После параметров вместо него появляется стрелка =>:

arrow-form.jsjs

1(x) => {2  return x * 2;3}

Пока её можно читать почти дословно: «получи x → выполни этот код».

Что означает =>

Слева от => – параметры функции, справа – её тело. Стрелка не «сравнивает» и не «вычисляет» сама по себе – это просто часть синтаксиса стрелочной функции.

Одно выражение – результат функции

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

С фигурными скобками

1const double = (x) => {2  return x * 2;3};

Без фигурных скобок

1const double = (x) => x * 2;

с фигурными скобками → обычный блок, результат возвращаем через return;
без фигурных скобок → одно выражение, его результат вернётся автоматически.

Если действий несколько

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

shout.jsjs

1const shout = (text) => {2  const loud = text + '!!!';3  return loud;4};56console.log(shout('Ура'));

Консоль

Ура!!!

Как записываются параметры

Параметры стрелочной функции пишутся перед стрелкой – как у обычной функции, в круглых скобках. Есть одно послабление: если параметр ровно один, скобки вокруг него можно не писать. Получается три случая:

Параметров	Запись	Правило
нет	`() => 'Привет!'`	пустые круглые скобки обязательны
один	`(x) => x * 2`	при одном параметре скобки можно убрать: `x => x * 2`
два и больше	`(a, b) => a + b`	скобки обязательны

Обе записи одного параметра – (x) и x – равнозначны. Дальше при одном параметре будем писать без скобок.

Стрелка как колбэк

Колбэк из начала урока – теперь стрелкой с одним параметром без скобок:

arrow-block.jsjs

1repeat(3, i => {2  console.log(`Шаг ${i}`);3});

А если действие совсем маленькое, хватит короткого тела:

repeat.jsjs

1function repeat(n, action) {2  for (let i = 1; i <= n; i++) {3    action(i);4  }5}67repeat(3, i => console.log(`Шаг ${i}`));

Консоль

Шаг 1

Шаг 2

Шаг 3

Здесь хорошо видно, зачем появился стрелочный синтаксис. Главное в этой строке – не сама функция, а действие «напечатать номер шага», которое мы передаём в repeat.

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

function

1repeat(3, function (i) {2  console.log(i);3});

стрелка

1repeat(3, i => console.log(i));

Стрелка – не только колбэк

Стрелочная функция не обязана быть колбэком. Её можно сохранить в переменной и использовать как обычную функцию:

add.jsjs

1const add = (a, b) => a + b;23console.log(add(2, 3));

Консоль

Стрелочная функция – это форма записи функции. Колбэк – это роль, которую функция выполняет. Поэтому стрелку можно:

передать другой функции как колбэк;
сохранить в переменной и вызвать напрямую.

Не всё стоит ужимать в одну строку

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

Читается

1const bill = (price, qty, discount) => {2  const sum = price * qty;3  const off = sum * discount / 100;4  return sum - off;5};

Всё в одну строку

1const bill = (price, qty, discount) => price * qty - price * qty * discount / 100;

Что использовать в этом курсе

Теперь у нас три способа записать функцию, и все три – полноправные.

Function Declaration – отдельное объявление функции с собственным именем:

declaration.jsjs

1function greet() {2  console.log('Привет!');3}

Function Expression – функция создаётся как значение и сохраняется в переменной:

expression.jsjs

1const greet = function () {2  console.log('Привет!');3};

Стрелочная функция – тоже функция-значение, но в более компактной записи:

arrow.jsjs

1const greet = () => {2  console.log('Привет!');3};

Или короче – одним выражением без фигурных скобок:

arrow-short.jsjs

1const greet = () => console.log('Привет!');

Пока будем ориентироваться так:

если функция объявляется отдельно и у неё есть своё имя – чаще используем Function Declaration;
если нужна короткая функция-значение, особенно колбэк, – часто удобно писать стрелкой;
Function Expression тоже остаётся обычной и правильной записью.

Позже, когда появится больше практики, выбор станет вопросом контекста и стиля кода.

// теперь вы знаете

Стрелочная функция – тоже функция-значение, как Function Expression, только в более компактной записи: (x) => { ... } вместо function (x) { ... }
Если после стрелки одно выражение без фигурных скобок, его результат возвращается автоматически
С фигурными скобками тело – обычный блок: для результата нужен return
Параметры: () без параметров, x или (x) для одного, (a, b) для нескольких
Стрелка особенно удобна как колбэк, но это форма записи, а не роль: её можно сохранить в переменной и вызывать как обычную функцию

Проверьте себя

Что напечатает программа?

const double = x => x * 2;
console.log(double(4));

8

x * 2

undefined

ошибка – нет return

Сопоставьте стрелочную функцию с такой же записью через function.

x => x + 1

() => 7

(a, b) => a * b

x => { x + 1; }

Почему

x => x + 1function (x) { return x + 1; }

() => 7function () { return 7; }

(a, b) => a * bfunction (a, b) { return a * b; }

x => { x + 1; }function (x) { x + 1; }

Последняя пара – ловушка: фигурные скобки делают тело блоком, а блок без return возвращает undefined. Выражение x + 1 вычислилось и пропало. Нужны скобки – пишите return.

Что напечатает программа?

const a = n => n * 10;
const b = n => {
  n * 10;
};
console.log(a(5), b(5));

50 50

50 undefined

undefined 50

ошибка

Какие стрелочные функции записаны корректно?

Выбери все верные варианты

const a = () => 1;

const b = x => x + 1;

const c = a, b => a + b;

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

Верно ли, что стрелочную функцию можно использовать только как колбэк?

Та же функция стрелкой

Функция greet в комментарии записана через function. Перепишите её стрелочной функцией с коротким телом. Поведение программы должно остаться тем же.

// было:
// const greet = function (name) {
//   return 'Привет, ' + name + '!';
// };

// запишите greet стрелкой с коротким телом

1const greet = name => 'Привет, ' + name + '!';2

Одно выражение после стрелки возвращается само – return и фигурные скобки не нужны.

Чётность одной строкой

Напишите isEven – проверку чётности числа. Вернуть нужно булево значение; удобнее всего – стрелкой с коротким телом.

// isEven: число → true, если чётное
// объявите её стрелкой: const isEven = ...

1const isEven = n => n % 2 === 0;2

Сравнение само по себе даёт true/false – оборачивать его в if с двумя return незачем. Одна строка читается как фраза: «isEven – это остаток от деления n на 2 равен нулю».

Колбэк стрелкой

Функция repeat уже написана. Вызовите её на 3 круга со стрелочной функцией, которая печатает квадрат номера круга: 1, 4, 9.

function repeat(n, action) {
  for (let i = 1; i <= n; i++) {
    action(i);
  }
}

// вызов repeat со стрелочной функцией

1function repeat(n, action) {2  for (let i = 1; i <= n; i++) {3    action(i);4  }5}67repeat(3, i => console.log(i * i));8

Действие «напечатать квадрат» умещается в одно выражение – короткое тело стрелки оставляет его в центре внимания.

Блок и return

Напишите стрелочную функцию bill(price, qty): она считает сумму price * qty и, если сумма не меньше 1000, вычитает из неё 100. Вернуть нужно итог. Телу понадобится несколько действий – используйте фигурные скобки и return.

// bill: (price, qty) → сумма; от 1000 - минус 100
// const bill = (price, qty) => { ... };

1const bill = (price, qty) => {2  const sum = price * qty;3  if (sum >= 1000) {4    return sum - 100;5  }6  return sum;7};8

Тело из нескольких инструкций – блок в фигурных скобках, а результат из блока возвращает только return.

Как записать понятнее

Функция price в комментарии считает цену со скидкой одной строкой и дважды повторяет cost * count. Перепишите её стрелочной функцией с блоком: сохраните сумму без скидки в переменную sum и верните итог. Результат вызовов должен остаться прежним.

// было:
// const price = (cost, count, discount) =>
//   cost * count - cost * count * discount / 100;

// перепишите price блоком с переменной sum

1const price = (cost, count, discount) => {2  const sum = cost * count;3  return sum - sum * discount / 100;4};5

Короткое тело хорошо, пока выражение читается сразу. Здесь вычисление повторялось – блок с именованной суммой длиннее на две строки, но читается без усилий.

Предыдущий урокПередача функций и колбэки Это конец курсаJavaScript – оглавление

← → переключают уроки · не работают при фокусе в полях ввода