Arrow operator in ES6 of JavaScript

ES6 has come with various advantages and one of them is 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 in the arrow operator functioning.
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 arrow operator and whose syntax is like this:

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

Advantages of Arrow Operator:
1) Reduces Code Size:
As we have replaced the function by corresponding arrow operator so the size of the code is reduced and we have to write less amount of code for same work. That’s why I love the arrow operator method of defining functions.
2) Drop the Function braces for one line Functions:
We can drop the braces of the function in arrow operator declaration for example:
Code #1:

   var setSize = (sz)=>
   //sets size value to the passed value



This can also be written as:
Code #2:

    //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



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 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 following function can be written as follows:

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

Code #3:

    function leftShiftES5(value){
    return value/2;
    var leftShiftES6 = (value)=>value/2;
    var a=10,b=10;
    document.write('values before left shift'+"<br>");
    document.write('a : '+a+' b : '+b + "<br>");
    //Both of the function should give same output 
    document.write('values after left shift' +"<br>");
    document.write('a : '+a+' b : '+b + "<br>");


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

4) Lexically bind the context :
Arrow operator lexically binds the context so this refers to the originating context. It means that it uses this from the arrow functions.L et us consider a class having an array of age and if 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)

In ES6 this can be done as follows :

this.age.forEach((age) => {
    if (age < 18)

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.

This article is attributed to GeeksforGeeks.org

leave a comment



load comments

Subscribe to Our Newsletter