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

1. Что такое стрелочные функции?

Стрелочные функции — это современный способ объявления функций в JavaScript, появившийся в стандарте ES6 (2015). Их называют arrow functions из-за характерной стрелки => в синтаксисе.

Зачем нужны стрелочные функции?

• Сокращают количество кода — особенно для коротких функций.
• Удобны для передачи функций как аргументов — например, в методах массивов (map, filter, forEach).
• По-другому работают с контекстом this — это иногда спасает, а иногда мешает (об этом ниже).

Как выглядят стрелочные функции?

Вот классическая функция:

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

Вот то же самое, но стрелочной функцией:

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

Выглядит компактнее, правда? А если функция короткая, можно сделать её ещё компактнее:

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

Всё! Одна строка — и сразу понятно, что возвращается.

2. Синтаксис стрелочных функций

Давайте разберёмся с синтаксисом подробнее:

Основная форма

const имя = (параметры) => {
  // тело функции
};

• Параметры указываются в круглых скобках.
• После скобок — стрелка =>.
• Затем — тело функции в фигурных скобках.

Однострочная стрелочная функция (неявный return)

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

const square = x => x * x;

Это то же самое, что:

const square = function(x) {
  return x * x;
};

Без параметров

Если у функции нет параметров, скобки всё равно нужны:

const sayHi = () => console.log("Привет!");

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

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

const double = x => x * 2;

Но если параметров нет или больше одного — скобки обязательны:

const sum = (a, b) => a + b;
const random = () => Math.random();

Многострочные функции

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

const getUser = (name, age) => {
  const user = {
    name: name,
    age: age
  };
  return user;
};

Возврат объекта

Есть одна ловушка: если вы хотите вернуть объект в однострочной стрелочной функции, нужно обернуть его в круглые скобки, иначе JavaScript подумает, что это тело функции!

const makeUser = (name, age) => ({ name: name, age: age });

// Без скобок — не работает:
const makeUserWrong = (name, age) => { name: name, age: age }; // undefined!

3. Где применять стрелочные функции?

Колбэки и методы массивов

Стрелочные функции особенно удобны для коротких функций-колбэков, например:

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(n => n * n);

console.log(squares); // [1, 4, 9, 16, 25]

Или фильтрация:

const even = numbers.filter(n => n % 2 === 0);
console.log(even); // [2, 4]

Сортировка

const arr = [5, 2, 10, 1];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 5, 10]

4. Примеры: до и после

Пример 1. Сравнение с function expression

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

// Стало
const greet = name => "Привет, " + name + "!";

Пример 2. Использование в map

const names = ["Вася", "Петя", "Маша"];
const greetings = names.map(name => `Привет, ${name}!`);
console.log(greetings);
// ["Привет, Вася!", "Привет, Петя!", "Привет, Маша!"]

Пример 3. Возврат объекта

const pairs = [ [1, 2], [3, 4] ];
const objects = pairs.map(([a, b]) => ({ a, b }));
console.log(objects);
// [ { a: 1, b: 2 }, { a: 3, b: 4 } ]

5. Как это связано с вашим приложением?

В вашем учебном приложении (например, простом todo-листе или калькуляторе), стрелочные функции пригодятся для обработки событий, перебора массивов задач, фильтрации и сортировки данных. Например, если у вас есть массив задач, и вы хотите получить только выполненные задачи:

const todos = [
  { title: "Почитать", done: true },
  { title: "Сделать дз", done: false }
];

const doneTodos = todos.filter(todo => todo.done);
console.log(doneTodos);
// [{ title: "Почитать", done: true }]

Или, например, для красивого вывода:

todos.forEach(todo => {
  console.log(`${todo.done ? "✔️" : "❌"} ${todo.title}`);
});

6. Типичные ошибки при работе со стрелочными функциями

Ошибка №1: Использование стрелочной функции как метода объекта.

Очень частая ошибка — объявить метод объекта стрелочной функцией и потом удивляться, что this не ссылается на сам объект:

const user = {
  name: "Катя",
  sayHi: () => {
    console.log(this.name); // undefined!
  }
};
user.sayHi();

Вместо этого используйте обычную функцию:

const user = {
  name: "Катя",
  sayHi() {
    console.log(this.name); // "Катя"
  }
};

Ошибка №2: Возврат объекта без скобок.

const makeUser = name => { name: name }; // undefined!

Исправление:

const makeUser = name => ({ name: name });

Ошибка №3: Слишком сложные однострочные стрелочные функции.

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