JavaScript: syntax "sign equals + sign more" (=>)

This is a new syntax of functions. In addition, it looks like it also has several features.

The most important difference is that it automatically uses this from the closure, where the method is defined. For example:

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

The second feature that the method has a short lambda form, when the expression after the arrow is the return value.

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

In the case of zero or more parameters, brackets are needed around the arguments.

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

It is worth highlighting the return of the object

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

Pay attention to the parentheses around the function body, this is one of the problems of the new syntax, because the code is almost the same:

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

is valid, but does not do what you want.

In the case when there are more than one expressions, then the necessary braces around the function body. In this case, the value must be returned explicitly using return.

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

When to use these features? There are two main applications. The first is shorthand syntax in callbacks. Agree, this

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

much ray is read than

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

The second application is related to the context, classes and callbacks.

 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 

Should I use such functions? It must be remembered that their support is not in all browsers. If you use transpliters, such as babel, or write under nodejs (> 4), then there are no obstacles, except for possible loss of performance (you need to measure).

For myself, I decided that I use them everywhere, except for the definition of functions in the module.