call, bind and apply in JavaScript

Humayun’s Tomb

Generally, we don’t use these functions in our day to day front-end development. The most common use case for these functions are when either we are doing some hardcore JS work, writing a library or working on a library/framework which needs one of the function. Example of such scenarios is ReactJS. Where in Class component we use bind to bind the reference of this in class instance.

So, let’s understand what is purpose these function serve?

The job of all three of the functions call bind and apply is same. And that is to pass on the reference of this to the caller function with some slight sprinkle of variation.

Let’s understand the above definition with an example. Consider below code:

In above code, inside mystryFunction the reference of this will always point to window object. Now what if we want to utilize the mystryFunction and want to change the reference of this inside it.
We can do this by utilizing any of the three methods.

Call and Apply

Difference b.w. Call and Apply

call and apply do same thing. Bind the reference of passed object to the function.
The only difference is how they handle parameters. Call accepts comma separated parameters while apply accepts array of parameters.
Let’s see this by and example.

Bind

bind also does the same thing. The only difference is that, it returns a new function after adding the passed reference to it, instead of immediate calling it.
Bind receives arguments as a comma separated values.

Bind returns a new function, instead of immediately calling

Thanks for reading, I hope this will make you aware for these concepts.

!!! Cheers 🍻