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

If you spend enough time writing JavaScript, you will eventually run into a keyword that causes a lot of headaches for beginners: this.

In English, we use pronouns like "he", "she", or "it" so we don't have to constantly repeat someone's name. If I say, "John is reading; he loves books," you know exactly who "he" is. In JavaScript, this acts just like a pronoun. It is a shortcut reference to an object.

But here is the trick: just like the word "he" changes depending on who you are talking about, the value of this changes depending on who is calling the function.

In this blog, we will understand exactly what this means, how it behaves inside objects and normal functions, and how we can control it using three powerful JavaScript methods: call(), apply(), and bind().

What this Means in JavaScript

The simplest way to understand this is to ask yourself one question whenever you see a function being executed: "Who is calling this function?"

Whatever object is standing "to the left of the dot" when the function is called, that object is this.

Let's look at how it behaves in two different scenarios.

1. this Inside Objects

When you put a function inside an object, it is called a method. Inside a method, this refers to the object that owns the method.

let user = {
  name: "Suprabhat",
  greet: function() {
    // "this" refers to the 'user' object
    console.log("Hello, my name is " + this.name);
  }
};

// WHO is calling the greet function? The 'user' object!
user.greet(); 
// Output: Hello, my name is Suprabhat

Because user is to the left of the dot (user.greet()), this.name translates directly to user.name.

2. this Inside Normal Functions

What happens if a function is just floating around on its own, not attached to any specific object you created?

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

// WHO is calling sayHello? No one specifically!
sayHello(); 

When you call a normal function without an object, this defaults to the global object (which is the window object in a web browser). Usually, we don't want to mess with the global object, which is why this is mostly used inside our own objects.

Borrowing Functions: call(), apply(), and bind()

Sometimes, you have a method on one object, but you want to use it on a completely different object. You want to temporarily change "who is calling the function" so that this points to exactly what you want.

JavaScript gives us three special tools to do this: call(), apply(), and bind().

What call() Does

The call() method allows you to borrow a function and instantly execute it, while explicitly telling JavaScript exactly what this should point to. You can also pass basic arguments to the function one by one, separated by commas.

Example:

let person1 = { name: "Suprabhat" };
let person2 = { name: "Piyush" };

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

// We use call() to make 'this' point to person1
introduce.call(person1, "UP", "India"); 
// Output: I am Suprabhat from UP, India

// Now we use call() to make 'this' point to person2
introduce.call(person2, "Bihar", "India"); 
// Output: I am Piyush from Bihar, India

What apply() Does

The apply() method does the exact same thing as call(): it executes the function immediately and changes what this points to.

The only difference is how you pass the arguments. Instead of passing them one by one separated by commas, apply() expects you to pass all arguments inside a single Array.

Example:

let person = { name: "Rith" };

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

// We use apply() and pass the arguments in an array: ["West Bengal", "India"]
introduce.apply(person, ["West Bengal", "India"]); 
// Output: I am Rith from West Bengal, India

Things to remember: Apply uses Arrays. Call uses Commas.

What bind() Does

Both call() and apply() run the function immediately. But what if you want to set the this value, but save the function to run later?

This is where bind() comes in. The bind() method does not execute the function right away. Instead, it creates and returns a brand new function with this permanently locked to the object you chose.

Example:

let user = { name: "Suprabhat" };

function sayHi() {
  console.log("Hi, it's " + this.name);
}

// bind() creates a new function where 'this' is permanently locked to 'user'
let boundFunction = sayHi.bind(user);

// We can run it later whenever we want!
boundFunction(); 
// Output: Hi, it's Suprabhat

Summary: Difference Between call, apply, and bind

To keep things clear, here is a simple comparison table of the three methods:

Method	What it does	How to pass arguments	Executes immediately?
call()	Changes this	Comma-separated (arg1, arg2)	Yes
apply()	Changes this	As an Array ([arg1, arg2])	Yes
bind()	Changes this	Comma-separated (arg1, arg2)	No (Returns a new function)

Conclusion

Understanding this unlocks a whole new level of JavaScript programming. Just remember the golden rule: this is determined by who is calling the function. And if you ever need to manually change who is calling it, you now have call, apply, and bind in your toolkit to borrow methods and control your code.