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

JavaScript has some powerful features that help us control how functions work. One important concept is this, along with the methods call(), apply(), and bind().

Many beginners find these concepts confusing at first, but once you understand them with simple examples, they become much easier.

In this article, we will understand:

• What this means in JavaScript

• How this behaves in functions and objects

• What call(), apply(), and bind() do

• The difference between them

Let’s start with the most important concept.

---

What Does this Mean in JavaScript?

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

A simple way to understand this is:

this = “Who is calling the function?”

Example:

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

greet();

Here, this refers to the global object (like window in browsers).

But this behaves differently depending on how the function is called.

---

this Inside Normal Functions

In a normal function, if it is called by itself, this usually refers to the global object.

Example:

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

show();

Output (in browser):

window

This happens because the function is not called by any specific object.

---

this Inside Objects

When a function is inside an object, this refers to the object that calls the function.

Example:

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

person.greet();

Output:

Hello, my name is Rahul

Here:

• this refers to the person object

• this.name means person.name

---

What Does call() Do?

The call() method allows us to borrow a function from another object and use it with our own object.

It also lets us manually set the value of this.

Example:

let person1 = {
  name: "Aman"
};

let person2 = {
  name: "Priya"
};

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

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

Output:

Hello Aman
Hello Priya

Here:

• call() sets who this refers to

---

What Does apply() Do?

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

The main difference is how arguments are passed.

With apply() arguments are passed as an array.

Example:

let person = {
  name: "Rahul"
};

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

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

Output:

Rahul lives in Mumbai, India

Here:

• apply() sets this

• arguments are passed as array

---

What Does bind() Do?

bind() is slightly different.

Instead of calling the function immediately, it returns a new function with this fixed.

Example:

let person = {
  name: "Aman"
};

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

let greetPerson = greet.bind(person);

greetPerson();

Output:

Hello Aman

Here:

• bind() creates a new function

• this is permanently set to person

---

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

Method	How Arguments Are Passed	Executes Immediately?
call()	Passed one by one	Yes
apply()	Passed as array	Yes
bind()	Passed one by one	No (returns new function)

Example comparison:

greet.call(person, arg1, arg2);

greet.apply(person, [arg1, arg2]);

let newFunc = greet.bind(person);
newFunc();

---

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

In this article we learned:

• What this means in JavaScript

• How this behaves in functions and objects

• How call() works

• How apply() works

• How bind() works

• Differences between them

These concepts are widely used in JavaScript frameworks, event handling, and advanced programming patterns.