Understanding the '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.