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

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

Стрелочные функции были представлены в ECMAScript 6 (ES6) как новый способ определения функций в JavaScript. Их часто называют функциями «толстой стрелки» из-за синтаксиса, используемого для их определения. Вот пример стрелочной функции:

const sum = (a, b) => a + b;

Стрелочные функции имеют ряд особенностей, отличающих их от традиционных функций:

  1. Более короткий синтаксис: стрелочные функции имеют гораздо более короткий синтаксис, чем традиционные функции. В приведенном выше примере стрелочная функция состоит всего из одной строки кода, тогда как традиционная функция требует нескольких строк для выполнения одной и той же задачи.
  2. Без ключевого слова function: функции со стрелками не используют ключевое слово function для определения функции. Вместо этого они используют синтаксис =>.
  3. Неявный return: если стрелочная функция состоит из одного оператора, значение этого оператора возвращается автоматически. В приведенном выше примере функция sum возвращает результат a + b.
  4. Нет привязки this: стрелочные функции не имеют собственной привязки this. Вместо этого они используют привязку this окружающего контекста. Это может быть полезно в тех случаях, когда вы хотите получить доступ к значению this объекта из функции обратного вызова.

Объявления функций

Традиционные функции, также известные как «объявления функций» или «инструкции функций», — это оригинальный способ определения функций в JavaScript. Они определяются с помощью ключевого слова function, за которым следует имя функции и набор круглых скобок, содержащих параметры функции. Вот пример традиционной функции:

function sum(a, b) {
  return a + b;
}

Традиционные функции имеют ряд особенностей, отличающих их от стрелочных функций:

  1. Более подробный синтаксис: традиционные функции имеют более подробный синтаксис, чем стрелочные функции. В приведенном выше примере традиционная функция состоит из нескольких строк кода, тогда как стрелочная функция может выполнить ту же задачу всего одной строкой.
  2. Ключевое слово function: традиционные функции используют ключевое слово function для определения функции, тогда как стрелочные функции этого не делают.
  3. Явный return: традиционные функции требуют ключевого слова return для указания значения, которое должно быть возвращено функцией. В приведенном выше примере функция sum возвращает результат a + b с использованием ключевого слова return.
  4. Собственная привязка this: традиционные функции имеют собственную привязку this, которая может быть полезна в тех случаях, когда вы хотите создать для функции новое значение this.

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

Стрелочные функции лучше всего подходят для случаев, когда вам нужна краткая однострочная функция. Они особенно полезны для определения функций обратного вызова, таких как те, которые используются с методами массива, такими как map и filter.

Например, рассмотрим следующий код, который использует традиционную функцию для удвоения значений в массиве:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {
  return number * 2;
});

Используя стрелочную функцию, мы можем переписать обратный вызов следующим образом: Скопировать код

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

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

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

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