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

When learning JavaScript, you’ll eventually encounter a keyword that can feel confusing at first: this.

The value of this changes depending on how a function is called. JavaScript also provides special methods like call(), apply(), and bind() to control what this refers to.

In this article, we’ll break these concepts down in a simple and beginner-friendly way.

1. What this Means in JavaScript (Simple Explanation)

In JavaScript, this refers to the object that is currently executing the code.

You can think of this as a way for a function to refer to the object it belongs to.

Example:

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

person.greet();

Output:

Hello, my name is Aman

Here:

• this refers to the person object

• this.name accesses the name property

So this helps functions access data inside their own object.

2. this Inside Normal Functions

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

Example:

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

showThis();

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

For beginners, the important thing to remember is:

In normal functions, this is not tied to a specific object unless we explicitly control it.

3. this Inside Objects

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

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 the brand property

This makes it easy for object methods to work with their own data.

4. What call() Does

The call() method allows you to invoke a function while manually setting the value of this.

Example:

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

let user = { name: "Rahul" };

greet.call(user);

Output:

Hello Rahul

Here:

• greet is a normal function

• call() sets this to the user object

So the function behaves as if it belongs to that object.

You can also pass additional arguments:

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

introduce.call(user, "Delhi");

5. What apply() Does

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

The only difference is how arguments are passed.

Example:

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

let user = { name: "Aman" };

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

Output:

Aman from Delhi, India

Key idea:

• call() → arguments passed individually

• apply() → arguments passed as an array

6. What bind() Does

bind() is similar to call() and apply(), but it does not execute the function immediately.

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

Example:

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

let user = { name: "Aman" };

let greetUser = greet.bind(user);

greetUser();

Output:

Hello Aman

Here:

• bind() returns a new function

• That function will always use the provided this value

This is useful when passing functions as callbacks or event handlers.

7. Difference Between call, apply, and bind

Method	Executes Immediately	How Arguments Are Passed
call()	Yes	Passed individually
apply()	Yes	Passed as an array
bind()	No	Returns a new function

Example summary:

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

let user = { name: "Rahul" };

greet.call(user, "Delhi");
greet.apply(user, ["Mumbai"]);

let newFunc = greet.bind(user);
newFunc("Bangalore");

Final Thoughts

The this keyword can seem confusing at first, but understanding it becomes easier with practice.

To summarize:

• this refers to the object executing the function

• Inside objects, this refers to the object itself

• call() executes a function with a specific this

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

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

Mastering these concepts will help you better understand how JavaScript functions interact with objects.