call() vs apply() vs bind() in JavaScript

Introduction

In this tutorial, you will learn the concept of call() vs apply() vs bind() in JavaScript. 

These methods are used to control the value of the this keyword when calling a function. 

1. JavaScript call() Method

JavaScript call() method invokes a function immediately with a specified this value.

call() method arguments passed individually.

Syntax:

functionName.call(thisArg, arg1, arg2, arg3);

Example:

function greet(city) {
  console.log(this.name + " from " + city);
}
const person = {
  name: "John"
};
greet.call(person, "Delhi");

Output:

Note: In the above example, call() sets this to the person object.

2. JavaScript apply() Method

JavaScript apply() method works almost the same as the call() method.

Note: The apply() method accepts arguments as an array.

Syntax:

functionName.apply(thisArg, [argsArray]);

Example:

function greet(city, country) {
  console.log(this.name + " from " + city + ", " + country);
}
const person = {
  name: "Tom"
};
greet.apply(person, ["Delhi", "India"]);

Output:

3. JavaScript bind() Method

JavaScript bind() method does not call the function immediately.

Instead, it returns a new function with this permanently bound.

Syntax:

const newFunction = functionName.bind(thisArg);

Example:

function greet() {
  console.log("Hello " + this.name);
}
const user = {
  name: "John"
};
const newGreet = greet.bind(user);
newGreet();

Output:

call() vs apply() vs bind() Comparison

Feature	call()	apply()	bind()
Execution	Executes immediately	Executes immediately	Returns new function
Arguments	Passed individually	Passed as array	Passed individually later
Returns value	Function result	Function result	New bound function
Main use	Call function with custom this	Call function with array arguments	Create reusable function

When Should You Use call(), apply(), and bind()?

Use call()

1. When arguments are known.

2. When calling a function immediately.

Use apply()

When arguments are stored in an array.

Use bind()

1. When passing functions as callbacks

2. When you need a permanently bound function

Real Life Example of call(), apply(), and bind()

Example: Borrowing a Method from Another Object

Suppose, a website has multiple users, and you want one object to use a method from another object.

const person1 = {
  name: "John"
};

const person2 = {
  name: "Tom"
};

function greet(city, country) {
  console.log("Hello " + this.name + " from " + city + ", " + country);
}

1. Using call()

call() executes the function immediately and passes arguments one by one.

greet.call(person1, "Delhi", "India");

Output:

2. Using apply()

apply() also executes the function immediately, but arguments are passed as an array.

greet.apply(person2, ["New York", "USA"]);

Output:

3. Using bind()

bind() does not execute immediately. It returns a new function with a bound to this value.

const greetUser = greet.bind(person1, "Noida", "India");
greetUser();

Output:

Interview Questions

Conclusion

The main difference between them is how they handle function execution and arguments. Both call() and apply() invoke the function immediately, while bind() returns a new function that can be executed later. call() accepts arguments individually, whereas apply() takes them as an array.

If you have a good knowledge of call(), apply(), and bind(), then you can write more flexible, reusable, and maintainable JavaScript code.

Control Function Context in JavaScript