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

Что такое стрелочные функции

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

Традиционное функциональное выражение:

let multiply = function(x, y) {
  return x * y;
}

Та же функция, но стрелочная:

let multiply = (x, y) => x * y;

Как видите, стрелочное выражение короче и лаконичнее, чем традиционное функциональное выражение.

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

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

Выражения функций:

let square = (x) => x * x;

Функции обратного вызова (Callback):

numbers.forEach((number) => {
  console.log(number);
});

Преимущества стрелочных функций

• Краткий синтаксис. Как упоминалось ранее, стрелочные функции имеют более краткий синтаксис, чем традиционные функциональные выражения, что упрощает чтение и запись кода.
• Неявный возврат: стрелочные функции имеют неявный оператор возврата. Если тело функции представляет собой одно выражение, то это выражение будет возвращено автоматически. Это означает, что нет необходимости использовать ключевое слово return.
• Лексический this: стрелочные функции не имеют собственного значения this. Вместо этого они используют значение this окружающего лексического контекста. Это упрощает использование this в методах объектов и вложенных функциях.

This в стрелочных функциях

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

Вот простой пример, иллюстрирующий поведение этого в функциях со стрелками:

const person = {
  name: 'Alice',
  age: 30,
  sayHi: function() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  },
  sayHiArrow: () => {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old.`);
  }
};

person.sayHi(); // logs: Hi, my name is Alice and I'm 30 years old.

person.sayHiArrow(); // logs: Hi, my name is undefined and I'm undefined years old.

В приведенном выше примере мы определяем объект person с помощью двух методов: SayHi и sayHiArrow. Метод SayHi использует традиционное функциональное выражение и регистрирует сообщение, содержащее имя и возраст пользователя. Метод sayHiArrow, с другой стороны, использует стрелочную функцию для регистрации того же сообщения.

Когда мы обращаемся к объекту person через метод sayHi(), ключевое слово this внутри метода SayHi ссылается на объект person, поэтому метод регистрирует ожидаемое сообщение с правильными значениями.

Однако, когда мы вызываем методом sayHiArrow() у того же объекта, this ссылается на глобальное значение this, которое в данном случае не определено.