What are Arrow function expressions in JavaScript?

Arrow functions are compact way of creating a function.

Let me explain with an example.

HelloWorld.js

var printArrayElements = function(arr){
  for(var data of arr){
    console.log(data);
  }
}

var primeNumbers = [2, 3, 5, 7, 11];
printArrayElements(primeNumbers);

As you see above snippet, printArrayElements function takes an iterable as an argument and print all the elements of the iterable.

We can rewrite the printArrayElements function using arrow function expression like below.

var printArrayElements = (arr) => {

  for(var data of arr){

    console.log(data);

  }

}

HelloWorld.js

var printArrayElements = (arr) => {
  for(var data of arr){
    console.log(data);
  }
}

var primeNumbers = [2, 3, 5, 7, 11];
printArrayElements(primeNumbers);

Syntax to define arrow functions

(param1, param2, …, paramN) => { statements }

(param1, param2, …, paramN) => expression

(singleParam) => { statements }

singleParam => { statements }

() => { statements }

One advantage of arrow functions is that, these arrow function expressions does not have its own this, arguments, super, or new.target.

Let me explain with an example.

HelloWorld.js

var person = {
  name : "Krishna",
  hobbies : ["Cricket", "Puzzles", "Blogging"],
  
  printHobbies : function(){
    this.hobbies.forEach(function(hobby){
      //this.name is not visible here.
      console.log(this.name + " has hobby " + hobby); 
    });
  }
  
};


person.printHobbies();

Output

 has hobby Cricket

 has hobby Puzzles

 has hobby Blogging

As you see the output, this.name is not printing the name ‘krishna’, it is because, this.name is not visible inside the function defined in forEach.

How to resolve above issue?

a.   By keeping the reference of this (outer object)

b.   By using bind() method.

By keeping the reference of this (outer object)

HelloWorld.js

var person = {
  name : "Krishna",
  hobbies : ["Cricket", "Puzzles", "Blogging"],
  
  printHobbies : function(){
    var _this = this;
    this.hobbies.forEach(function(hobby){
      //this.name is not visible here.
      console.log(_this.name + " has hobby " + hobby); 
    });
  }
  
};

person.printHobbies();

Output

Krishna has hobby Cricket

Krishna has hobby Puzzles

Krishna has hobby Blogging

By using bind() method

‘bind()’ method creates a new function that, when called, has its this keyword set to the provided value

HelloWorld.js

var person = {
  name : "Krishna",
  hobbies : ["Cricket", "Puzzles", "Blogging"],
  
  printHobbies : function(){
    this.hobbies.forEach(function(hobby){
      console.log(this.name + " has hobby " + hobby); 
    }.bind(this));
  }
  
};


person.printHobbies();

Output

Krishna has hobby Cricket

Krishna has hobby Puzzles

Krishna has hobby Blogging

From EcmaScript 6 onwards, we can use arrow functions to solve above kind of problems. Since arrow function expressions does not have its own this, we no need to worry about this problem.

HelloWorld.js

var person = {
  name : "Krishna",
  hobbies : ["Cricket", "Puzzles", "Blogging"],
  
  printHobbies : function(){
    this.hobbies.forEach(hobby => {
      console.log(this.name + " has hobby " + hobby); 
    });
  }
  
};

person.printHobbies();

Output

Krishna has hobby Cricket

Krishna has hobby Puzzles

Krishna has hobby Blogging

Previous                                                 Next                                                 Home