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

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

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

// Обычное функциональное выражение
const add = function (a, b, c) {
  return a + b + c;
};

// Тоже самое записано как стрелочная функция
const add = (a, b, c) => a + b + c;

Слово function не используется, вместо этого сразу идет объявление параметров, за которыми всегда следует символ =>.

// Если параметров несколько, то они перечисляются через запятую в круглых скобках.
const fn = (a, b, c) => {
  return a + b + c;
};

// Если параметр один, то он может быть без круглых скобок.
const fn = x => {
  return x * 2;
};

// Если параметров нет, то обязательно должны быть пустые круглые скобки.
const fn = () => {
  console.log('Hello! :]');
};

После => идет тело функции. Здесь может быть два варианта: с фигурными скобками или без них.

/*
 * Если фигурные скобки после => есть, значит необходимо явно указать то,
 * что должна вернуть функция - поставить return и выражение.
 * Это называется явный возврат (explicit return)
 */
const fn = (a, b, c) => {
  return a + b + c;
};

/*
 * Если фигурных скобок нет, то возвращается результат выражения стоящего после =>
 * Это называется неявный возврат (implicit return)
 * В примере ниже вернется результат выражения сложения a, b и c
 */
const fn = (a, b, c) => a + b + c;

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

У стрелочных функций нет локальной переменной arguments, содержащей все аргументы. Если необходимо собрать все аргументы в массив, используется операция rest.

const add = (...args) => {
  console.log(args);
};

add(1, 2, 3); // [1, 2, 3]