When I first encountered this in JavaScript, it was honestly confusing. Sometimes it referred to an object, sometimes it didn’t, and sometimes it behaved differently depending on how a function was called.

After spending some time understanding it, I realized there is a very simple way to think about this.

👉 this basically means “who is calling the function.”

In this article, I’ll explain:

• What this means in JavaScript

• this inside normal functions

• this inside objects

• What call(), apply(), and bind() do

• The difference between them

Let’s start with the basics.

---

What this Means in JavaScript

In JavaScript, the value of this depends on how a function is called.

A simple way to understand it is:

this refers to the object that is calling the function.

Think of it like this:

• If an object calls a function → this refers to that object

• If no object calls it → this may refer to the global object (or be undefined in strict mode)

Let’s look at some examples.

---

this Inside Normal Functions

First, let’s see what happens when we use this inside a regular function.

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

showThis();

Here we are calling the function directly.

Since no object is calling the function, this usually refers to the global object (in browsers it is window).

So the important idea is:

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

---

this Inside Objects

Now let’s see how this behaves inside an object.

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

person.greet();

Output:

Hello, my name is Dipan

Why does this work?

Because the function is being called by the person object.

So inside the function:

this = person

Which means:

this.name → person.name

That’s why we get "Dipan".

This is one of the most common uses of this in JavaScript.

---

What call() Does

Sometimes we want to manually decide what this should be.

That’s where call() comes in.

call() allows us to call a function with a specific object as this.

Example:

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

const user = {
  name: "Dipan"
};

greet.call(user);

Output:

Hello Dipan

What happened here?

• We used call() to execute greet

• We passed user as the value of this

So inside the function:

this = user

---

call() with Arguments

call() can also pass arguments.

function introduce(age, city) {
  console.log(this.name + " is " + age + " years old and lives in " + city);
}

const person = { name: "Dipan" };

introduce.call(person, 22, "Siliguri");

Output:

Dipan is 22 years old and lives in Siliguri

---

What apply() Does

apply() is very similar to call().

It also lets us set the value of this manually.

Example:

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

const user = { name: "Dipan" };

greet.apply(user);

Output:

Hello Dipan

So what’s the difference?

The difference is how arguments are passed.

With apply(), arguments are passed as an array.

Example:

function introduce(age, city) {
  console.log(this.name + " is " + age + " years old and lives in " + city);
}

const person = { name: "Dipan" };

introduce.apply(person, [22, "Siliguri"]);

Notice the arguments are inside an array.

---

What bind() Does

bind() is slightly different.

Instead of calling the function immediately, bind() creates a new function with a fixed this value.

Example:

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

const user = { name: "Dipan" };

const greetUser = greet.bind(user);

greetUser();

Output:

Hello Dipan

Here’s what happened:

1. bind() created a new function

2. That function permanently uses user as this

3. We call the new function later

So:

• call() → calls immediately

• apply() → calls immediately

• bind() → returns a new function

---

Difference Between call, apply, and bind

Here’s a simple comparison table.

Method	When it runs	How arguments are passed
call()	Runs immediately	Arguments passed one by one
apply()	Runs immediately	Arguments passed as an array
bind()	Returns a new function	Arguments passed one by one

Example summary:

fn.call(obj, arg1, arg2);

fn.apply(obj, [arg1, arg2]);

const newFn = fn.bind(obj);
newFn();

---

A Simple Way to Remember

Here’s a quick mental trick I use:

• call() → Call the function immediately

• apply() → Apply arguments as an array

• bind() → Bind the function for later use

---

Understanding this becomes much easier once you remember one simple rule:

👉 this depends on who is calling the function.

And when we want to control it ourselves, we can use:

• call() → call function with custom this

• apply() → same as call but arguments in an array

• bind() → create a new function with fixed this