JS Core

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

Научиться создавать короткие функции с помощью синтаксиса => и понимать разницу с обычными функциями.

Начальный (Beginner)
Нужно знать:Функции

Кратко

Стрелочная функция — это сокращённый способ написания функции. const greet = (name) => 'Привет, ' + name + '!'; — та же функция, но короче. Стрелочные функции особенно удобны для callback-функций.


Подробно

Стрелочные функции (arrow functions) появились в ES6 (2015) и стали стандартом в современном JavaScript.

Синтаксис: // Полная форма const add = (a, b) => { return a + b; };

// Однострочная (неявный return) const add = (a, b) => a + b;

// Один параметр (скобки необязательны) const double = x => x * 2;

// Нет параметров const getFive = () => 5;

Когда использовать arrow functions:

  • Для callback-функций: [1,2,3].map(x => x * 2)
  • Для коротких функций
  • Когда не нужен свой this (обсудим в Intermediate)

Когда НЕ использовать:

  • Когда нужен вызов функции до её объявления — поднятие (hoisting) есть только у function declaration, а у const/let со стрелочной функцией его нет
  • Когда нужен собственный this (обсудим в Intermediate)
  • Для объектных методов (обсудим в Intermediate)

Ментальная модель

Стрелочная функция — это «быстрая запись» обычной функции. Как короткая записка вместо длинного письма: то же сообщение, но быстрее писать и читать.


Примеры

**Самый простой:**

javascript
const greet = (name) => 'Привет, ' + name + '!';
console.log(greet('Анна')); // Привет, Анна!

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

**Простой:**

javascript
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

Стрелочные функции идеальны для callback-функций: коротко, читаемо, понятно.

**Реальный пример:**

javascript
const calculate = {
  add: (a, b) => a + b,
  multiply: (a, b) => a * b
};

console.log(calculate.add(2, 3));      // 5
console.log(calculate.multiply(2, 3)); // 6

Стрелочные функции удобны для методов объекта (но помните про this — обсудим в Intermediate).


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

**Неправильно:** Забывать return в однострочной форме

**Почему:** const add = (a, b) => a + b; — OK const add = (a, b) => { a + b; }; — undefined!

**Правильно:** В однострочной форме return неявный. В блочной {} — явный.

**Неправильно:** Использовать стрелочные функции везде

**Почему:** Стрелочные функции не имеют своего this. А стрелочная функция, сохранённая в const/let, недоступна до строки объявления: поднятия (hoisting), как у function declaration, здесь нет. Это может сломать код.

**Правильно:** Используйте стрелочные для callback-функций. Обычные (function declaration) — для методов и когда нужен вызов функции до её объявления (hoisting).

**Неправильно:** Путать () => {} с объектом {}

**Почему:** const fn = () => ({ key: 'value' }); — нужна обёртка () для объекта

**Правильно:** Для возврата объекта: () => ({ key: 'value' })


Важно запомнить

  • const fn = (params) => expression — короткая форма
  • const fn = (params) => { ... } — блочная форма с явным return
  • Один параметр — скобки необязательны
  • Нет параметров — нужны пустые скобки ()
  • Идеальны для callback-функций

Связь

Назад: Вы знаете обычные функции (J9) — теперь вы знаете более короткий синтаксис стрелок.

Вперёд: Следующий урок (J11) — объекты: как хранить структурированные данные со свойствами.

Материалы курса JS Core — PROlab Academy.