What is the Difference Between call() apply() and bind() in JavaScript

There are multiple methods utilized for various purposes, including the “apply()”, “call()”, and “bind()” methods which allow you to modify the context of the “this” keyword that is present inside the calling function. Furthermore, apply() and call() methods to utilize “this” variable to a stated function and also call the function. Whereas the bind() method only sets this to a function.

This post will explain the difference/distinctions between call(), apply(), and bind JavaScript methods.

What is the Difference/Distinctions Between call() apply() & bind() in JavaScript?

The difference between the call(), apply(), and bind() methods is as follows:

All three methods utilize “this” argument to the function.
The apply() and call() methods set this to a function and call the function.
The bind() method will only set this to a function. It will need to invoke the function separately.

How to Utilize call(), apply() & Bind() Methods in JavaScript?

To utilize the call(), apply(), and bind() methods, check out the stated examples discussed below:

Example 1: Using the “call()” Method in JavaScript

The “call()” method invokes the function and attaches “this” value to it. It accepts “this” as a parameter along with a list of arguments. After that, it returns the value provided by the invoked function utilizing the call() method. To do so, we have called the func with the help of the call() method:

function func(arg1, arg2){

console.log(this.num, arg1, arg2);

}

The call method will invoke the function along with the arguments passed to the function:

func.call({num: 70}, 60, 20);

Example 2: Using the “apply()” Method in JavaScript

The function is called via the “apply()” method, which also binds “this” value to the function. It calls the function with the help of the apply method, which returns the value, and it accepts this value and a single array object as inputs:

function test(...arguments){

console.log(this.num, arguments);

}

In the stated example, the apply method calls the function, and the object is passed to the apply() method.

test.apply({num: 100}, [1,8,11,18]);

Example 3: Using the bind() Method in JavaScript

The “bind()” method creates a new function and binds this value to the function. But there is still a need to call the returned method on its own. In this code snippet, we bind “this” variable for the test function:

function test(arg){

console.log(this.number, arg);

}

Then, call the returning function using the bind method.

let bindedFn = test.bind({number: 80}, "argument");

Lastly, call the function directly:

bindedFn();

That’s all about the difference between call(), apply(), and bind() methods in JavaScript.

Conclusion

The main difference between the call(), apply(), and bind() methods in JavaScript is that the “apply()” and “call()” methods utilize “this” variable to a stated function and also call the function. Whereas the “bind()” method only sets this to a function. This post stated the distinctions between call(), bind(), and apply() in JavaScript.