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.

Only var can be defined as part of the window (global object), let and const not attached to the global object (window) and remains undefined 

⚠️ In 'use strict' mode this doesn't map to window object and remains undefined.

var name = 'Random';
let car = 'BMW';
const city = 'jaipur';

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

console.log(this.name, this.car, this.city); 
// Random undefined undefined

console.log(this.name, car, city); 
// Random BMW jaipur

Rule 2: Function Context

Inside a function, the value of this depends on how the function is called. Let's go through the 2 cases to understand this rule.

Case 1: If the function is called as a method of an object, this refers to the object.

Case 2: In case function is called in global object, this refers to the global 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 as described in step 1, 
 "this" maps to windows in global context,
 Code tries to find the name in global context, but doesn't find 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 own "this" 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."

Further Reading

1. Best resources to prepare for JavaScript Interview
2. JavaScript Essentials: Call, Apply and Bind Methods Explained with Polyfills
3. 20+ Frontend Machine Coding Round Interview Questions