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

Что означает синтаксис => в JavaScript?
Пример с JSR (JavaScript.Ru):
let promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('result'); }, 1000); });

Ответ

Это новый синтаксис функций. Кроме того как он выглядит имеет так же несколько особенностей.
Самое главное отличие, что он автоматически использует 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), то никаких преград нет, кроме возможной потери производительности (нужно мерить).
Для себя я решил, что использую их везде, кроме определения функций в модуле.