Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Arrow operator in ES6 of JavaScript

  • Difficulty Level : Hard
  • Last Updated : 30 Oct, 2018

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.
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 arrow operator and whose syntax is like this:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:




<script>
  
   //ES5 VERSION
   var setSize = (sz)=>
   size=sz;
     
   //sets size value to the passed value
   setSize(10);
   document.write(size);
                      
</script>

Output:



10

This can also be written as:
Code #2:




<script>
  
    //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);
    document.write(size);    
      
</script>

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




<script>
  
    //ES5 VERSION
    function leftShiftES5(value){
    return value/2;
    }
      
    //ES6 VERSION
    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 
    a=leftShiftES5(a);
    b=leftShiftES6(b);
    document.write('values after left shift' +"<br>");
    document.write('a : '+a+' b : '+b + "<br>");
      
</script>

Output:

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)
        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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!