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

In this article we'll learn about one of most important topics of JavaScript. These are the topics that help you crack the interview and write good and efficient code as a developer. We'll be discussing this keyword, call(), apply() and bind() with simple explanation and examples.

this keyword in JavaScript

When learning JavaScript, one thing that confuses many beginners is the this keyword. At first it looks mysterious. But once you understand the idea, it becomes much easier. Let’s break it down step by step.

Always remember that thisalways refers to the current context. By context I mean who is calling "this".

Let's take simple a non-tech example

If Alice says:

I am a developer

“I” refers to Alice.

If Bob says:

I am a developer

“I” refers to Bob.

JavaScript works in the same way.

this inside a normal function

In a normal function, this usually refers to the global object. In browsers, the global object is window. And in nodejs the global object is different.

Example:

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

showThis();

Output (in browser):

Window {...}

Why?

Because no object called the function, so JavaScript defaults to the global object. Here it is very important to note that where your are running the code. Because the environment decides the current context and as I mentioned earlier that this points to the current context.

this inside an object

When a function is inside an object, this refers to that object.

Example:

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

person.greet();

Output:

Hi, my name is Alex

Why?

Because person called the function.

So:

this = person

What does call() do?

call() lets you borrow a function and choose what this should be.

Imagine your friend has a car, and you say:

“Can I use your car for a minute?”

That’s what call() does.

Example:

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

const user = {
  name: "Shreya"
};

introduce.call(user);

Output:

Hello, I am Shreya

Here we manually set this to user. It is a really cool concept.

What does apply() do?

apply() is almost the same as call(). The only difference is how arguments are passed. apply() takes array as its arguments .

Example:

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

const user = {
  name: "Ram"
};

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

Output:

Ram lives in Delhi, India

What does bind() do?

bind() creates a new function with a fixed this value.

Think of it like permanently assigning ownership.

Example:

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

const user = {
  name: "Amany"
};

const newFunction = greet.bind(user);

newFunction();

Output:

Hello Amany

bind() does not run immediately. It returns a new function.

Easy way to remember

Think of them like borrowing tools.

call() :

Use the tool right now

apply() :

Use the tool right now but give items in a box (array)

bind() :

Take the tool home and use later

Final Thoughts

Understanding this, call(), apply(), and bind() is very important in JavaScript because they control how functions behave with different objects.

At first it may look confusing, but remember this simple rule: this depends on who is calling the function.