Swastik Yadav


Navigate back to the homepage

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

Swastik Yadav
January 20th, 2023 · 1 min read

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.

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

1const obj = {
2 name: "Swastik",
3 greet(age) {
4 console.log(`Hello ${this.name}, age: ${age}`);
5 }
8obj.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.

1const obj1 = {
2 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” 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.

1obj.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” 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.

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


“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.
1const bindYadav = obj.greet.bind(obj1, 25);
2bindYadav(); // console.log -> Hello Yadav, age: 25

That’s it for this post, I hope you found this useful. Want to double your income as a developer check the below material.

Thank You!

More articles from Swastik Yadav

Understanding the need for useEvent() React hook.

In this post, let's try to understand the need of *useEvent* React hook and we will see what problem the React team is trying to solve with this hook.

January 7th, 2023 · 1 min read

Packages in React ecosystem that I used in 2022.

The ReactJs ecosystem is constantly growing and evolving, and 2022 was no exception. In this post, we will take a look at some of the npm packages that I used this year.

December 10th, 2022 · 2 min read

Developers, Double your income without competing against thousands of resumes by building your social presence.

Learn to bypass all the competition. Let the opportunities come to you instead of you mindlessly running behind it. This is how I went from 9LPA to 18LPA.

© 2021–2023 Swastik Yadav
Link to $https://twitter.com/swastikb380Link to $https://github.com/SwastikyadavLink to $https://www.linkedin.com/in/swastikyadav/