Стрелочная функция vs. обычная функция в JavaScript

Различия в синтаксисе

Стрелочные функции короче и используют символ =>. Вот как они выглядят по сравнению с обычными функциями:

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

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

В стрелочной функции можно пропустить ключевое слово return, если возвращается одно выражение. Это делает стрелочные функции популярными для более коротких и простых функций.

Привязка this

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

Рассмотрим на примере, как эта разница влияет на поведение:

const object = {
  name: 'JavaScript',
  regularFunction: function() {
    console.log(this.name); // 'JavaScript'
  },
  arrowFunction: () => {
    console.log(this.name); // undefined
  }
};

obj.regularFunction(); // 'JavaScript'
obj.arrowFunction();   // undefined

Это может пригодиться, когда вы передаёте функцию слушателям событий, например:

document.querySelector('button').addEventListener('click', function() {
  console.log(this); // ссылается на элемент button!
});

Объект arguments

Обычные функции имеют доступ к объекту arguments, хранящему все переданные функции аргументы. У стрелочных функций этого нет; вместо этого они используют остаточные параметры ...args.

// обычная функция с arguments
function sum() {
  return Array.from(arguments).reduce((a, b) => a + b);
}

// стрелочная функция с остаточными параметрами
const sum = (...args) => args.reduce((a, b) => a + b);

Использование в обратных вызовах

Стрелочные функции могут упростить код, особенно при работе с вещами, требующими вызовов — например, промисами или методами массивов, такими как .map() и .filter().

// использование стрелочной функции в методе массива
const numbers = [1, 2, 3];
const squares = numbers.map(number => number * n); // [1, 4, 9]

Когда использовать стрелочные функции vs обычные функции

В целом, стрелочные функции хорошо подходят для:

• Коротких, лаконичных функций, как в методах массивов или обратных вызовов.
• Ситуаций, в которых необходимо сохранять последовательность, например, в методах классов или замыканиях.

Обычные функции удобны, когда:

• Нужна привязка к this, например, в методах объектов или слушателях событий.
• Необходимо использовать объект arguments без определения остаточных параметров.

Обратите внимание на кое-что интересное. Как видите, различия довольно тонкие. В большинстве случаев не имеет значения, какую из них выбирать, если только в кодовой базе не используются this или arguments (что маловероятно).

Суть в том, что выбирайте то, что предпочитаете, только будьте последовательны во всем проекте.

Вы согласны с таким подходом?

Комментарии