вступление

Стрелочная функция — это альтернативная форма создания функции в JavaScript. Он был представлен в ES6.

Они идут по имени arrow functionsпотому что они созданы со стрелкой =>.

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

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

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

Давайте посмотрим на простое преобразование обычной функции в стрелочную.

function add(x, y) {
  return x + y;
}

// we assign an anonymous function to a variable
const add = function (x, y) {
  return x + y;
};

// we remove "function" keyword and add an arrow after arguments
const add = (x, y) => {
  return x + y;
};
Войти в полноэкранный режим

Выйти из полноэкранного режима

Функция стрелки позволяет нам использовать еще более короткий синтаксис.

// returns x + y
// the same function in one line
const add = (x, y) => x + y;

// you can skip parentheses when using only one argument
const add1 = (x) => x + 1;
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

Вы можете опустить { } и return ключевое слово и выражение после => будет значением, возвращаемым этой функцией.

При возврате объекта нужно помнить о добавлении ( ).

// this won't work
const createUser = (id, name) => {
    id: id,
    name: name
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Вам нужно добавить круглые скобки, чтобы убедиться, что вы возвращаете объект.

const createUser = (id, name) => ({
  id: id,
  name: name,
});
Войти в полноэкранный режим

Выйти из полноэкранного режима


Использование краткой формы для улучшения читаемости кода

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

function createAddFunction(number) {
  return function (x) {
    return x + number;
  };
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

createAddFunction это функция, которая создает другую функцию. Этот узор называется currying. Вы можете использовать его, например, для создания функции, которая увеличивает число на 1.

const add1 = createAddFunction(1);
add1(5); // 6
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

// Initial version
function createAddFunction(number) {
  return function (x) {
    return x + number;
  };
}

// changing the inner function to arrow function
function createAddFunction(number) {
  return (x) => x + number;
}

// changing the outer function to arrow function
const createAddFunction = (number) => (x) => x + number;

// Arrow function version
const createAddFunction = (number) => (x) => x + number;
Войти в полноэкранный режим

Выйти из полноэкранного режима


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



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

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

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

const logThisOutside = () => {
  console.log(this);
};

function Button() {
  this.name = "My Button";
  function logThis() {
    console.log(this);
  }
  const logThisArrow = () => {
    console.log(this);
  };

  logThis(); // Window
  logThisArrow(); // { name: 'My Button' }
  logThisOutside(); // Window
}

new Button();
Войти в полноэкранный режим

Выйти из полноэкранного режима

Как вы видете logThisArrow а также logThisOutsideиспользовать значение this от места, в котором они были определены. Это происходит потому, что в отличие от обычной функции, стрелочные функции do not create its own thisно используйте значение из outer scope.


С использованием this в стрелочных функциях в вашу пользу

function Button() {
  this.name = "My Button";

  const that = this;
  document.querySelector("button").addEventListener("click", function () {
    console.log("click", this); // Button DOM Element
    console.log("that", that); // { name: 'My Button' }
    this.name = "Button Clicked"; // won't work as expected
    that.name = "Button Clicked"; // name value changed
  });

  document.querySelector("button").addEventListener("click", () => {
    console.log("click arrow", this); // { name: 'My Button' }
    this.name = "Button Clicked"; // name value changed
  });
}

new Button();
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

В случае обычной функции в прослушивателе событий, когда вы нажимаете кнопку, это будет иметь значение элемента DOM, по которому был нажат. Если мы хотим изменить значение this.name мы должны были бы сначала создать переменную const that = this а затем изменить его с помощью that.name="Button Clicked. Это обычный хак, используемый для изменения этого из внешней области.

Как упоминалось ранее, стрелочные функции не создают своего собственного this, поэтому вы можете безопасно изменить значение имени с помощью this.name = Button Clicked.


Доступ к аргументам в стрелочных функциях

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

посмотрим как arguments работать в штатном режиме.

function add() {
  console.log(arguments);
}

add(1, 2, 3); // console: [1, 2, 3]
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

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

const add = (...args) => {
  console.log(args);
};

add(1, 2, 3); // console: [1, 2, 3]
Войти в полноэкранный режим

Выйти из полноэкранного режима