JavaScript has a special keyword called this that often confuses beginners.
But once you understand one simple idea, everything becomes much easier.

👉 Think of this as “who is calling the function.”

In this article, we will understand:

• What this means

• this in normal functions

• this in objects

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

• The difference between them

---

What this Means in JavaScript

The this keyword refers to the object that is calling the function.

In simple words:

this = the owner of the function at the time it runs.

Example:

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

person.greet();

Output

Hello, my name is Sayantan

Here:

person → calls greet()

So inside the function:

this = person

---

this Inside Normal Functions

In a regular standalone function, this depends on how the function is called.

Example:

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

showThis();

In browsers, this usually prints:

window

Because the function is called globally.

---

this Inside Objects

Inside an object method, this refers to the object that owns the method.

Example:

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

car.showBrand();

Output

Tesla

Here:

this → car

because car is calling the method.

---

What call() Does

The call() method allows you to manually set what this should be.

Syntax

functionName.call(object, arg1, arg2)

Example:

const person1 = {
  name: "Sayantan"
};

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

greet.call(person1);

Output

Hello Sayantan

Here:

call() forces this = person1

call() with arguments

function introduce(age) {
  console.log(this.name + " is " + age + " years old");
}

introduce.call(person1, 21);

---

What apply() Does

apply() works almost exactly like call(), but arguments are passed as an array.

Syntax

functionName.apply(object, [args])

Example:

const person2 = {
  name: "Rahul"
};

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

introduce.apply(person2, [22, "Kolkata"]);

Output

Rahul is 22 and lives in Kolkata

---

What bind() Does

bind() creates a new function with this permanently set.

Unlike call() and apply(), it does not run immediately.

Syntax

const newFunction = functionName.bind(object)

Example:

const person3 = {
  name: "Ankit"
};

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

const greetPerson = greet.bind(person3);

greetPerson();

Output

Hello Ankit

Here:

bind() → returns a new function

---

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

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

Example Summary

func.call(obj, a, b)
func.apply(obj, [a, b])
const newFunc = func.bind(obj)

---

Visual Idea

Function → Who calls it?

Object.method()  → this = object

call()           → manually choose object
apply()          → manually choose object
bind()           → permanently bind object

---

Assignment Practice

Try implementing the following:

Step 1 — Create an object

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

---

Step 2 — Borrow the method using call()

const student = {
  name: "Rahul"
};

person.introduce.call(student, "Delhi");

---

Step 3 — Use apply() with array arguments

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

---

Step 4 — Use bind() and store the function

const introStudent = person.introduce.bind(student);

introStudent("Bangalore");