this keyword in JavaScript

The this keyword is one of the most misunderstood concepts in JavaScript, but the core idea is simple. The value of this depends on how a function is called, not where it is written. It represents the current execution context, meaning the object that is invoking the function at that moment.

What `this` represents

this refers to the object that is currently executing the function. It is determined at runtime, so the same function can have different values of this depending on how it is called.

`this` in global context

In the global scope:

console.log(this);

In the browser, this will refer to the window object. In Node.js, it typically refers to an empty object or the global object depending on the environment. The idea is that when there is no specific caller, this defaults to the global context.

`this` inside objects

When a function is called as a method of an object, this refers to that object.

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

user.greet();

In this case, this refers to user, so the output is "Alexa". The object before the dot decides what this is.

`this` inside functions

When a normal function is called on its own, it does not have an owner object.

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

greet();

In the browser, this will refer to the global object. In strict mode, it will be undefined. This happens because the function is not being called by any object. And in node.js we'll get reference to global object, similarly undefined in strict mode.

Arrow function behaviour

Arrow functions behave differently because they do not have their own this. Instead, they inherit this from the surrounding scope.

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

user.greet();

Here, this does not refer to user. It refers to whatever the surrounding context is, which is usually the global scope, so the result is undefined.

How calling context changes `this`

The most important thing to understand is that this changes based on how a function is called.

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

const user2 = {
  name: "Sam"
};

user2.greet = user1.greet;

user2.greet();

Even though the function was originally defined in user1, when it is called using user2, this refers to user2, so the output is "Sam".

Another example:

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

const fn = user.greet;
fn();

Here, the function is called without an object, so this becomes undefined (or global in non-strict mode), and the result is not what you might expect.

Final understanding

The value of this is not fixed. It is determined by how a function is called. In the global context, it refers to the global object. Inside object methods, it refers to the object calling the method. Inside normal functions, it defaults to global or undefined depending on strict mode. Arrow functions do not have their own this and instead inherit it from their surrounding scope. Once you focus on how a function is invoked, understanding this becomes much clearer.

Understanding the 'this' Keyword 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

What `this` represents

`this` in global context

`this` inside objects

`this` inside functions

Arrow function behaviour

How calling context changes `this`

Final understanding

Command Palette

Comments

More from this blog

What this represents

this in global context

this inside objects

this inside functions

Arrow function behaviour

How calling context changes this

Final understanding

What `this` represents

`this` in global context

`this` inside objects

`this` inside functions

How calling context changes `this`