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

Question

Ashutosh Kumar Verma · 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.and 
Each has specific usage and grammatical differences.
and 
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!"
and 
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!"
and 
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.
and 
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.
and 
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?

Steilla Mitchel

1 Answers

JavaScript call, apply, and bind Methods

call() Method

apply() Method

bind() Method

The main differences

Liked By