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

Стрелочные функции (arrow functions) - компактный способ записывать функции. Их часто используют как колбэки и для короткой логики. При этом у стрелочных функций есть важные отличия от обычных function.

Базовый синтаксис

Обычная функция (function expression):

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

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

const sum = (a, b) => {
  return a + b;
};

Короткий return

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

const double = (n) => n * 2;

console.log(double(7)); // 14

Если параметр один, скобки вокруг параметра можно опустить:

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

console.log(isEven(10)); // true

Если параметров нет, скобки обязательны:

const getNow = () => Date.now();

Возврат объекта из короткой формы

Если нужно вернуть объект в короткой форме, объект нужно обернуть в круглые скобки, иначе {} будет воспринят как блок кода.

Неверно:

const createUser = (name) => { name: name }; // undefined

Правильно:

const createUser = (name) => ({ name: name, isActive: true });

console.log(createUser("Sam")); // { name: "Sam", isActive: true }

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

Колбэки

Стрелочные функции часто используют там, где функция передается как аргумент.

function run(fn) {
  return fn(10);
}

console.log(run(n => n * 3)); // 30

Методы массивов

Это будет подробно в модуле про массивы, но базовый пример помогает понять, почему стрелки популярны.

const nums = [1, 2, 3, 4];

const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

Обработчики событий

document.addEventListener("click", () => {
  console.log("click");
});

Важные отличия стрелочных функций

1) У стрелочных функций нет собственного this

this в стрелочной функции берется из внешнего контекста (лексически). Это полезно во вложенных функциях, но стрелки не подходят как методы объекта, если нужен “свой” this.

Пример, где стрелка не подходит как метод:

const user = {
  name: "Sam",
  show: () => {
    console.log(this.name);
  }
};

user.show(); // чаще всего undefined (this не указывает на user)

Обычная функция как метод:

const user2 = {
  name: "Sam",
  show() {
    console.log(this.name);
  }
};

user2.show(); // "Sam"

2) Нет arguments

В стрелочных функциях нет объекта arguments. Для переменного количества аргументов используется rest-параметр.

const sumAll = (...nums) => {
  let total = 0;
  for (let i = 0; i < nums.length; i += 1) total += nums[i];
  return total;
};

console.log(sumAll(1, 2, 3)); // 6

3) Нельзя использовать как конструктор

Стрелочные функции нельзя вызывать через new.

 const Person = (name) => { this.name = name; };
 new Person("Sam"); // TypeError

Когда выбирать стрелочную функцию

Практичное правило:

Для коротких колбэков и небольших функций - стрелка обычно удобнее.
Для методов объектов, где нужен собственный this, чаще используют обычную function (или короткий метод method() {}).
Если нужен конструктор - стрелка не подходит.

Что стоит запомнить

Arrow function - компактный синтаксис функций.
В короткой форме не нужны {} и return, но для объектов нужны скобки ({ ... }).
У стрелок нет собственного this и arguments, и их нельзя вызывать через new.
Чаще всего стрелки используют как колбэки.