Arrow operator in ES6 of JavaScript

ES6 has come with various advantages and one of them is the arrow operator. It has reduced the function defining code size so it is one of the trending questions asked in the interview. Let us have a deeper dive into the arrow operator's functioning. 

Syntax: In ES5 a function is defined by the following syntax:

function functionName(arg1, arg2….) {
    // body of function
}

But in ES6 a function is defined using an arrow operator and whose syntax is like this:

let functionName = (arg1, arg2 ….) => {
    // body of function
}

Advantages of Arrow Operator: 

1) Reduces Code Size: As we have replaced the traditional function syntax with the corresponding arrow operator syntax so the size of the code is reduced and we have to write less amount of code for the same work. 

2) Drop the Function braces for one line Functions: We can drop the braces of the function in the arrow operator declaration for example: 

Example 1: This example shows the basic use of the arrow functions in Javascript.

//ES5 VERSION
let setSize = (sz) =>
    size = sz;

//sets size value to the passed value
setSize(10);
console.log(size);

Output:

10

This can also be written as: 

Example 2: This example shows the basic use of the arrow functions in Javascript.

//ES6 Version
//Do not need to put curly braces for one line functions
setDoubleSize = (sz) => size = 2 * sz;

//Sets value of size equivalent to double of
//passed argument in setDoubleSize function
setDoubleSize(35);
console.log(size);

Output:

70

3) No need to define return statement in one line Functions: In ES5 you have to define the return statement in the functions and if in ES6 we do not define the return statement then ES6 automatically returns the value whenever a given function is called. This will be clear by the following example: ES5 version of one bit left shifting function is as follows : 

function leftShift(value) {
    return value / 2;
}

While in ES6 the following function can be written as follows: 

// Always try to use let keyword for the declaration
// of any variable instead of using var keyword
// in order to avoid unnecessary hoisting and closures
// as well as mismatching values of variables...

let leftShift = (value) => value / 2;

Example 3: In this example, we will return a value in arrow functions without using the return statement.

//ES5 VERSION
function leftShiftES5(value) {
    return value / 2;
}

//ES6 VERSION
let leftShiftES6 = (value) => value / 2;
let a = 10, b = 10;
console.log('values before left shift');
console.log('a : ' + a + ' b : ' + b);

//Both of the function should give same output
a = leftShiftES5(a);
b = leftShiftES6(b);
console.log('values after left shift');
console.log('a : ' + a + ' b : ' + b);

Output:

values before left shift
a : 10 b : 10
values after left shift
a : 5 b : 5

4) Lexically bind the context: Arrow operator syntax lexically binds the context so this refers to the originating context. It means that it uses this from the arrow functions. 

Example: Let us consider a class having an array of ages and if the age<18 we will push them into the child queue. In ES5 you have to do this as follows : 

this.age.forEach(function (age) {
    if (age < 18)
        this.child.push(age);
}.bind(this));

In ES6 this can be done as follows : 

this.age.forEach((age) => {
    if (age < 18)
        this.child.push(age);
});

So we do not have to bind it implicitly and this is done automatically by arrow functions. So we have seen arrow function makes the function writing less complex and reduces the number of lines so it is being used by questions the developer and also it is one of the most trending questions asked during interviews.