image credit: https://unsplash.com/photos/aTt_rNa3gmM?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink

call, apply and bind in JavaScript

This article explains when and why we should use call, apply and bind methods in Javascript.

Javascript provides wide variety of inbuilt methods to help in achieving reusable code, yet we tend to ignore them for our convenience. call, apply and bind methods are few of such methods we remember only conceptual wise.

This article helps in understanding the practical usage of call, apply and bind methods.

Before diving into these methods, let’s understand the use-case where it will come to our rescue.

Say we have two objects with few properties including a method:

let game1 = {
     name: "Football",
     type: "outdoor",
     getGameType: function() {
        console.log(`${this.name} is ${this.type} game`);
      }
  };
let game2 = {
     name: "Badminton",
     type: "indoor",
     getGameType: function() {
        console.log(`${this.name} is ${this.type} game`);
     }
  }

Both game1 and game2 objects have common properties with different values. getGameType property prints the name and type of the game in both the objects when we invoke them like below:

Now instead of adding getGameType property in both game1 and game2, we can just add it in game1 and borrow it for game2. How we can do that? Here comes call and apply methods for our rescue.

Let’s remove getGameType from game2 object. Now game2 object looks like below:

let game2 = {
     name: "Badminton",
     type: "indoor"
  }

Now let’s borrow getGameType property from game1 to print the values of game2 object:

This concept is also known as function borrowing.

We are invoking getGameType method for game2 by borrowing that method from game1 by using call keyword.

Here this keyword inside getGameType method refers to the current object from which it gets invoked. That’s why when we pass game2 object as first argument in call method, this.name and this.type refers to name and type properties of game2 object.

We understood how we can borrow a method from one object and invoke it using other object’s data. Now let’s refactor the game1 object and separate getGameType method as independent function.

let getGameType = function() {
        console.log(`${this.name} is ${this.type} game`);
   };

  
  let game1 = {
     name: "Football",
     type: "outdoor",
   };

   let game2 = {
     name: "Badminton",
     type: "indoor"
  };

Now we can print game and types of game1 and game2 object as below:

Simple isn’t it. Now as we have an independent function getGameType, we can use it for wide range of use-cases by passing arguments. Let’s see how we can do that.

let getGameType = function(famousPlayer, country) {
      console.log(`${this.name} is ${this.type} game and ${famousPlayer}
       is the famous player in ${country}`);
};

We have added two new arguments to the getGameType function, so that it prints more valuable information. Now let’s see how we can pass these arguments to getGameType function when invoking via call method:

Pretty simple isn’t it. We can pass further comma separated arguments to call method which in-turn can be accessible in getGameType function.

Note: 1st argument to call method should always be the object from which are accessing the values. And after that we can pass any number of arguments which gets directly accessible by getGameType function.

We understood how and when we can use call method, now let’s see how we can use apply method.

apply method does the exact same job as call method, the only difference is in the way of using them. In apply method we pass arguments in the form of array. So 1st argument is the context object and 2nd argument will be the array of arguments which getGameType function can directly access.

Now let’s talk about bind method.

bind method looks exactly same as call method, but the only difference is instead of immediately calling the getGameType function bind method binds the getGameType method with object we pass as 1st argument and returns the copy of that method.

As you can see, instead of invoking the method immediately like in call method, we are storing the return method in a variable and we can invoke it later section of our code.

Let’s recall what we understood about call, apply and bind:

1. call method invokes the function with 1st argument as context object and further comma separated arguments which the function can directly consume.
2. apply is exactly same as call method, the only difference is it takes the 2nd argument as array list of the parameters.
3. bind method is similar to the call method but it does not invokes the function, rather gives you the copy of exactly same function, which can be invoked later.

— —

Chidanandan ( call him Chidu if full name is difficult to pronounce ) is a software development engineer at Lowe’s, where he helps in building the technology and solutions that powers Lowe’s and its various businesses.