Understanding the this Keyword in JavaScript

If there’s one concept in JavaScript that quietly confuses almost every developer at some point, it’s the this keyword.

At first glance, it looks simple. You see it inside objects, inside functions, and it seems like it should always refer to the same thing. But then you run into situations where the same function behaves differently depending on how it’s used. That’s where the confusion begins.

The important thing to understand is that this is not fixed. It doesn’t depend on where the function is written. Instead, it depends entirely on how the function is called at runtime. Once you understand this idea, most of the mystery around this starts to disappear.

What does this represent?

The simplest way to think about this is:

this refers to the object that is calling the function.

This means you should stop looking at where the function is defined and instead focus on how it is being invoked. Two identical functions can produce completely different results if they are called by different objects. That’s the key idea that drives everything else.

this in the global context

Let’s start with the simplest case. When you use this in the global scope:

console.log(this);

In a browser environment, this will log the window object. In Node.js, it typically logs an empty object.

This happens because, in the global context, JavaScript automatically assigns this to the global object. There is no explicit caller here, so the environment provides a default.

While this behavior is straightforward, it’s not where most confusion happens. Things get more interesting when functions and objects come into play.

this inside objects

Now consider an object with a method:

const user = {
  name: "Dnano",
  greet() {
    console.log(this.name);
  }
};

user.greet();

When you run this code, it prints "Dnano".

Here, the reason is simple. The greet method is being called using user.greet(). That means the object user is the one calling the function. As a result, this inside greet refers to the user object.

This is usually the first place where this feels intuitive. You see the object, you call its method, and this correctly points back to that object.

this inside functions

Now let’s look at a regular function:

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

show();

This is where behavior starts to feel inconsistent.

In this case, the function is not being called by any object. It’s just a plain function call. Because there is no explicit caller, JavaScript falls back to its default behavior.

In non-strict mode (like in browsers), this will refer to the global object (window).
In strict mode, however, this will be undefined.

This difference often surprises developers, especially when they expect this to behave consistently everywhere.

How calling context changes this

To really understand this, you need to see how the calling context affects it.

const user1 = {
  name: "A",
  greet() {
    console.log(this.name);
  }
};

const user2 = {
  name: "B"
};

user2.greet = user1.greet;

user2.greet();

At first glance, it might seem like this should print "A" because the function originally belonged to user1. But that’s not what happens.

Instead, the output is "B".

The reason is that the function is now being called as user2.greet(). Even though the function was defined inside user1, the caller is now user2. Therefore, this points to user2.

This example clearly shows that functions do not carry their original this with them. The value of this is decided at the moment the function is called, not when it is created.

One key takeaway

If you remember just one thing, make it this:

this is determined by how a function is called, not where it is written.

Final thought

Whenever you find yourself confused about this, don’t try to trace the function definition or overthink the code structure.

Instead, pause for a second and ask:

“Who is calling this function?”

That single question will almost always lead you to the correct answer.