Разница между обычными функциями и стрелочными функциями

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

Обычные функции. Обычные функции в JavaScript определяются с помощью ключевого слова function. Они могут быть определены как объявления функций или функциональные выражения.

Вот пример объявления функции:

function sayHello(name) {
  console.log(`Hello ${name}!`);
}

А вот пример функционального выражения:

const sayHello = function(name) {
  console.log(`Hello ${name}!`);
}

Обычные функции имеют собственную привязку this. Когда вызывается обычная функция, this относится к объекту, вызвавшему функцию. Например:

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

person.sayHello(); // output: "Hello, my name is John"

Стрелочные функции. Стрелочные функции были представлены в ECMAScript 6 как более лаконичный способ определения функций. Они используют синтаксис => и не имеют собственной привязки this. Вместо этого они используют значение this окружающего лексического контекста.

Вот пример стрелочной функции:

const sayHello = (name) => {
  console.log(`Hello ${name}!`);
}

Если стрелочная функция определена внутри объекта или класса, она унаследует значение this объекта или класса. Например:

const person = {
  name: 'John',
  sayHello: function() {
    const greet = () => {
      console.log(`Hello, my name is ${this.name}`);
    }
    greet();
  }
}

person.sayHello(); // output: "Hello, my name is John"

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

const numbers = [1, 2, 3, 4, 5];

// using a regular function
const doubled = numbers.map(function(num) {
  return num * 2;
});

// using an arrow function
const tripled = numbers.map(num => num * 3);

console.log(doubled); // output: [2, 4, 6, 8, 10]
console.log(tripled); // output: [3, 6, 9, 12, 15]

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

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