by Rajat Saxena

The difference between JavaScript’s call, apply, and bind methods

Let’s drill it into our minds and be done with it, once and for all.

JavaScript’s call vs apply vs bind

I’m writing this micro post because the aforementioned question has haunted me for a very long time, and I knew I wasn’t the only one. Every single time I saw someone use any of those three methods I had to rush to MDN in order to figure out what was going on.

Enough was enough. I knew I had to do something and I did. I supposedly have created a proverbial silver bullet which can help new JavaScript developers out.

Disclaimer: This is not a theoretical solution, but a really hacky way to remember the difference.

The major cause of confusion between the call() and apply() methods is how to pass in the additional arguments besides this. And why do we have bind() anyway?

So let’s learn how to easily tell the three apart.

Apply()

apply(this [, [arg1, arg2,...]]): Calls a function with a provided this value. Further arguments are provided as a single array.

Way to remember: “Apply accepts arguments as an Array” or “AA

Call()

call(this [, arg1, arg2...]): Calls a function with a provided this. Further arguments are provided as a comma separated list

Ways to remember: “Call’s arguments are separated by commas” or “CC”.

Bind()

bind(this): Returns a new function whose this value is bound to the provided value.

Ways to remember: bind() is the only method out of the three that returns a new function altogether. It does not call the function.

Wrap up

I hope the above explanation might help some of you out there. It certainly is helping me.

Do you have other memorization tricks related to programming? Kindly share it with the community as it will help everyone out. Especially during those interviews.

If you have any queries or doubts, hit me up on Twitter @rajat1saxena or write to me at [email protected]. Please recommend this post, if you liked it and share it with your network.