Стрелочные функции: синтаксис, this, arguments

Встречайте: стрелочные функции 🏹

Стрелочные функции (=>) — это не просто модный синтаксис, а мощный инструмент, который меняет правила игры в JavaScript. Они короче, чище и ведут себя иначе с this и arguments. Давайте разберёмся, как и когда их использовать!

Синтаксис: от громоздкого к элегантному

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

// Обычная функция
const sum = function(a, b) {
  return a + b;
};

// Стрелочная функция
const sumArrow = (a, b) => a + b;

Что изменилось?
1. Ключевое слово function заменено на => после скобок с аргументами.
2. Если тело функции — одна строка, return и фигурные скобки можно опустить (неявный возврат).
3. Если аргумент один — скобки тоже не обязательны:

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

💡 Совет: Используйте скобки для аргументов даже при одном параметре, если это улучшает читаемость. Например, в командах или сложных проектах.

Ловим контекст: магия `this` 🎯

Главное отличие стрелочных функций — работа с this. Они не создают свой контекст, а берут его из внешней области.

Пример проблемы с this в обычных функциях:

const user = {
  name: "Данила",
  greet: function() {
    setTimeout(function() {
      console.log(`Привет, ${this.name}!`); // Ошибка! this === window/undefined
    }, 1000);
  }
};
user.greet();

Решение через стрелочную функцию:

const user = {
  name: "Данила",
  greet: function() {
    setTimeout(() => {
      console.log(`Привет, ${this.name}!`); // Работает! this === user
    }, 1000);
  }
};
user.greet();

Почему?
Стрелочная функция «запоминает» контекст на момент создания. Здесь this берётся из метода greet.

Аргументы в стрелочных функциях 🧩

У стрелочных функций нет своего объекта arguments. Но можно использовать rest-оператор:

const showArgs = (...args) => {
  console.log(args); // Массив аргументов
};
showArgs(1, 2, 3); // [1, 2, 3]

Сравните с обычной функцией:

function oldSchool() {
  console.log(arguments); // Объект arguments (не массив!)
}
oldSchool(1, 2, 3); // { 0: 1, 1: 2, 2: 3 }

⚠️ Важно: arguments в стрелочных функциях ссылается на аргументы внешней обычной функции, если она есть.

Где применять (а где нет) 🚦

✅ Идеально подходит для:
- Колбэков (например, в setTimeout, map, filter).
- Возврата значений без лишнего кода.
- Работы с лексическим this.

❌ Не используйте, когда:
- Нужен собственный this (например, в методах объекта).
- Требуется доступ к arguments без rest-оператора.
- Используете yield (стрелочные функции не могут быть генераторами).

Плохой пример:

const calculator = {
  value: 10,
  add: (num) => this.value + num // Ошибка! this !== calculator
};

Исправленный вариант:

const calculator = {
  value: 10,
  add(num) { // Короткий синтаксис метода
    return this.value + num;
  }
};

Практика: превращаем код в стрелочные функции 🔄

Задача: Переписать примеры со стрелочными функциями.

1. Фильтрация чётных чисел:

const numbers = [1, 2, 3, 4];
const even = numbers.filter(function(num) {
   return num % 2 === 0;
});

2. Умножение через map:

const doubled = numbers.map(function(num) {
   return num * 2;
});

Ответы:

// 1
const even = numbers.filter(num => num % 2 === 0);

// 2
const doubled = numbers.map(num => num * 2);

Итоги: запоминаем главное 🧠

Синтаксис: (a, b) => a + b — коротко и понятно.
this: Берётся из внешнего контекста, нет собственного.
arguments: Не существует, используем ...args.
Область применения: Колбэки, короткие операции, но не методы объектов.

Попробуйте применить стрелочные функции в своём коде — они делают его лаконичнее и предсказуемее!