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

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

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

Стрелочные функции (arrow functions) появились в стандарте ES6 (ES2015). Это альтернативный синтаксис для создания функций, который делает код компактнее и часто понятнее. Однако у них есть важные отличия от обычных функций, о которых мы поговорим позже.

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

Главная особенность стрелочных функций, их краткость. Давайте сравним обычную функцию и стрелочную.

Пример 1: Базовая запись

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

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

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

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

Обратите внимание:

• Ключевое слово function заменяется на => после списка параметров.
• Функция сохраняется в переменную (чаще всего через const).

Пример 2: Сокращения

Если тело функции состоит из одной строки, можно убрать фигурные скобки {} и ключевое слово return — результат вернется автоматически (неявный возврат):

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

Пример 3: Один параметр

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

const double = num => num * 2;

Пример 4: Без параметров

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

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

Разница между обычными и стрелочными функциями

Стрелочные функции не просто «синтаксический сахар». Они имеют ключевые отличия в поведении.

1. Контекст this

Обычные функции имеют свой собственный контекст this, который зависит от вызова. Например, в методах объекта this ссылается на сам объект.

Стрелочные функции не создают свой this. Они берут его из внешней области видимости (лексический контекст). Это особенно полезно в колбэках и обработчиках событий.

Пример с this:

const user = {
  name: "Максим",
  greet: function() {
    setTimeout(function() {
      console.log("Привет, " + this.name); // Ошибка! this === window
    }, 1000);
  }
};

user.greet(); // Привет, undefined

Исправляем с помощью стрелочной функции:

const user = {
  name: "Максим",
  greet: function() {
    setTimeout(() => {
      console.log("Привет, " + this.name); // this берется из greet
    }, 1000);
  }
};

user.greet(); // Привет, Максим

2. Отсутствие объекта arguments

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

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

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

3. Не могут быть конструкторами

Стрелочные функции нельзя вызывать с new, так как у них нет внутреннего метода [[Construct]]:

const User = () => {};
const user = new User(); // Ошибка: User is not a constructor

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

Теперь давайте посмотрим, как стрелочные функции упрощают код на практике.

1. Колбэки

Обработчики событий или функции для методов массивов (map, filter, reduce) становятся лаконичнее:

const numbers = [1, 2, 3];

// Обычная функция
const doubled = numbers.map(function(num) {
  return num * 2;
});

// Стрелочная функция
const doubled = numbers.map(num => num * 2);

2. Цепочки вызовов

Стрелочные функции удобны для цепочек методов:

const users = [
  { name: "Максим", age: 30 },
  { name: "Анна", age: 25 }
];

const names = users
  .filter(user => user.age > 25)
  .map(user => user.name);

console.log(names); // ["Максим"]

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

Чтобы вернуть объект в однострочной стрелочной функции, оберните его в скобки ():

const createUser = (name, age) => ({ name: name, age: age });
console.log(createUser("Максим", 30)); // { name: "Максим", age: 30 }

Практические задачи

Закрепим материал на практике. Решите задачи, сверяясь с примерами выше.

Задача 1: Перепишите обычные функции в стрелочные

function multiply(a, b) {
  return a * b;
}

document.addEventListener("click", function() {
  console.log("Клик!");
});

Задача 2: Исправьте код

Почему этот код выводит undefined? Исправьте его, используя стрелочную функцию.

const timer = {
  seconds: 10,
  start() {
    setInterval(function() {
      this.seconds--;
      console.log(this.seconds);
    }, 1000);
  }
};

timer.start();

Задача 3: Работа с массивами

Дан массив чисел. Используя стрелочные функции:

1. Увеличьте каждое число на 5.
2. Отфильтруйте числа больше 20.
3. Найдите сумму оставшихся чисел.

Исходный массив:
[10, 15, 20, 25, 30]

Ответы к задачам

Ответ 1:

const multiply = (a, b) => a * b;

document.addEventListener("click", () => console.log("Клик!"));

Ответ 2:

Ошибка возникает, потому что this внутри setInterval ссылается на глобальный объект. Исправление:

const timer = {
  seconds: 10,
  start() {
    setInterval(() => {
      this.seconds--;
      console.log(this.seconds);
    }, 1000);
  }
};

timer.start();

Ответ 3:

const numbers = [10, 15, 20, 25, 30];

const result = numbers
  .map(num => num + 5)        // [15, 20, 25, 30, 35]
  .filter(num => num > 20)    // [25, 30, 35]
  .reduce((sum, num) => sum + num, 0);

console.log(result); // 25 + 30 + 35 = 90

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

Полный курс по JavaScript для начинающих — https://max-gabov.ru/javascript-dlya-nachinaushih