JavaScript ES6 Arrow Functions

An arrow function expression has a shorter syntax compared to function expressions and lexical binds the this value. Arrow functions are always anonymous.

Arrow functions serve two main purposes:

1. More concise syntax or shorter syntax and
2. Sharing lexical this with the parent scope.

When C# developers see the => (arrow) that it start thinking about the lambda function and in many programming languages => (arrow) is used for the lambda expression.

Notes:

1. Now we don’t need to write the function keyword to create a function or neither need to use the {} braces to create the function because now all of callback function is one liners.
2. Now no need to use the () braces for single arguments.
3. Now no need to use the return keyword, by omitting {}, single line arrow function automatically implement the return.
   If we define the function using the arrow function and {} than you have to use the return statement to return the value from the function, even there is only one statement in the function.

What problems is solved by the arrow function:

1. Lexical this

In JavaScript many of us is stuck with “this” keyword while creating function and using the “this” into the function. Because when we create the function in JavaScript, every time JavaScript create function creates it’s own “this” context, so outside of the scope can not accessible with the “this” keyword. So at that time to solve this function many us used the one of the following solution:

1. var there = this; or var that = this; to access the “this” context of the outside function.
2. Or we can also use the bind() function.

But now no more need to use above solution to use the outside “this” context.

Because the => (arrow) function allow you to solve this problems because they don’t creates it’s own “this” context.

Example (ES5):

var hits = 0;
function Counter() {
    this.hits = 1;

    var that = this; // we have to use this soluation for ES5

    setInterval(function () {
        that.hits++;
    });
}
Counter();

Example (ES6):

var hits = 0;
function Counter() {
    this.hits = 1;

    setInterval(() => {
        this.hits++;
    }, 1000);
}
Counter();

If you notice the difference between ES5 and ES6 example, We have to create the one extra variable called “that” to access the outside context of “this” to inside the newly created function in ES5.

2. Shorter functions

var numbers = ["AB", "CD", "EFG", "HIJK", "LMNOPQRSTUVWXYZ"];
var a2 = numbers.map( S => S.length ); 
alert(a2);

now => functions look likes smaller functions than older functions style.

New Operator:

Arrow => function can not be used as constructors, If we gonna try and create the object with new keyword in arrow => function than it will throw the error.

Arrow => function body:

Arrow function body can have the “block body” ({}) or directly have the one line code.

There is only one difference, if we use the block body than we have to use the return keyword to return the value from the function.

x => { return x * x }  // block body
x => x * x  // single line expression body, no need {}

Example:

Find maximum value from tow numbers:

var max = ( a, b ) => a > b ? a : b;
alert(max(10, 11));
alert(max(25, 20));

Find minimum value from tow numbers:

var min = ( a, b ) => a < b ? a : b;
alert(min(11, 10));
alert(min(15, 20));

Find evens and odds number from the array:

var array = [5, 10, 50, 60, 1, 2, 3, 5, 6];
var evens = array.filter( W => W % 2 == 0 );
var odds = array.filter( W => W % 2 != 0);

Html button onclick using the arrow function:

var button = document.getElementById("btnClick");
button.onclick = () => alert("Hello World!!");

Please comments down below your reviews about this or questions related to arrow => function…

Happy Coding

🙂