JavaScript : Arrow Functions

Functions are sets of statements that perform a specific task bundle together under a name. Functions are one of the fundamental building block of JavaScript. A function definition consists of function keyword followed by function name, list of parameters enclosed in parenthesis and function statements enclosed in curly brackets.

// Example of a function declaration
function displayName(fname, lname) {
    console.log(`${fname} - ${lname}`)
}

Functions can also be created using function expression.

//Example of function expression
let displayName = function(fname, lname){
    console.log(`${fname} - ${lname}`)
};

In ES6 another method was introduced to create function, called arrow function.

Arrow function syntax

1. parameter => expression
2. (parameter1, parameter2..) => expression
3. parameter1 => { // statement1 // statement2 // .... }
4. (parameter1, parameter2..) => { // statement1 // statement2 // .... }

let arrFun = (argA, argB...) => expression; 

The equivalent of the above arrow function is

let arrFun = function(argA, argB...) {
  return expression;
};

How a function can be made into an arrow function?

We will explain it with an example, first we declare a normal function to compare with the arrow function. The function take two arguments, multiply the arguments are return the result. The code is given below.

// Normal function
function doSomething(varA, varB){
    let result = varA * varB;
    console.log(`${result}`);
    return result/2
}

Now let's create a arrow function which is equivalent to the above function. We will do it by editing the above code such a way that we get a arrow equivalent. We first remove the function keyword, then the arguments are enclosed in parenthesis. If there are no arguments then an empty parenthesis is used, if only one argument is passed we can omit the parenthesis. After that we use T_DOUBLE_ARROW (=>), then the function code is enclosed in curly bracket. If there is only one statement we can omit the curly brackets also. return keyword can be omitted inside the arrow function as the arrow function has an implicit return, if function statements are not enclosed in curly brackets. The equivalent arrow function code is given below.

// Arrow function
let doSomething = (varA, varB) => {
    let result = varA * varB;
    console.log(`${result}`);
    return result/2

Some more arrow function examples are provided below.

// Normal Function
function square(x) {
    return x * x;
}
//Arrow function
let square x => x*x;

// Normal Function
function add(x,y){
    return x + y;
}
//Arrow function
let add = (x,y) => x+y

//Normal function
function() {
    return a *10;
}
//Arrow function
() => a * 10

Let's look at another example.

let object1 = {
    fname : "kiran",
    lname : "raj",
    greet : function(){
        console.log(`${this.fname} ${this.lname}`)
    },
    arrow_greet : () => console.log(`${this.fname} ${this.lname}`, this)
}

object1.greet();       //kiran raj
object1.arrow_greet(); //undefined undefined window

In the above example concentrate on the greet and arrow_greet methods. greet is a normal method where as arrow_greet is arrow equivalent of greet function(just added an extra this to the console.log statement to see where this points at), greet methods works fine but in arrow_greet the output is printed as undefined undefined. this points to the window global object. This example clearly shows that the arrow function does not have a own binding to this. Due to this it is better to avoid using arrow functions as methods.

Summary

1. Arrow function does not have a own binding to this.
2. Arrow functions should not be used as methods.
3. Arrow function does not have a own binding to super.
4. Arrow functions cannot be used as a constructor.