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.

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

Comments

More from this blog

How Instagram Stores Reels, Photos, and Drafts Behind the Scenes

How WhatsApp Works Without Internet: Offline Messaging and Sync Explained

Expo Router vs React Navigation - Which One Should You Use in 2026?

How Instagram, WhatsApp, Uber & Netflix Would Be Built Today Using Expo Router

How React Virtual DOM works under the hood

`this` keyword in JavaScript

`this` inside a normal function

`this` inside an object

What does `call()` do?

What does `apply()` do?

What does `bind()` do?

Easy way to remember

Final Thoughts

Command Palette

Comments

More from this blog

this keyword in JavaScript

this inside a normal function

this inside an object

What does call() do?

What does apply() do?

What does bind() do?

Easy way to remember

Final Thoughts

`this` keyword in JavaScript

`this` inside a normal function

`this` inside an object

What does `call()` do?

What does `apply()` do?

What does `bind()` do?