JavaScript functions are powerful because they can behave differently depending on who calls them.
This behavior is controlled by one important keyword: this.

Understanding this and how methods like call(), apply(), and bind() work will help you write more flexible and reusable JavaScript code.

Let’s break everything down step by step.

---

1. What this Means in JavaScript

In simple terms:

this refers to the object that is calling the function.

Think of it as:

"this = who is executing the function right now"

Example:

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

person.greet();

Output:

Hello, my name is Rahul

Here:

• greet() is called by person

• So this refers to person

---

2. this Inside Normal Functions

When a normal function is called without an object, this refers to the global object (or undefined in strict mode).

Example:

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

show();

In browsers, this may print the window object.

So remember:

Function Type	this Refers To
Object method	The object
Regular function	Global object / undefined

---

3. this Inside Objects

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

Example:

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

car.showBrand();

Output:

Toyota

Here:

car → calling showBrand()
this → car

---

4. What call() Does

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

Syntax:

functionName.call(object, arg1, arg2)

Example:

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

const person = {
  name: "Aman"
};

greet.call(person, "Delhi");

Output:

Hello, I am Aman from Delhi

Here:

• call() forces this to refer to person

---

5. What apply() Does

apply() works almost the same as call(), but the difference is how arguments are passed.

Syntax:

functionName.apply(object, [arg1, arg2])

Example:

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

const person = {
  name: "Priya"
};

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

Output:

Priya is 22 years old from Mumbai

Key point:

• call() → arguments passed separately

• apply() → arguments passed as an array

---

6. What bind() Does

bind() is different from call() and apply().

Instead of calling the function immediately, bind() returns a new function with this fixed.

Syntax:

const newFunction = functionName.bind(object)

Example:

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

const user = {
  name: "Riya"
};

const newGreet = greet.bind(user);

newGreet();

Output:

Hello Riya

Important difference:

Method	Executes Immediately?
call	Yes
apply	Yes
bind	No (returns new function)

---

7. Difference Between call, apply, and bind

Feature	call()	apply()	bind()
Sets this value	Yes	Yes	Yes
Calls function immediately	Yes	Yes	No
Arguments format	Separate arguments	Array	Separate arguments (when calling returned function)
Returns new function	No	No	Yes

Example Summary:

greet.call(person, "Delhi");
greet.apply(person, ["Delhi"]);
const newFunc = greet.bind(person);
newFunc("Delhi");

---

8. Function → Caller Relationship

Conceptually, this works like this:

Function → Called By → Object
                ↓
              this

Example:

person.greet()

person → calling the function
this → person

With call():

greet.call(person)

person → forced caller
this → person

---

9. Assignment Practice

Try this exercise to strengthen your understanding.

Step 1: Create an Object

const student = {
  name: "Arjun",
  introduce: function(course) {
    console.log(this.name + " studies " + course);
  }
};

---

Step 2: Borrow Method Using call()

const anotherStudent = {
  name: "Meera"
};

student.introduce.call(anotherStudent, "Computer Science");

---

Step 3: Use apply() With Array Arguments

student.introduce.apply(anotherStudent, ["AI"]);

---

Step 4: Use bind()

const introFunc = student.introduce.bind(anotherStudent);

introFunc("Data Science");

---

Final Thoughts

Understanding this, call(), apply(), and bind() unlocks one of the most powerful parts of JavaScript.

Key takeaways:

• this refers to the object calling the function

• call() invokes a function with a specific this

• apply() works like call() but takes arguments as an array

• bind() creates a new function with a fixed this

Mastering these concepts will make your JavaScript code more reusable, flexible, and professional.

---