Arrow functions in JavaScript

Arrow functions are newly added type of functions in ES6(ECMAScript 6). They are just a compressed way of writing normal functions.

Arrow functions are also called as ‘Fat Arrow functions’.

function add(x, y) {
  return (x+y);
}

var result = add(6,5); // will output 11

This is the normal JavaScript function. Let’s see how above code is written using arrow functions.

var add = (x, y) => {
    return x+y;
};

var result = add(6,5); // will output 11

Look at the above code “function” keyword is replaced by fat arrow. Here is another shortest form of arrow function if we have one line of code inside function body, we can skip those curly braces and ‘return’ keyword while returning values from the function.

  var add = (x, y) => x+y;

If we have multiple lines inside function body then use of curly brace is mandatory. Let’s try using arrow functions in constructor functions.

function Car() {
    this.name = 'BMW';
    this.speed = 50;

    this.increaseSpeed= function() {
       this.speed+= 10;
    }
}

Now, create an object for the Car function.

var mycar= new Car();

mycar.increaseSpeed(); 
console.log(mycar.speed); // will output 60

But consider a case where we want to increase the car speed after 5 seconds. We will use setTimeout function here.

function Car() {
    this.name = 'BMW';
    this.speed = 50;

    this.increaseSpeed= function() {
      setTimeout(function() {
         this.speed+= 10;
      }, 3000);  
    }
}

var mycar= new Car();
mycar.increaseSpeed(); 
console.log(mycar.speed); // will output 50

In this case, after calling increaseSpeed function will not increase the car speed because we are calling a member variable ‘speed’ inside setTimeout function and this setTimeout function has it’s own scope. So the constructor function car’s scope is lost and ‘this’ variable inside setTimeout function has no longer access to the car constructor.

In order to access member variables using ‘this’ keyword inside setTimeout scope use fat arrow functions.


Look at the Car constructor function using arrow function.

function Car() {
    this.name = 'BMW';
    this.speed = 50;

    this.increaseSpeed= function() {
      setTimeout(() => {
         this.speed+= 10;
      }, 3000);
    }
}

var mycar= new Car();
mycar.increaseSpeed(); 
console.log(mycar.speed); // will output 60

We have replaced the setTimeout function syntax to fat arrow function. Fat arrow syntax preserve ‘this’ context. So no need to save the context in any temporary variable like that or self and use that temporary variable inside setTimeout function.

To summarize shorter syntax and flexibility of this keyword context these are the main advantage of using arrow functions

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>