Understanding this, call(), apply(), and bind() in JavaScript

In JavaScript, the keyword this is used inside functions to refer to the object that is calling the function.

A simple way to think about it is:

this means “who is calling the function.”

Understanding this helps when working with objects, methods, and advanced function behaviors.

---

What this Means in JavaScript

The value of this depends on how a function is called.

Example:

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

person.greet();

Output:

Hello, my name is Alice

Here:

• this refers to the person object
• this.name accesses the object's property

---

this Inside Normal Functions

In a normal standalone function, this usually refers to the global object (or undefined in strict mode).

Example:

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

showThis();

Since the function is not called by any object, this does not refer to a specific object.

---

this Inside Objects

When a function is called as a method of an object, this refers to that object.

Example:

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

car.showBrand();

Output:

Toyota

Here:

• this refers to the car object
• this.brand accesses its property

---

What call() Does

The call() method allows us to call a function and specify what this should refer to.

Example:

let person1 = {
  name: "Alice"
};

let person2 = {
  name: "Bob"
};

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

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

Output:

Hello Alice
Hello Bob

Here, call() lets us borrow a function and run it with a different object.

---

What apply() Does

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

The difference is how arguments are passed.

• call() passes arguments individually
• apply() passes arguments as an array

Example:

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

let person = {
  name: "Alice"
};

introduce.apply(person, ["Paris", "France"]);

Output:

Alice lives in Paris, France

---

What bind() Does

bind() does not immediately call the function.

Instead, it creates a new function with this permanently set.

Example:

let person = {
  name: "Alice"
};

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

let greetAlice = greet.bind(person);

greetAlice();

Output:

Hello Alice

Here:

• bind() creates a new function
• this will always refer to person

---

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

Method	Executes Immediately	Arguments	Result
call()	Yes	Passed individually	Calls function with specified this
apply()	Yes	Passed as array	Calls function with specified this
bind()	No	Passed individually	Returns a new function

Example comparison:

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

let person = { name: "Alice" };

greet.call(person, "London");
greet.apply(person, ["London"]);

let greetBound = greet.bind(person);
greetBound("London");

---

Assignment

Questions

1. Create an object with a method that uses this.

2. Borrow that method using call().

3. Use apply() with array arguments.

4. Use bind() and store the function in a variable.

---

Answers

1. Create an Object with a Method

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

person.greet();

---

2. Borrow the Method Using call()

let person2 = {
  name: "Bob"
};

person.greet.call(person2);

Output:

Hello, my name is Bob

---

3. Use apply() with Array Arguments

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

let person = {
  name: "Alice"
};

introduce.apply(person, ["Paris", "France"]);

---

4. Use bind() and Store the Function

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

let person = {
  name: "Alice"
};

let boundGreet = greet.bind(person);

boundGreet();

Output:

Hello Alice

---

Conclusion

The keyword this helps functions access the object that is calling them. Methods like call(), apply(), and bind() allow us to control what this refers to.

Understanding these concepts makes it easier to reuse functions, borrow methods between objects, and manage function behavior in JavaScript.