В чем разница между стрелочной и обычной функцией в JavaScript?

«В чем разница между стрелочной и обычной функцией в JavaScript?» — вопрос из категории JavaScript, который задают на 24% собеседований AQA / Automation. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Основные различия между стрелочными (=>) и обычными (function) функциями в JavaScript:

Аспект Обычная функция (function) Стрелочная функция (=>)
Контекст this Динамический. Определяется в момент вызова (кто вызвал). Лексический. Берется из окружающей области видимости (где объявлена).
Объект arguments Доступен внутри функции. Не определен. Используется rest-оператор (...args).
Использование как конструктор Можно использовать с new. Нельзя, вызовет ошибку (TypeError).
Свойство prototype Присутствует. Отсутствует.
Синтаксис Более многословный. Лаконичный для простых выражений (неявный возврат).

Практические примеры:

  1. Поведение this (критично для обработчиков событий и методов объектов):

    const obj = {
      value: 'test',
      regularFunc: function() { console.log(this.value); }, // 'test'
      arrowFunc: () => { console.log(this.value); }        // undefined (берет this из внешней области)
    };
    obj.regularFunc(); // Контекст - obj
    obj.arrowFunc();   // Контекст - глобальный объект (или модуль)
  2. Отсутствие arguments в стрелочных функциях:

    function regularSum() {
      let sum = 0;
      for (let arg of arguments) { sum += arg; } // arguments работает
      return sum;
    }
    
    const arrowSum = (...args) => { // Используем rest-параметры
      return args.reduce((a, b) => a + b, 0);
    };

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