Mastering the "this" Keyword in JavaScript: A Clear Guide

The most confusing part of JavaScript is the this keyword. You will understand what this really is and how its value changes, and you will see practical examples you can remember. Think of this as the owner of the function. It is a special keyword that always points to the current context.

Understanding the JavaScript this Keyword

this points to the parent or context of the function that is holding it. The value depends on how and where the function is called.

JavaScript this Keyword in Object Methods

Create an object with a property and a method that uses this.

Call the method to see how this points to the object that owns the method.

const person = {
  name: 'Alice',
  greet() {
    console.log(`Hi my name is ${this.name}`);
  }
};

person.greet();
// Output: Hi my name is Alice

Here, the function holding this is `greet`. The parent or context of `greet` is the `person` object. That is why `this.name` returns `Alice`.

JavaScript this Keyword in a Standalone Function

If a function is not inside any object and you log this, it will take you outside of that function. Outside the function in a browser you have the global object, which is `window`.

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

showThis();
// Output in a browser: window { ... }

The function holding this is `showThis`. It does not have a parent object, so this refers to the global object.

JavaScript this Keyword in Nested Functions Inside a Method

If you define an inner function inside a method and use this inside the inner function, you may not get the object’s properties. Write a method with an inner regular function that logs `this.name`, then call the method.

const person = {
  name: 'Alice',
  greet() {
    function inner() {
      console.log(`Hi my name is ${this.name}`);
    }
    inner();
  }
};

person.greet();
// Output: Hi my name is

The this inside `inner` is not the same as the this inside `greet`. The inner regular function has its own this, and it stops at the function that holds it. The `greet` function does not have a `name` property, and it does not go to `person` in this case.

Fixing It With Arrow Functions

You can fix this by making the inner function an arrow function. The key concept is that arrow functions do not have their own this. Replace the inner function with an arrow function and call it.

const person = {
  name: 'Alice',
  greet() {
    const inner = () => {
      console.log(`Hi my name is ${this.name}`);
    };
    inner();
  }
};

person.greet();
// Output: Hi my name is Alice

Because arrow functions do not have this, the function that is holding this is actually `greet`, and the parent of `greet` is `person`. That is why `this.name` correctly resolves to `Alice`.

Final Thoughts on the JavaScript this Keyword

this points to the current context and changes based on how the function is called. In an object method, this refers to the object. In a standalone function, this refers to the global object in a browser. In nested regular functions, this does not automatically refer to the outer method’s object, but using an arrow function allows this to resolve through the outer scope and return the expected value.

Mastering the “this” Keyword in JavaScript: A Clear Guide