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

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

Стрелочная функция (=>) дает более короткий синтаксис и хорошо подходит для колбэков, преобразований данных и небольших функций-утилит. Она часто делает код компактнее и легче для чтения.

Ключевой момент: у стрелочной функции особое поведение this, и это главное отличие от обычной функции.

Проверь себя: почему одна и та же логика может работать по-разному при function и => внутри объекта?

Базовый синтаксис

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

Если тело - одно выражение, можно короче:

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

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

const square = n => n * n;

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

Еще один нюанс: стрелочная функция - это всегда выражение (как Function Expression), поэтому hoisting работает через правила переменной:

// sayHi(); // ReferenceError, если вызов до инициализации
const sayHi = () => console.log('Hi');

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

Частая ловушка - вернуть объект из краткой формы.

const makeUser = (name) => ({ name, role: 'student' });

Без круглых скобок вокруг объекта JS интерпретирует {} как тело функции, а не значение.

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

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

const obj = {
  value: 10,
  regular() {
    return this.value;
  },
  arrow: () => this.value,
};

console.log(obj.regular()); // 10
console.log(obj.arrow()); // не 10: стрелка не "подхватит" this объекта

Здесь часто путаются: arrow внутри объекта обычно не подходит как метод, если нужен this объекта.

Проверь себя: почему для методов объекта чаще лучше обычная функция?

Мини-сценарий: обработка массива

const scores = [40, 75, 90];

const passed = scores.filter(score => score >= 70);
const labels = passed.map(score => `passed:${score}`);

console.log(labels);

Это типичный сценарий, где стрелочные функции отлично читаются.

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

методы объекта, где нужен динамический this;
функции-конструкторы (new со стрелочной не работает);
длинная сложная логика, где короткий синтаксис не добавляет ясности.

Анти-провал: если в функции важен this, сначала проверь, какая форма тебе нужна.

Частые ошибки новичков

Использовать => для метода объекта и терять this.
Забывать return в фигурных скобках.
Неправильно возвращать объект в краткой форме.
Выбирать стрелочную форму в слишком сложных функциях ради "модности".

Проверь себя: почему scores.map(score => { score * 2 }) возвращает массив undefined?

Потому что { ... } здесь означает блок кода, а не выражение, и без return функция возвращает undefined:

scores.map(score => score * 2);
scores.map(score => {
  return score * 2;
});

Что будет, если изменить входные данные

Если в scores попадет строка '80', фильтр score >= 70 может вести себя неочевидно из-за приведения типов. Значит, даже с удобным синтаксисом стрелочной функции входы нужно нормализовать.

Краткий итог

Стрелочная функция дает компактный и современный синтаксис.
Особенно удобна в колбэках и коротких выражениях.
Главное отличие - лексический this без собственного контекста.
Не всегда подходит для методов объекта и конструкторов.
Выбирай => по задаче, а не автоматически в каждом месте.

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