Understanding the this keyword in JavaScript

If you’ve been writing JavaScript for a while, you’ve definitely come across this keyword. At first it feels confusing because sometimes it points to one thing and sometimes to something completely different. The important thing to understand is that this is not fixed, it depends on how a function is called. That is the core idea, this represents the caller of the function, not where the function is written.

Once this clicks, most of the confusion around this goes away. So instead of trying to memorize cases, it is better to focus on one simple idea, who is calling the function, that is what this will point to.

What "this" represents

"this" represents the object that is calling the function. It is decided at runtime, not at the time of writing the code. That is why the same function can behave differently depending on how it is called.
So if a function is called by an object, this points to that object. If it is called directly, then this depends on the environment.

this in global context

In the global scope, this behaves differently depending on where the code is running. In browsers, if you are in non strict mode, this refers to the global object which is window. In Node, it is different, but for simplicity, think of it as the global object in that environment.

console.log(this);

If you run this in a browser, you will see the window object.

this inside objects

When a function is defined inside an object and called using that object, "this" points to that object. This is one of the most common use cases.

const user = {
  name: "Gaurang",
  greet: function () {
    console.log("Hi, I am " + this.name);
  }
};

user.greet();

Here greet is called using user, so "this" points to user. That is why this.name gives "Gaurang".

this inside functions

Now this is where confusion usually starts. When a function is called normally, not attached to any object, "this" does not point to any custom object.

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

show();

In non strict mode in browsers, "this" will point to window. In strict mode, it will be undefined. So again, there is no object calling this function, that is why "this" does not point to something meaningful here.

How calling context changes this

This is the most important part. The value of "this" changes based on how the function is called, not where it is defined.

const person = {
  name: "Virat",
  greet: function () {
    console.log(this.name);
  }
};

person.greet();

Here "this" points to person because person is calling greet.

Now if we take the same function and call it differently:

const person = {
  name: "Virat",
  greet: function () {
    console.log(this.name);
  }
};

const greetFunction = person.greet;
greetFunction();

Now the function is called without person, so "this" will not point to person anymore. In browser non strict mode, it will point to window, and since window.name is usually empty, it will not give "Virat".

This clearly shows that this depends on the calling context.

Another simple example

const player = {
  name: "Bumrah",
  role: "Bowler",
  introduce: function () {
    console.log(this.name + " is a " + this.role);
  }
};

player.introduce();

Here "this" refers to player, so the output is based on player’s data.

If the same function is used somewhere else without the object, the value of "this" changes.

Final clarity

The main idea is simple and everything revolves around it. "this" represents the caller of the function. It is not about where the function is written, it is about how the function is called. In object methods, "this" points to the object. In normal function calls, it depends on the environment. And if the calling context changes, the value of this also changes.

Once you start looking at this as caller based, the confusion reduces a lot and it becomes much easier to predict what this will be in any given situation.