The Magic of this, call(), apply(), and bind() in JavaScript

“In JavaScript, this is not about the function…
It’s about who is calling the function.”

If you’ve ever been confused by this, trust me you’re not alone. Every JavaScript developer struggles with it at some point. But today, we’ll make it simple.

No complicated execution context. No scary theory. Just clear examples

---

What Does this Mean in JavaScript?

In simple words:

this refers to the object that is calling the function.

Think of it like this:

• Function = Worker 👷

• Object = Boss 🧑‍💼

• this = The boss who gave the order

Whoever calls the function becomes this.

---

this Inside a Normal Function

function show() {
  console.log(this);
}

show();

In browsers → this refers to the window object. Why?

Because the function is called directly, and in the browser, the global caller is window.

this Inside an Object

Now see this example:

const person = {
  name: "Nikhil",
  greet: function () {
    console.log("Hello, I am " + this.name);
  }
};

person.greet();

Output:

Hello, I am Nikhil

Here:

• person is calling greet()

• So this = person

Simple rule: Left side of the dot (.) becomes this

---

What is call()?

call() lets you manually decide what this should be.

Syntax:

functionName.call(object, arg1, arg2)

Example:

const person1 = {
  name: "Nikhil"
};

const person2 = {
  name: "Rahul"
};

function greet(age) {
  console.log("Hi, I am " + this.name + " and I am " + age);
}

greet.call(person1, 22);
greet.call(person2, 25);

Output:

Hi, I am Nikhil and I am 22
Hi, I am Rahul and I am 25

call() immediately invokes the function Arguments are passed one by one

---

What is apply()?

apply() is almost the same as call(). The only difference is Arguments are passed as an array

Syntax:

functionName.apply(object, [arg1, arg2])

Example:

greet.apply(person1, [22]);
greet.apply(person2, [25]);

Same output as call().

• call() → arguments separated by commas

• apply() → arguments inside array

---

What is bind()?

bind() is different. It does NOT call the function immediately.

Instead: It returns a new function with this fixed.

Example:

const greetNikhil = greet.bind(person1, 22);

greetNikhil();

Output:

Hi, I am Nikhil and I am 22

So:

• call() → calls immediately

• apply() → calls immediately

• bind() → returns new function (call later)

---

Difference Between call(), apply(), and bind()

Feature	call()	apply()	bind()
Invokes immediately?	Yes	Yes	No
Arguments format	Comma separated	Array	Comma separated
Returns new function?	No	No	Yes
Use case	Borrow function	Borrow function (array data)	Store function for later

---

Examples Practice

Step 1: Create an object with method

const car = {
  brand: "Tesla",
  showBrand: function () {
    console.log("Car brand is " + this.brand);
  }
};

car.showBrand();

---

Step 2: Borrow method using call()

const bike = {
  brand: "Yamaha"
};

car.showBrand.call(bike);

---

Step 3: Use apply()

car.showBrand.apply(bike);

---

Step 4: Use bind()

const showBikeBrand = car.showBrand.bind(bike);
showBikeBrand();

Conclusion

The article simplifies the concept of this in JavaScript by explaining that it refers to the object that calls the function. It uses simple analogies and examples to clarify how this behaves in different situations. For instance, in a normal function called directly in a browser, this refers to the global window object. However, when a function is called as a method on an object, this refers to the object itself, as illustrated with the example of a person object calling its greet method.

The article also explains the use of call(), apply(), and bind() methods to manipulate the value of this. The call() method allows you to invoke a function immediately with a specified this value and individual arguments, while apply() is similar but requires arguments to be passed as an array. In contrast, bind() returns a new function with a fixed this value, allowing the function to be called later. A comparison table summarizes the differences: call() and apply() invoke functions immediately, whereas bind() does not; call() and bind() use comma-separated arguments, while apply() uses an array. These methods are useful for borrowing functions or storing functions for later use.