JavaScript has many confusing things, but this is probably in the top three. The other two are usually why something works and why it stopped working after you touched it.

But the idea behind this is actually simple.

this refers to the object that is calling the function.

Think of it as answering the question:

“Who called this function?”

What this Means in JavaScript

• In JavaScript, this refers to the object that is executing the current function.

• A simple way to remember:

this = the caller of the function

• If the caller changes, this changes.

---

Function → Caller Relationship

• Think of it like this:

object → calls → function
           ↓
         this = object

this Inside Normal Functions

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

• Example:

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

greet();

• In a browser environment, this will usually print:

Window

Why?

• Because the function was called globally, so the caller becomes the global object.

• This is why beginners often look at this and say:

“I didn’t ask for the entire window.”

• JavaScript simply replies: “Too bad.”

this Inside Objects

• When a function is inside an object, this refers to the object that owns the method.

Example:

const person = {
  name: "Rahul",

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

person.greet();

Output:

Hello, my name is Rahul

Here:

person → calls → greet()
this = person

So this.name becomes "Rahul".

What call() Does

• Sometimes we want to borrow a function from another object.

• call() allows us to manually set what this should be.

Example:

const person1 = {
  name: "Rahul"
};

const person2 = {
  name: "Aman"
};

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

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

Output:

Hello Rahul
Hello Aman

Explanation:

call(object)

• This forces the function to run with that object as this.

---

call() With Arguments

• call() can also pass arguments.

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

const person = { name: "Rahul" };

introduce.call(person, "Delhi");

Output:

Rahul lives in Delhi

What apply() Does

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

• The only difference is how arguments are passed.

call() → arguments separately

apply() → arguments inside an array

Example:

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

const person = { name: "Rahul" };

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

Output:

Rahul lives in Delhi, India

So remember:

call()  → arguments separately
apply() → arguments as an array

What bind() Does

bind() is slightly different.

• Instead of immediately calling the function, it returns a new function with this permanently set.

Example:

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

const person = { name: "Rahul" };

const greetPerson = greet.bind(person);

greetPerson();

Output:

Hello Rahul

Explanation:

bind() → returns a new function

It does not run immediately.

Think of it like saving a customized function for later.

Difference Between call, apply, and bind

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

Quick summary:

call()  → run now
apply() → run now (array args)
bind()  → run later

---

Visual Comparison

Conceptually:

call()  → run function with chosen this
apply() → same but arguments in array
bind()  → create new function with fixed this

---

Assignment

Step 1: Create an Object with a Method

const person = {
  name: "Rahul",

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

---

Step 2: Borrow the Method Using call()

const anotherPerson = { name: "Aman" };

person.greet.call(anotherPerson);

Expected Output

Hello Aman

---

Step 3: Use apply() with Array Arguments

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

const person = { name: "Rahul" };

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

---

Step 4: Use bind()

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

const person = { name: "Rahul" };

const greetPerson = greet.bind(person);

greetPerson();

---

Final Thoughts

Understanding this, call(), apply(), and bind() is essential in JavaScript because they control how functions receive their context.

A good rule to remember:

If JavaScript behaves strangely, check what this is.

So so grateful to the #chaicode team for the opportunities.