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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

10

This can also be written as:
Code #2:



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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 :

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


While in ES6 following function can be written as follows:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Code #3:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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 :

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


In ES6 this can be done as follows :

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Aaditya Kulkarni