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

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

Введение

Когда мы только начинаем работать с функциями, мы используем привычный синтаксис function имя(...) { ... } с return внутри тела.

Он понятный и логичный, но со временем в коде начинает появляться много маленьких функций — особенно при работе с массивами, событиями, обработчиками.

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

Чтобы сделать код компактнее и удобнее, в JavaScript появились стрелочные функции.

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

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

Начнём с простого примера.

Обычная функция:

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

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

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

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

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

Разберём:

(a, b) — параметры;
=> — стрелка, которая отделяет параметры от тела функции;
{} — тело функции.

Это тот же функционал, но записанный короче.

Упрощённая запись

Стрелочные функции позволяют ещё больше упростить код.

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

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

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

Здесь:

результат выражения возвращается автоматически;
return писать не нужно.

Это называется «неявный return».

Один параметр и отсутствие параметров

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

const greet = (name) => 'Привет, ' + name;

console.log(greet('Anna'));

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

const sayHello = () => 'Привет!';

console.log(sayHello());

Это делает синтаксис более гибким.

Стрелочные функции в методах массивов

Стрелочные функции особенно полезны при работе с массивами.

Например, с методом map:

let numbers = [1, 2, 3];

let result = numbers.map((num) => num * 2);

console.log(result);

Результат:

[2, 4, 6]

Разберём:

num => num * 2 — это функция;
она применяется к каждому элементу массива;
возвращает новое значение.

Такой код выглядит компактно и читается легче, чем с обычной функцией.

Стрелочные функции с несколькими строками

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

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

console.log(sum(4, 5));

Здесь уже нельзя опустить return, потому что тело функции содержит несколько строк.

Разница в поведении (this)

Есть важная особенность стрелочных функций — они не имеют собственного this.

Рассмотрим пример:

let user = {
  name: 'Stepan',
  greet: function () {
    console.log(this.name);
  },
};

user.greet();

Здесь this указывает на объект user, в консоли будет Stepan.

Если использовать стрелочную функцию:

let user = {
  name: 'Stepan',
  greet: () => {
    console.log(this.name);
  },
};

user.greet();

this уже не будет указывать на объект (в стрелке берётся this из внешней области). В консоли часто окажется undefined — это как раз следствие «ломается» привязка к user.

Поэтому стрелочные функции обычно не используют как методы объектов, когда нужен именно this объекта.

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

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

для коротких функций;
внутри методов массивов (map, filter);
в обработчиках событий;
когда функция используется один раз.

Например:

let names = ['Stepan', 'Ivan'];

names.forEach((name) => {
  console.log(name);
});

Код становится короче и легче читается.

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

Есть ситуации, где лучше использовать классический синтаксис:

когда функция сложная и длинная;
когда нужен собственный this;
когда важна читаемость.

Например, методы объекта лучше писать через обычные функции.

Где это используется на практике

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

Особенно часто:

при работе с массивами;
в React;
в обработке событий;
в асинхронном коде.

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

Итоговое понимание

Стрелочные функции — это более короткий способ записи функций в JavaScript.

Они не добавляют новой логики, но делают код:

компактнее;
чище;
удобнее для чтения в простых случаях.

Ключевая идея в том, что стрелочные функции — это инструмент для упрощения записи, а не замена всех функций.

Важно понимать, когда их использовать, а когда лучше остаться с классическим синтаксисом.