Learn JavaScript
Справочник / =>

=> - стрелочные функции в JavaScript

=> используют для записи стрелочных функций.

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

Но стрелочная функция - это не просто “короткая запись”. Она отличается от обычной функции поведением this, arguments и невозможностью вызова через new.

Синтаксис

Базовый вариант:

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

Здесь:

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

Вызов выглядит как у обычной функции:

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

Что делает стрелочная функция

По смыслу это тоже функция: она принимает аргументы, выполняет код и может возвращать результат.

const greet = (name) => {
  return `Привет, ${name}!`;
};

console.log(greet("Анна")); // "Привет, Анна!"

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

Один параметр без скобок

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

const square = number => number * number;

console.log(square(4)); // 16

Такая запись часто встречается в коротких колбэках.

Без параметров и с несколькими параметрами

Если параметров нет, нужны пустые скобки.

const sayHi = () => {
  console.log("Hi");
};

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

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

Короткая запись без return

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

const double = number => number * 2;

console.log(double(5)); // 10

Это называют неявным возвратом.

То есть такая запись:

const double = number => number * 2;

по смыслу близка к такой:

const double = function (number) {
  return number * 2;
};

Если есть фигурные скобки, return нужен явно

Если тело функции записано через {}, автоматического возврата уже нет.

const double = number => {
  return number * 2;
};

Это важное правило. Многие ошибки со стрелочными функциями связаны именно с ним.

const double = number => {
  number * 2;
};

console.log(double(5)); // undefined

Без return значение наружу не вернётся.

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

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

Правильно:

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

console.log(createUser("Анна")); // { name: "Анна" }

Если написать без скобок:

const createUser = name => { name: name };

JavaScript воспримет {} как тело функции, а не как объект. В результате функция вернёт undefined.

Стрелочные функции в колбэках

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

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(number => number * 2);

console.log(doubled); // [2, 4, 6, 8]

Именно в таких коротких сценариях стрелочный синтаксис особенно удобен.

Ещё пример:

const users = [
  { name: "Анна", active: true },
  { name: "Игорь", active: false },
];

const activeUsers = users.filter(user => user.active);

console.log(activeUsers);

Чем стрелочные функции отличаются от обычных

Внешне разница кажется синтаксической, но на практике есть несколько важных отличий.

У стрелочной функции нет своего this

Обычная функция получает this в зависимости от того, как её вызвали.

Стрелочная функция своего this не создаёт и берёт его из внешнего окружения.

Это удобно, когда нужно сохранить контекст снаружи.

const user = {
  name: "Анна",
  showLater() {
    setTimeout(() => {
      console.log(this.name);
    }, 100);
  },
};

Здесь стрелочная функция внутри setTimeout использует this метода showLater.

Почему это важно

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

const user = {
  name: "Анна",
  showLater() {
    setTimeout(function () {
      console.log(this.name);
    }, 100);
  },
};

Здесь this внутри обычной функции уже не указывает на объект user.

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

Но метод объекта стрелкой обычно не делают

Вот так писать обычно не стоит:

const user = {
  name: "Анна",
  showName: () => {
    console.log(this.name);
  },
};

У такой функции нет своего this, поэтому она не получает this объекта user как обычный метод.

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

const user = {
  name: "Анна",
  showName() {
    console.log(this.name);
  },
};

У стрелочной функции нет своего arguments

Стрелочная функция не создаёт собственный объект arguments.

const log = () => {
  // console.log(arguments); // ReferenceError
};

Если нужно получить все аргументы, обычно используют rest-параметры:

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

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

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

Она не подходит для роли конструктора.

const User = (name) => {
  this.name = name;
};

// new User("Анна"); // TypeError

Если нужна функция-конструктор или класс, используют обычную функцию или class.

Стрелочная функция обычно не поднимается так, как function declaration

Чаще всего стрелочную функцию записывают в переменную:

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

Поэтому тут работает не поведение function declaration, а поведение самой переменной.

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

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

То есть вызвать такую функцию раньше строки объявления обычно нельзя.

Когда это полезно

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

  • функция короткая
  • её передают как колбэк
  • нужно сохранить внешний this
  • функция просто преобразует данные и сразу возвращает результат

Пример:

const prices = [100, 250, 400];
const formatted = prices.map(price => `${price} ₽`);

console.log(formatted); // ["100 ₽", "250 ₽", "400 ₽"]

Когда лучше обычная функция

Обычная функция часто лучше подходит, когда:

  • нужен метод объекта со своим this
  • нужен конструктор
  • важно использовать arguments
  • хочется объявить функцию через function declaration

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

Частые ошибки

Забывать return в теле с фигурными скобками

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

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

Если есть {}, для возврата нужен return.

Возвращать объект без круглых скобок

const createUser = name => { name: name };

console.log(createUser("Анна")); // undefined

Для короткого возврата объекта нужны скобки:

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

Использовать стрелочную функцию как метод объекта

const user = {
  name: "Анна",
  showName: () => {
    console.log(this.name);
  },
};

Здесь this будет не тем, что обычно ожидают от метода.

Пытаться вызвать стрелочную функцию через new

const User = (name) => {
  this.name = name;
};

// new User("Анна"); // TypeError

Стрелочные функции не работают как конструкторы.

Думать, что стрелочная функция всегда лучше обычной

Стрелка удобна, но не в каждом месте. Для методов и конструкторов обычная функция часто подходит лучше.

Быстрая памятка

  • => используют для записи стрелочных функций
  • один параметр можно писать без скобок
  • если тело без {}, результат возвращается автоматически
  • если тело с {}, обычно нужен return
  • у стрелочной функции нет своего this
  • у стрелочной функции нет своего arguments
  • стрелочную функцию нельзя вызвать через new

Коротко

Стрелочные функции - это короткий синтаксис функций в JavaScript, который особенно удобен для колбэков и простых преобразований. Главное, что стоит запомнить: они отличаются от обычных функций не только записью, но и поведением this, arguments и невозможностью использовать их как конструктор.

← Параметры по умолчанию - значения по умолчанию для параметров функции в JavaScript
rest-параметры - сбор оставшихся аргументов функции в JavaScript →