What are call, apply and bind methods in JavaScript?

Mani Kumar Srivastava

Published in

Geek Culture

2 min readDec 4, 2021

Objective

To understand the usage of call(), apply() and bind() methods of Function.prototype in JavaScript.

Prerequisites

Basics of JavaScript language

Let’s Start…

call(), apply() and bind() methods are the methods available on Function.prototype. What this means is that whenever you create a function, these methods are available by default as the functions properties.

But what is the need of these methods? What purpose do they solve?

Lets take an example. Look at the following code.

let addressObj = {
  state: 'Haryana',
  country: 'India',
  pincode: '123456',  getAddress: function() {
    console.log(`${this.state}\n${this.country}\n${this.pincode}`);
  }
}addressObj.getAddress();

The output for this piece of code is —

Haryana
India
123456

While executing the getAddress() method, we observe that it is tightly coupled with addressObj , which serves as the context for this in the method.

call()

What if we want to get the same output but for some other context?

Then either we would have to make another object with same keys but different values, and the same method implementation, as mentioned below —

let addressObjTwo = {
  state: 'Texas',
  country: 'United Stated of America',
  pincode: '342567',  getAddress: function() {
    console.log(`${this.state}\n${this.country}\n${this.pincode}`);
  }
}

Or..

We can use call() method, in the following way —

let addressObj = {
  state: 'Haryana',
  country: 'India',
  pincode: '123456',
  getAddress: function() {
    console.log(`${this.state}\n${this.country}\n${this.pincode}`);
  }
}let addressObjTwo = {
  state: 'Texas',
  country: 'United Stated of America',
  pincode: '342567'
}// Strange thing that we are using the property of one object
// and using it to output the parameters of other object
addressObj.getAddress.call(addressObjTwo);

The output for this is —

Texas
United Stated of America
342567

Of course, the more elegant way of structuring this code, so that the method is reusable without any coupling to any object, is this.

let addressObj = {
  state: 'Haryana',
  country: 'India',
  pincode: '123456',
}let addressObjTwo = {
  state: 'Texas',
  country: 'United Stated of America',
  pincode: '342567'
}function getAddress() {
  console.log(`${this.state}\n${this.country}\n${this.pincode}`)
}getAddress.call(addressObj);
getAddress.call(addressObjTwo)

The output for this is this —

Haryana
India
123456Texas
United Stated of America
342567

As for the syntax of call() method, it is

Function.prototype.call(thisArg[, arg1, arg2, ...argN])

apply()

Functionality wise, both call() and apply() are same. The only difference lies is in its syntax. call() expects the arguments of the functions in serialised order, but apply() expects those arguments in the array.

Look at the following code —

let country = {
  country: 'India',
}function getAddress(state, pincode) {
  console.log(`${state}\n${this.country}\n${pincode}`)
}getAddress.call(country, "Haryana", "123456");
getAddress.apply(country, ["Gujarat", "332122"])

The syntax of apply() method is this

Function.prototype.apply(thisArg [, argsArray])

bind()

bind() method uses the provided context and arguments, and returns another function to be called at later point of time.

It can be understood from the following example —

let country = {
  country: 'India',
}function getAddress(state, pincode) {
  console.log(`${state}\n${this.country}\n${pincode}`)
}let newFunc = getAddress.bind(country, "Kerala", "478381");newFunc();

The output of this is —

Kerala
India
478381

Conclusion

We saw that call(), apply() and bind() are the methods on Function.prototype and can be used to manipulate the context of function execution.