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

JavaScript functions are powerful because they can behave differently depending on who is calling them. This behavior is controlled by the keyword this.

Understanding this, along with the methods call(), apply(), and bind(), is an important step toward mastering JavaScript. These concepts allow you to control function context and reuse functions across different objects.

In this article, we’ll explore these concepts in a beginner-friendly way with simple examples.

---

What does this mean in JavaScript?

In JavaScript, this refers to the object that is calling the function.

Think of this as answering the question:

👉 "Who is calling this function?"

The value of this depends on how the function is called, not where it is written.

---

this inside normal functions

In a regular function (called directly), the value of this depends on the environment.

Example:

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

show();

In Browser

this refers to the window object.

In strict mode

this becomes undefined.

"use strict";

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

show(); // undefined

The key takeaway:

👉 In normal function calls, this is not tied to any specific object.

---

this inside objects

When a function is called as a method of an object, this refers to that object.

Example:

const person = {
  name: "Shubham",
  greet: function () {
    console.log("Hello, my name is " + this.name);
  }
};

person.greet();

Output

Hello, my name is Shubham

Here:

• greet() is called by person

• Therefore this = person

👉 Object.method() → this = object

---

The problem: Losing this

Sometimes we want to reuse a method from one object in another object.

Example:

const person1 = {
  name: "Rahul",
  greet: function () {
    console.log("Hello " + this.name);
  }
};

const person2 = {
  name: "Anjali"
};

person1.greet();

Output

Hello Rahul

But how can person2 use the same greet() method?

This is where call() comes in.

---

What call() does

call() allows you to borrow a function and call it with a different object as this.

Syntax:

functionName.call(object, arg1, arg2)

Example:

const person1 = {
  name: "Rahul",
  greet: function () {
    console.log("Hello " + this.name);
  }
};

const person2 = {
  name: "Anjali"
};

person1.greet.call(person2);

Output

Hello Anjali

Explanation:

• We borrowed greet() from person1

• Used call() to set this = person2

So now this.name becomes "Anjali".

---

call() with arguments

call() also lets you pass arguments.

const person = {
  introduce: function (city, country) {
    console.log(this.name + " from " + city + ", " + country);
  }
};

const user = {
  name: "Shubham"
};

person.introduce.call(user, "Patna", "India");

Output

Shubham from Patna, India

---

What apply() does

apply() works almost the same as call().

The only difference is how arguments are passed.

Syntax

functionName.apply(object, [argsArray])

Example:

const person = {
  introduce: function (city, country) {
    console.log(this.name + " from " + city + ", " + country);
  }
};

const user = {
  name: "Shubham"
};

person.introduce.apply(user, ["Patna", "India"]);

Output

Shubham from Patna, India

---

What bind() does

bind() is different from call() and apply().

• call() → runs the function immediately

• apply() → runs the function immediately

• bind() → returns a new function

Example:

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

const user = {
  name: "Rahul"
};

const greetUser = person.greet.bind(user);

greetUser();

Output

Hello Rahul

Here:

• bind() creates a new function

• That function always uses user as this

---

Difference between call, apply, and bind

Method	Executes Immediately	Arguments Format	Returns Function
call()	Yes	Separate arguments	No
apply()	Yes	Array of arguments	No
bind()	No	Separate arguments	Yes

Example comparison:

function greet(city, country) {
  console.log(this.name + " from " + city + ", " + country);
}

const user = { name: "Shubham" };

greet.call(user, "Patna", "India");
greet.apply(user, ["Patna", "India"]);

const newFn = greet.bind(user);
newFn("Patna", "India");

---

Assignment Practice

Try this exercise to practice these concepts.

Step 1 — Create an object

const student = {
  name: "Aman",
  show: function (city) {
    console.log(this.name + " from " + city);
  }
};

---

Step 2 — Borrow using call()

const student2 = {
  name: "Priya"
};

student.show.call(student2, "Delhi");

Output

Priya from Delhi

---

Step 3 — Use apply()

student.show.apply(student2, ["Mumbai"]);

---

Step 4 — Use bind()

const newFunc = student.show.bind(student2);

newFunc("Bangalore");

---

Visualizing the concept

Function → Caller relationship

Object ----calls----> Function

person.greet()

this = person

Using call()

Function borrowed

person.greet.call(user)

this = user

---

Key Takeaways

• this refers to the object that calls the function

• In object methods, this refers to the object itself

• call() invokes a function with a specific this

• apply() works like call but takes arguments as an array

• bind() returns a new function with a fixed this

• These methods help reuse functions across objects

Understanding these concepts will help you write more flexible and reusable JavaScript code.