Arrow operator in ES6 of JavaScript - GeeksforGeeks

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:
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.
Aaditya Kulkarni
javascript-operators
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?
Set the value of an input field in JavaScript
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?