What is the difference between call, apply, and bind methods in JavaScript?

Question

Ashutosh Patel · Answer

JavaScript call, apply, and bind Methods

In JavaScript, calls, implementations, and bindings are methods for modifying the context (this keyword) in which the operation is performed.

Each has specific usage and grammatical differences.

call() Method

The call method invokes the function given this values and one by one with the given arguments.

Syntax-

func.call(thisArg, arg1, arg2, ...)

Example-

function greet(greeting, punctuation) {
 console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'Alice' };
greet.call(person, 'Hello', '!'); // Output: "Hello, Alice!"

apply() Method

The apply() method calls a function that is given this value, but the argument is given as an array (or array-like object).

Syntax-

func.apply(thisArg, [argsArray])

Example-

function greet(greeting, punctuation) {
 console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'Alice' };
greet.apply(person, ['Hello', '!']); // Output: "Hello, Alice!"

bind() Method

The Bind method creates a new function that, when called, has this value set to the provided value, with a given sequence of arguments preceding any provided when the new function is called. Unlike call and apply, bind does not invoke the function immediately; it returns a new function.

Syntax-

const boundFunction = func.bind(thisArg, arg1, arg2, ...)

Example-

function greet(greeting, punctuation) {
 console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'Alice' };
const boundGreet = greet.bind(person, 'Hello');
boundGreet('!'); // Output: "Hello, Alice!"

The main differences

Invocation

call- Immediately call the function with the individual arguments.
apply- Immediately call the function with arguments given as an array.
bind- Returns a new function, which can be called later with any arguments.

Syntax

call- The arguments are listed one by one.
apply- The arguments are passed as an array.
bind- Creates a new function with default arguments.

Use Case

Use call when you know the level of dispute and want to call the function immediately.
Use apply when you have an array of arguments and you want to call the function immediately.
Use bind when you want to create a new function with that particular this value and/or with default arguments, to call later.

Understanding these methods and their differences is important for proper implementation and context management in JavaScript.

Also, Read: What is JavaScript's spread operator (...), and how is it used?

forum

What is the difference between call, apply, and bind methods in JavaScript?

Can you answer this question?

1 Answers

JavaScript call, apply, and bind Methods

call() Method

apply() Method

bind() Method

The main differences