Introduction to the usage of JavaScript arrow functions

In this article we introduce the advantages of the arrow function.

More concise syntax

##Let’s first define the function according to the conventional syntax:

function funcName(params) {
return params + 2;
}
funcName(2);
// 4

This function uses arrow functions and can be done with just one line of code!

var funcName = (params) => params + 2
funcName(2);
// 4

Isn’t it cool! Although it is an extremely concise example, it well illustrates the advantages of arrow functions when writing code. Let’s take a deeper look at the syntax of arrow functions: [code ](parameters) => { statements }[/code]
If there are no parameters, it can be further simplified:

() => { statements }

If there is only one parameter, you can omit the brackets:

parameters => { statements }

If the return value is only one expression (expression), you can also omit the braces:

parameters => expression
 
// 等价于:
function (parameters){
return expression;
}

Now that you have learned the syntax of arrow functions, let’s put it into practice. Open the Chrome browser developer console and enter:

var double = num => num * 2

We bind the variable double to an arrow function, which has a parameter num and returns num * 2. Call this function:

double(2);
// 4
 
double(3);
// 6

No binding of local this
Unlike ordinary functions, arrow functions do not bind this. In other words, the arrow function will not change the original binding of this. We use an example to illustrate:

function Counter() {
this.num = 0;
}
var a = new Counter();

Because the keyword new construct is used, this in the Count() function is bound to a new Object and assigned to a. Printing a.num through console.log will output 0.

console.log(a.num);
// 0

If we want to increase the value of a.num by 1 every second, how to achieve it? You can use the setInterval() function.

function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
this.num++;
console.log(this.num);
}, 1000);
}

Let’s take a look at the output:

var b = new Counter();
// NaN
// NaN
// NaN
// ..

You will find that a NaN is printed every second instead of the accumulated number . What went wrong? First use the following statement to stop the continuous execution of the setInterval function:

clearInterval(b.timer);

Let’s try to understand why the error occurred: According to the rules explained in the previous blog, first of all, the function setInterval is not used by a declared object When calling, the new keyword is not used, and bind, call and apply are not used. setInterval is just a normal function. In fact, this in setInterval is bound to the global object. We can verify this by printing this:

function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
console.log(this);
}, 1000);
}
var b = new Counter();

You will find that the entire window object is printed. Use the following command to stop printing:

clearInterval(b.timer);

Back to the previous function, the reason why NaN is printed is because this.num is bound to the num of the window object, and window.num Not defined.

So, how do we solve this problem? Use arrow functions! Using arrow functions will not cause this to be bound to the global object.

function Counter() {
this.num = 0;
this.timer = setInterval(() => {
this.num++;
console.log(this.num);
}, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

This bound through the Counter constructor will be retained. In the setInterval function, this still points to our newly created b object.
In order to verify what we just said, we can bind this in the Counter function to that, and then determine whether this and that are the same in setInterval.

function Counter() {
var that = this;
this.timer = setInterval(() => {
console.log(this === that);
}, 1000);
}
var b = new Counter();
// true
// true
// ...

As we expected, the printed value is true every time. Finally, end the printing of the screen:

clearInterval(b.timer);

Summary

##Arrow function writing code has a more concise syntax;
This will not be bound.