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

One of the most confusing concepts for beginners in JavaScript is the keyword this.

Sometimes this refers to an object, sometimes it refers to something else, and sometimes it doesn’t behave the way we expect.

Once you understand how this works and how methods like call(), apply(), and bind() control it, many JavaScript concepts start making much more sense.

In this article, we will explore these concepts in a simple and practical way.

---

Topics Covered

In this blog we will learn:

• What this means in JavaScript
• this inside normal functions
• this inside objects
• What call() does
• What apply() does
• What bind() does
• Differences between call, apply, and bind

---

What Does this Mean in JavaScript?

A simple way to understand this is:

this refers to the object that is calling the function.

In other words, this depends on who is executing the function.

---

this Inside Normal Functions

In a regular function, this does not automatically refer to a specific object.

Example:

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

greet();

In browsers, this will usually refer to the global object (window).

For beginners, it’s easier to remember that:

In normal functions, this depends on how the function is called.

---

this Inside Objects

When a function is inside an object (called a method), this refers to that object.

Example:

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

person.greet();

Output:

Hello, my name is Alice

Here:

• this refers to the person object
• this.name accesses "Alice"

---

What Does call() Do?

The call() method allows us to manually set the value of this when calling a function.

This is useful when we want to borrow a method from another object.

Example:

const person1 = {
  name: "Alice"
};

const person2 = {
  name: "Bob"
};

function greet() {
  console.log("Hello " + this.name);
}

greet.call(person1);
greet.call(person2);

Output:

Hello Alice
Hello Bob

Here:

• call() sets this to the object we pass.

---

What Does apply() Do?

The apply() method works almost exactly like call().

The main difference is how arguments are passed.

• call() → arguments passed individually
• apply() → arguments passed as an array

Example:

function introduce(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}

const person = {
  name: "Alice"
};

introduce.apply(person, ["London", "UK"]);

Output:

Alice lives in London, UK

---

What Does bind() Do?

The bind() method does not immediately call the function.

Instead, it creates a new function with this permanently set.

Example:

const person = {
  name: "Alice"
};

function greet() {
  console.log("Hello " + this.name);
}

const greetPerson = greet.bind(person);

greetPerson();

Output:

Hello Alice

Here:

• bind() returns a new function
• That function remembers the this value.

---

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

Feature	call()	apply()	bind()
Execution	Runs immediately	Runs immediately	Returns a new function
Arguments	Passed individually	Passed as an array	Passed when function is called
Purpose	Change this and execute	Change this and execute	Create a new function with fixed this

---

Assignment Example

Let’s combine everything we learned.

Step 1: Create an object with a method

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

student.greet();

---

Step 2: Borrow the method using call()

const student2 = {
  name: "Ananya"
};

student.greet.call(student2);

Output:

Hello, I am Ananya

---

Step 3: Use apply() with array arguments

function introduce(city, country) {
  console.log(this.name + " lives in " + city + ", " + country);
}

introduce.apply(student2, ["Delhi", "India"]);

---

Step 4: Use bind()

const greetStudent = student.greet.bind(student2);

greetStudent();

---

Visualizing the Relationship

You can imagine it like this:

Function → Caller → this

Example:

person.greet()

Caller → person
this → person

---

Final Thoughts

Understanding this, call(), apply(), and bind() is important because they help control how functions interact with objects.

These concepts are widely used in:

• Event handlers
• Frameworks like React
• Object-oriented JavaScript
• Function borrowing

Once you understand them, you gain more control over how your functions behave in JavaScript.

---