5 Ultimate Rules to master this keyword in JavaScript

"This" keyword is a very important concept to understand for any JavaScript Interview. 'this' keyword behaves differently in different contexts, so it is important to understand those contexts & how to know "this" value in each context.

5 Ultimate Rules to master 'this' keyword

Here are 5 examples that cover all different behaviour of the "this" keyword in JavaScript:

Rule 1: Global Context

In the global context (outside of any function), this refers to the global object, which is the window object in a browser environment.

console.log(this === window); // true

Rule 2: Function Context

Inside a function, the value of this depends on how the function is called. If the function is called as a method of an object, this refers to the object.

let obj = {
    name: 'Alice',
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

// Case 1: How function called - with object context
obj.greet(); // "Hello, my name is Alice"

// Case 2: How function called - with window context, like window.globalFunc
const globalFunc = obj.greet;
// globalFunc invokes greet() in global context and "this" maps to windows,
// but there is no name in global object so return undefined.
globalFunc(); // "Hello, my name is"

Rule 3: Constructor Context

When a function is used as a constructor (i.e., called with the new keyword), this refers to the newly created object.

function Person(name) {
    this.name = name;
}
let alice = new Person('Alice');
console.log(alice.name); // "Alice"

Rule 4: Explicit Binding using call, apply or bind

The value of this can be explicitly set using the call, apply, or bind methods.

function greet() {
    console.log(`Hello, my name is ${this.name}.`);
}
let alice = {name: 'Alice'};
greet.call(alice); // "Hello, my name is Alice."

Rule 5: Arrow Functions

Arrow functions do not have their value. Instead, they inherit this from the enclosing lexical scope means parent lexical scope.

let obj = {
    name: 'Alice',
    greet: () => {
        console.log('Hello, my name is', this.name);
    }
};
obj.greet(); // "Hello, my name is undefined."