JavaScript: синтаксис «знак равно + знак больше» (=>) [дубликат]

#javascript

        
             
                
                    
                        
                            This question already has answers here:
                            
                        
                    
                
                        
                            Оператор => в JavaScript
                                
                                    (4 ответа)
                                
                        
                                Closed 4 месяца назад.
            
                    
Что означает синтаксис => в JavaScript?

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

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

    

Ответы

Ответ 1

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

Самое главное отличие, что он автоматически использует 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), то никаких преград нет,
кроме возможной потери производительности (нужно мерить).

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