When working with JavaScript, you will often encounter the keyword this.

Many beginners find this confusing at first, but once you understand how it works, it becomes a powerful feature for writing flexible and reusable code.

In this article, we will understand:

• What this means in JavaScript

• this inside normal functions

• this inside objects

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

• Differences between them

---

What this Means in JavaScript

In simple terms:

👉 this refers to the object that is calling the function.

You can think of it as answering the question:

“Who is calling this function?”

---

this Inside Normal Functions

When this is used in a normal function (in a browser environment), it usually refers to the global object.

Example:

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

show();

In browsers, this typically prints the window object.

---

this Inside Objects

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

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 accesses the property of that object

---

What call() Does

The call() method allows us to call a function with a specific object as this.

Example:

let person1 = {
  name: "Rahul"
};

let person2 = {
  name: "Amit"
};

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

greet.call(person1, "Delhi");
greet.call(person2, "Mumbai");

Output:

Hello Rahul from Delhi
Hello Amit from Mumbai

Here call() sets which object this refers to.

---

What apply() Does

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

The difference is how arguments are passed.

• call() → arguments passed individually

• apply() → arguments passed as an array

Example:

let person = {
  name: "Rahul"
};

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

greet.apply(person, ["Delhi", "India"]);

Output:

Rahul from Delhi, India

---

What bind() Does

Unlike call() and apply(), the bind() method does not execute the function immediately.

Instead, it returns a new function with this bound to the given object.

Example:

let person = {
  name: "Rahul"
};

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

let greetPerson = greet.bind(person);

greetPerson();

Output:

Hello Rahul

Here bind() creates a new function with fixed this.

---

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

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

---

Assignment Practice

Create an Object with a Method

let student = {
  name: "Ravi",
  showName: function() {
    console.log(this.name);
  }
};

student.showName();

---

Borrow Method Using call()

let student1 = { name: "Ravi" };
let student2 = { name: "Priya" };

function showName() {
  console.log(this.name);
}

showName.call(student1);
showName.call(student2);

---

Use apply() with Array Arguments

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

let person = { name: "Rahul" };

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

---

Use bind() and Store Function

let person = { name: "Amit" };

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

let greetAmit = greet.bind(person);

greetAmit();

---

Visual Idea: Who Calls the Function?

Example:

Function → greet()

Caller → person object

this → person

So the caller determines the value of this.

---