8

Что означает синтаксис => в JavaScript?

Пример с JSR (JavaScript.Ru):

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('result');
  }, 1000);
});
7

1 ответ 1

7

Это новый синтаксис функций. Кроме того как он выглядит имеет так же несколько особенностей.

Самое главное отличие, что он автоматически использует this из замыкания, где метод определен. Например:

var obj = {
  foo: function() {
    return this;
  },
  arr: () => {
    return this;
  }
};


obj.foo(); // obj
obj.arr(); // window

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

var а = () => 1 // функция, всегда возвращающая единицу
// Эквивалентно (кроме this контекста)
var a = function() { return 1; }
var b = x => x + 1
// Эквивалентно
var b = function(x) { return x + 1; }

В случае нуля или нескольких параметров нужны скобки вокруг аргументов

 var c = (x,y,x) => x * y * x

Стоит выделить возврат объекта

var foo = (x) => ({ field: x })

Обратите внимание на круглые скобки вокруг тела функции, это одна из проблем нового синтаксиса, потому как почти такой же код:

var foo = (x) => { field: x }

является валидным, но делает совсем не то, что вы хотите.

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

var foo = (a, b) => {
  if (a > b) return 1;
  else return 42;
};

Когда применять такие функции? Главных применения два. Первый – сокращенный синтаксис в обратных вызовах. Согласитесь, такое

myStringsArray
  .map(a => parseFloat(a))
  .reduce((b, c) => b + c, 0);

намного луче читается, чем

myStringsArray
  .map(function (a) { return parseFloat(a)})
  .reduce(function(b, c) { return b + c; }, 0);

Второе применение связанно с контекстом, классами и обратными вызовами.

var obj = {
  data: 1,
  sendToServer: function() {
    ajax(this.data, function(newData) {
      this.data = newData; // this !== obj
    });
  },
  sendToServerArrow: function() {
    ajax(this.data, (newData) => {
      this.data = newData; // this === obj
    });
  }
}

obj.sendToServer() // установит значение в window.data
obj.sendToServerArrow() // установит значение в obj.data

Стоит ли использовать такие функции? Нужно помнить, что их поддержка далеко не во всех браузерах. Если вы используете трансплитеры, такие как babel, или пишете под nodejs (>4), то никаких преград нет, кроме возможной потери производительности (нужно мерить).

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.