Чем отличаются стрелочные функции от обычных функций в JavaScript?
Функции
Стрелочные функции отличаются от обычных прежде всего работой с `this`, а также отсутствием arguments, невозможностью быть конструктором и более коротким синтаксисом.
Отличия
- this — стрелка не имеет своего
this, берёт из внешнего лексического окружения; обычная функция получаетthisв момент вызова. - arguments — у стрелки нет объекта
arguments; вместо него используют rest-параметр...args. - new — стрелку нельзя вызвать с
new, у неё нетprototype. - hoisting — стрелка обычно присваивается переменной (
const fn = ...), поэтому не всплывает как Function Declaration.
const obj = {
items: [1, 2, 3],
double() {
return this.items.map((x) => x * this.items.length);
// стрелка внутри map сохраняет this метода
},
};Когда что использовать
- Стрелки — колбэки,
map/filter/reduce, обработчики внутри методов/классов, где нужно сохранить внешнийthis. - Обычные функции — методы объектов, конструкторы, места, где нужен динамический
thisилиarguments.
Подводный камень
Не делайте метод объекта стрелкой, если внутри нужен this самого объекта:
const user = {
name: 'Ann',
greet: () => `Привет, ${this.name}`, // this НЕ user
};Коротко для собеседования
Стрелка не имеет своего this, arguments, prototype и не работает с new — она берёт this из окружения. Удобна для колбэков; для методов и конструкторов нужны обычные функции.