Understanding the "this" Keyword in JavaScript
If there is one concept in JavaScript that confuses almost everyone at some point, it is the this keyword.
At first, it looks simple. But the moment you start using it in different places, it starts behaving differently. That is where the confusion begins.
The reason is simple. this does not refer to a fixed value. It depends entirely on how a function is called.
Once you understand that one idea properly, everything about this becomes much easier.
What does this represent?
In JavaScript, this represents the object that is calling the function.
Not where the function is written. Not where it is defined.
Only who is calling it.
This is the most important rule to remember.
You can think of it like this:
this= the caller of the function
this in the Global Context
Let’s start with the simplest case.
console.log(this);
In the browser, this refers to the global object, which is window.
So:
this === window // true (in browser)
If you are running this in Node.js, this behaves differently, but the idea remains the same. It refers to the global execution context.
this Inside Objects
Now let’s move to a more practical example.
const user = {
name: "Shikhar",
greet: function() {
console.log(this.name);
}
};
user.greet();
Here, the function greet is being called by user.
So this refers to the user object.
That is why it prints:
Shikhar
This is the most common and most useful use of this.
The Important Shift
Now let’s slightly change how the function is called.
const user = {
name: "Shikhar",
greet: function() {
console.log(this.name);
}
};
const greetFn = user.greet;
greetFn();
Now what happens?
This time, the function is not being called by user.
It is being called independently.
So this no longer refers to user.
Instead, it goes back to the global context.
This is where most people get confused.
The function is the same. But the caller changed.
And because of that, this changed.
this Inside Regular Functions
Now consider a simple function:
function test() {
console.log(this);
}
test();
Here, there is no object calling the function.
So this defaults to the global object.
In strict mode, it becomes undefined.
This is why relying on this inside standalone functions can be risky.
How Calling Context Changes this
This is the core idea of the entire topic.
The value of this is not decided when the function is created.
It is decided when the function is called.
Let’s see this clearly:
const person1 = {
name: "Shikhar",
greet: function() {
console.log(this.name);
}
};
const person2 = {
name: "Rahul"
};
person2.greet = person1.greet;
person2.greet();
Now the output is:
Rahul
Even though the function was originally inside person1, it is now being called by person2.
So this becomes person2.
This proves one thing clearly.
this does not care where the function was defined.
It only cares who is calling it.
Arrow Functions and this
Now let’s look at where things behave differently.
const user = {
name: "Shikhar",
greet: () => {
console.log(this.name);
}
};
user.greet();
This will print:
undefined
Why?
Because arrow functions do not have their own this.
They take this from their surrounding context.
So in this case, this is not the user object.
This is why arrow functions should not be used as object methods.
A Simple Mental Model
If you ever get confused, just ask one question:
Who is calling the function?
That is your answer for this.
You can visualize it like this:
caller → function → this
Wherever the call comes from, this follows it.
Real-World Example
const car = {
brand: "Toyota",
showBrand: function() {
console.log(this.brand);
}
};
car.showBrand();
Here, car is calling the function.
So this.brand refers to "Toyota".
Now imagine this being used in UI code, backend logic, or APIs.
This pattern is everywhere.
Common Mistakes
One of the most common mistakes is assuming that this is fixed.
It is not.
Another mistake is using arrow functions inside objects and expecting this to behave the same way.
It will not.
And finally, extracting methods and calling them separately without realizing that the caller has changed.
Final Thought
The this keyword is not complicated. It is just misunderstood.
Once you stop thinking about where the function is written and start focusing on how it is called, everything becomes clear.
this is not about the function. It is about the caller.
