The Magic of this, call(), apply(), and bind() in JavaScript

Hey Everyone,

In this blog, we will learn about call(), apply(), and bind() in JavaScript.

One concept that confuses many JavaScript beginners is the keyword this.

Understanding how this works — and how call(), apply(), and bind() control it — is an important step toward writing better JavaScript.

---

What Does this Mean?

In JavaScript, this refers to the object that is calling the function.

Think of it as answering the question:

👉 “Who is calling this function?”

Example:

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

person.greet();

Output:

Hello, my name is Rahul

Here:

• The function greet() is called by person

• So this refers to person

---

this Inside Normal Functions

Inside a regular function, this usually refers to the global object (or undefined in strict mode).

Example:

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

show();

In a browser environment, this typically refers to the window object.

The key idea is:

👉 this depends on how the function is called, not where it is written.

---

this Inside Objects

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

Example:

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

car.showBrand();

Output:

Toyota

Here this.brand refers to car.brand.

---

What Does call() Do?

The call() method allows us to manually set the value of this.

Example:

const person1 = {
  name: "Rahul"
};

const person2 = {
  name: "Anita"
};

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

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

Output:

Hello Rahul
Hello Anita

call() lets us choose which object should be this.

---

What Does apply() Do?

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

The difference is how arguments are passed.

Example:

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

const person = { name: "Rahul" };

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

Output:

Rahul from Delhi, India

Here arguments are passed as an array.

---

What Does bind() Do?

bind() also sets the value of this, but it returns a new function instead of calling it immediately.

Example:

const person = {
  name: "Rahul"
};

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

const greetRahul = greet.bind(person);

greetRahul();

Output:

Hello Rahul

The function is stored and can be called later.

---

Difference Between call, apply, and bind

Method	When it runs	How arguments are passed
call()	Runs immediately	Arguments passed individually
apply()	Runs immediately	Arguments passed as an array
bind()	Returns a new function	Arguments can be passed later

Example comparison:

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

---

Practice Assignment

Try the following exercise.

1. Create an Object

const student = {
  name: "Aman",
  showName() {
    console.log(this.name);
  }
};

---

2. Borrow the Method Using call()

const student2 = {
  name: "Riya"
};

student.showName.call(student2);

---

3. Use apply() with Arguments

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

introduce.apply(student2, ["Mumbai", "India"]);

---

4. Use bind()

const intro = introduce.bind(student2, "Delhi", "India");

intro();

---

And now, you know what is the difference among call(), apply(), and bind() in JavaScript

If you have any doubt or want to connect, feel free to drop a comment — I’d be happy to help.

Thanks for reading, and see you in the next blog!

Peace ✌️ and Happy Learning!