JS Basics: All about ‘This’ keyword.

Hi folks,

This keyword has always been a topic of confusion for most of the developers and I can say I was always one of them! After doing a good reading on this part, I thought of sharing my understanding with others as well.

The basic function of this keyword is to store the current execution context of the program. In simple words, it refers to the object that is executing the current function. As it stores the current execution context, it starts getting confusing because its value will vary based on execution of the function (function's execution context) and on strict or non-strict mode.

In this article I have divided this keyword into different use cases. Let’s go through it one by one and understand this in a better way possible.

• If this is called in a global scope, it will always refer to the window object in both strict and non-strict mode. For e.g.

let x;
function printX() {
    //some code for function
}
console.log(this); 
// As this is called in global scope, it will always point to the window object.

• If this is called in a function which is a part of object, it will refer to that object. This will remain same for strict mode.

let obj = {
    x: 10,
    y: 20,
    add: function() {
        console.log(this.x + this.y)
                // This here will point to the obj object 
                   here, as function add is a method of object 
                   obj.
        }
}
obj.add() 
// It will print 30, as x and y are taken from the obj object.

• If this is called from a regular function, it will always refer to a global object i.e window object. But in case of strict mode, if the value of this is not defined, it will return undefined.

You can learn more about the javascript strict mode from my previous article

function y() {
    console.log(this)
}
y(); 
// As program is not running in strict mode and this is a regular function, this will refer to the window object

• If this is called from a constructor function, it will refer to its outer function for normal function and to window object for arrow functions. It will not be the case in strict mode, it will be undefined, as this keyword will work same in functional as well as class component.

function y(title) {
    this.title = title;
    console.log('y:', this);
    function x() {
        console.log('x', this);  
                // This will refer to window object as it is 
                   called from regular function and this is 
                   not set
    }
    let z = () => {
        console.log('z:', this);
                // This will refer to this object inside y as 
                at the time of creation of arrow function z, 
                this was already set to function y.
    };
    x();
    z(); 
}
// Here, this will return {title: ok}, as this is defined. If it is not defined it will return window object 
let p = new y('ok'); 
// Here, when a new operator is used, it will create a blank object {} as a scope and this keyword will start referring to that new blank object.

• If you are using call, apply or bind methods to attach the scope of this keyword, then the object on which the methods are attached or bound, this will refer to them.

let obj1  = {
    x: 10,
    printX: function() {
    console.log(this.x)
}
 }

let obj2 = {
    x: 20
}

obj1.printX.call(obj2)
// here, due to call method, this inside the printX() method will refer to the obj2 object.

• If you are using this inside arrow function, it will refer its outer scope at the time of arrow function creation

this.x = 10;
let y = () => {
    console.log(this) 
// this will refer to {x: 10} as it was the outer scope at the time of creation of this arrow function
};
y();

That’s all about this keyword. There is one more article on this topic which has the cleanest ever explanation about this, do check that out.

I have tried covering all the possible use cases for this keyword. If you encounter any further use-cases do share them in comments.

You can also connect with me on Twitter or buy me a coffee if you like my articles.

Keep learning :)