We will learn about the call, apply and bind method in JavaScript in this blog. These three method are very important for understanding JavaScript as well as interview point of view.

Call Function:

If we have a code as shown below:

var car1 = {
  name:"Roadster",
  topSpeed: "400km/hr",
    run : function (color) {
    console.log(`The ${color} ${this.name} is running at ${this.topSpeed} `)
  }
}

var car2 = {
  name:"Camaro",
  topSpeed: "350km/hr",
    run: function(color) {
    console.log(`The ${color} ${this.name} is running at ${this.topSpeed} `)
  }
}

// Calling run() method
car1.run("Red")
car2.run("Blue")

// Output
The Red Roadster is running at 400km/hr 
The Blue Camaro is running at 350km/hr

In the above code there are two objects having properties : name, topSpeed, and method run. When we call run method we get the expected output. The problem here is that we are repeating the same function for two object. Considering the best practice of DRY(Don't Repeat Yourself). There should be a way to single call run function on both object.

Here, call method comes in a picture. We can use call method as shown below:

var car1 = {
  name:"Roadster",
  topSpeed: "400km/hr",
}

var car2 = {
  name:"Camaro",
  topSpeed: "350km/hr",
}

function run(color) {
    console.log(`The ${color} ${this.name} is running at ${this.topSpeed} `)
  }

run.call(car1, "Red")
run.call(car2, "Blue")

// output
The Red Roadster is running at 400km/hr 
The Blue Camaro is running at 350km/hr

In the above code, we moved the run function out of the object. And we are using call method for calling the run method on desired object. The syntax of call function is : "function.call(object, parameter for of function)".

So, what call method does is, it adds the function in the object and executes it.

Apply Function:

var car1 = {
  name:"Roadster",
  topSpeed: "400km/hr",
}

var car2 = {
  name:"Camaro",
  topSpeed: "350km/hr",
}

function run(color) {
    console.log(`The ${color} ${this.name} is running at ${this.topSpeed} `)
  }

run.apply(car1, ["Red"])
run.apply(car2, ["Blue"])

The Red Roadster is running at 400km/hr 
The Blue Camaro is running at 350km/hr

The Apply function is very similar to call function. The only different is, in Apply function, the parameters for the function which we are executing are passed in the array form. As you can see in the above example, the first argument, i.e., of apply is the object which we to apply the function and second argument is the parameters for the function we are executing.

Bind:

var car1 = {
  name:"Roadster",
  topSpeed: "400km/hr",
}

var car2 = {
  name:"Camaro",
  topSpeed: "350km/hr",
}

function run(color) {
    console.log(`The ${color} ${this.name} is running at ${this.topSpeed} `)
  }

let mycar1 = run.bind(car1, ["Red"])
run.apply(car2, ["Blue"])

mycar1()

The Blue Camaro is running at 350km/hr 
The Red Roadster is running at 400km/hr

The bind function is also similar to call and apply functions. The first argument is the object we are binding the function with and the rest argument can be a parameters for the function we are binding the object. Here the second argument can also be an array of parameters as we do in Apply function.

The difference in bind function is that, when we bind a function to an object it does not executes it immediately , rather it returns a function, which we call any time we want. In the Call and Apply, the execution is immediately.

Call, apply and bind in JS

Call Function:

Apply Function:

Bind: