Understand call, apply, and bind functions in JavaScript like never before.

In this post, we'll take a detailed look at how call, apply, and bind work in JavaScript.

JavaScript's call(), apply(), and bind() functions are often misunderstood. In this video, we'll clear up the confusion once and for all.

We'll discuss the differences between the three, and when you would want to use each one. We'll also provide examples to help you understand how they work.

By the end of this post, you'll have a deep understanding of how these functions work, and be able to use them in your own code.

So, let's get started.

Now, let's start for real.

---

Let's say we have an object with name and greet function.

const obj = {
  name: "Swastik",
  greet(age) {
    console.log(`Hello ${this.name}, age: ${age}`);
  }
}

obj.greet(23); // console -> Hello Swastik, age: 23

Calling the greeet function consoles "Hello Swastik". The **"this"** keyword refers to the context of greet() function.

In other words **"this"** keywords for greet() function refers to the object (obj) in which it was defined.

Now, let's say you need to change the context of greet() function, means you need to change where the "this" keyword refers in greet() function from obj to obj1.

Let's define obj1.

const obj1 = {
  name: "Yadav"
}

What we want to achieve is that when we call greet() function it should console "Hello Yadav" instead of "Hello Swastik".

This can be achieved with call(), apply(), and bind() method in JavaScript.

call()

"call" method changes the context of a given function to the context that we specify. So here we are changing the context of greet from obj to obj1.

obj.greet.call(obj1, 24); // console -> Hello Yadav, age: 24

First argument is the new context we want, and all comma separated arguments are for greet function.

apply()

"apply" method is exactly similar to "call method", the only difference being that call takes argument of greet as comma separated and apply takes them as an array.

obj.greet.apply(obj1, [24]); // console -> Hello Yadav, age: 24

bind()

"bind" is also exactly similar to call and apply, and here is the difference.

• call and apply executes the fuction right away.
• bind returns a new function binded with new "this" keyword, which can be called later.

const bindYadav = obj.greet.bind(obj1, 25);
bindYadav(); // console.log -> Hello Yadav, age: 25

---

That's it for this post, I hope you found this useful, and if so, please show your support by joining the weekly newsletter: Newsletter.

Comments

[Yuwang Cai]

Well explained! Thanks!

[Swastik Yadav]

Thank you Yuwang.

[leeuw]

thanks!

[Deddy Wolley]

Very easy to understand thanks!

[Swastik Yadav]

Thank you for your words. I'm Glad that you found this useful.

[Will Wang]

very clear, Thanks

[Swastik Yadav]

You are welcome. 😊

[Janith Thilakarathna]

Simple & concise... Thank you...

[Swastik Yadav]

Thank you Janith, I am glad that you found this useful.

[arun rana]

Hey so whats that bind fn inside in react ' s class components's constructor ?

[Swastik Yadav]

Hi Arun,

That binding of methods (event handlers) in React class component is exactly the bind method which is explained in this post.

You can use arrow functions in class component to avoid this binding, because arrow functions don't have their own "this" binding.