"this" keyword in JavaScript

In JavaScript, this keyword stores the reference of the object. Unlike in many other languages this is not bounded to a class in JavaScript, it's value is being evaluated during the run-time.

this keyword take the reference of the object who is calling the method.

const consumer = { description: "Consumes Something" }
const producer = { description: "Produces Something" }

function printDescription() {
   console.log( this.description );
}

// Same printDescription function is being used in both the Objects
consumer.printDescription = printDescription;
producer.printDescription = printDescription;

consumer.printDescription(); // Output:- "Consumes Something"
producer.printDescription(); // Output:- "Produces Something"

In the above example, when consumer.printDescription() is called , this will store the reference of the object who is calling the method, which is consumer in this case and it will give the description provided in the consumer object. Similarly when producer.printDescription() is being called, this will refer to the producer object and console "Produces Something".

Using "this" keyword in function

this keyword can even be used inside a function without using an object

function printDescription() {
   console.log( this.description );
}

printDescription(); // Output:- undefined

In non-strict mode, value of this in such cases will be the global window object and properties existing on the window object can be accessible via this keyword.

window.description = "Description added in window object"

function printDescription() {
   console.log( this.description );
}

printDescription(); // Output:- "Description added in window object"

While in strict mode, this will be undefined and above example will give an error for trying to access description on undefined.

No "this" in Arrow function

Arrow function do not have their own this, If we use this inside the arrow function, then it is taken from the outer function.

const consumer = {
   description: "Consumes Something",
   printDescription: function () {
       const arrow = () => { console.log(this.description) }
       arrow();
   }
}

consumer.printDescription(); // Output:- "Consumes Something"

In the above example, consumer calls the printDescription method, because of which this inside the printDescription will have the reference of consumer object.

In printDescription method, when arrow function is being called, this will be taken from the outer function which currently has the reference of "consumer" object and it will result in the description value stored inside consumer object.

This special feature of arrow function helps in resolving the issue of losing reference of this keyword in case of nested function calls.

const consumer = {
   description: "Consumes Something",
   printDescription: function () {
       function fn() { console.log(this.description) }
       fn();
   }
}

consumer.printDescription(); // Output:- undefined

When printDescription is called, this will have the reference of consumer object, because consumer is calling the printDescription method, but inside the fn function in printDescription method, this will have the reference of global window object because no other object is calling the fn function which is similar to the case which we discussed above in Using "this" keyword in function section.

This will lead to losing the reference of consumer object in the nested function call, which can be resolved with the help of arrow function.

Alternative solution for losing "this" keyword in nested function calls

There is an alternative solution to keep the reference of main object inside the nested calls without the use of arrow functions.

const consumer = {
   description: "Consumes Something",
   printDescription: function () {
       const that = this;
       function fn() { console.log(that.description) }
       fn();
   }
}

consumer.printDescription() // Output:- "Consumes Something"

We can store the value of this keyword in some variable and use that variable inside the nested function call in place of this keyword.