Как объявить

Есть три формы записи. Все вызываются одинаково, но ведут себя по-разному:

function sum(a, b) { return a + b; } // объявление

const sum2 = function (a, b) { return a + b; };

const sum3 = (a, b) => a + b; // стрелочная

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

Стрелочная запись короче и не создаёт свой this. Поэтому её удобно передавать в колбэки: arr.map(x => x * 2), setTimeout(() => {...}, 500).

Если тело — одно выражение, return и фигурные скобки не нужны. Если нужно вернуть объект, его оборачивают в скобки: () => ({ id: 1 }).

Главное ограничение: стрелочную нельзя использовать как метод объекта, если внутри нужен this этого объекта, и как конструктор с new.

this: коротко и по делу

В обычной функции this зависит от того, как её вызвали. В стрелочной — берётся из внешнего окружения и не меняется. Отсюда типичная ошибка: обработчик события, написанный стрелочной функцией, теряет ссылку на элемент, если контекст не сохранён.

Практическое правило: методы объектов и обработчики, которым нужен контекст, — обычные функции; всё остальное — стрелочные.

Параметры

• По умолчанию — function greet(name = "гость").
• Остаточные — function sum(...nums) собирает аргументы в массив.
• Деструктуризация — function render({ title, body }).

Замыкание

Функция запоминает окружение, в котором создана. Это основа счётчиков и приватных переменных:

function counter() {
  let n = 0;
  return () => ++n;
}
const next = counter();
next(); next(); // 1, 2

Переменная n живёт, пока жива возвращённая функция, и снаружи недоступна.

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

• Забытый return. Функция с фигурными скобками без return возвращает undefined.
• Стрелочная в объекте. { name, hi: () => this.name } не увидит name.
• Вызов до объявления. Работает только для function, но не для const f = ....
• Мутация аргументов. Изменение объекта-параметра меняет его у вызывающего кода.

Нужен сайт, а не статья?

Напишу фронтенд без лишних зависимостей: интерактив, формы, запросы к API. С 2009 года, по договору, с поддержкой после запуска.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: JavaScript с нуля, переменные, про React.