Understanding “this” keyword in JavaScript

Learn how `this` keyword works in JavaScript

3 min readMay 20, 2022

Introduction

The this keyword in JavaScript is a crucial concept that every developer should understand. Unlike many other languages, this is not bound to a class in JavaScript. Instead, its value is determined at runtime, based on the context in which it is used. In this blog, we will explore how the this keyword works in different scenarios and how to handle common issues related to its usage.

Using “this” keyword in methods

In JavaScript, this keyword stores the reference of the object.

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 stores the reference to the consumer object and logs the description property of the consumer object. Similarly, when producer.printDescription() is called, this refers to the producer object and logs its description property.

Using “this” keyword in functions

this keyword can even be used inside a function without 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 accessed via the this keyword.

window.description = "Description added in window object"function printDescription() {
   console.log( this.description );
}printDescription(); // Output:- Error

In strict mode, this will be undefined, and the above example will throw an error for trying to access the description property on undefined.

No “this” in Arrow functions

Arrow functions do not have their own this. If we use this inside an arrow function, 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, so this inside printDescription has the reference to the consumer object. When the arrow function is called, this is taken from the outer function, which currently has the reference to the consumer object, resulting in the output of the description value stored in the consumer object.

This special feature of arrow functions helps resolve the issue of losing the reference to the 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 consumer calls printDescription is called, this will have the reference of consumer object, 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 functions 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

To retain the reference to the main object inside nested function calls without using arrow functions, you can use an alternative approach.

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 the this keyword in a variable (e.g., that)

Conclusion

In this blog, we’ve explored the different aspects of the this keyword in JavaScript, including its use in methods, functions, arrow functions, and nested function calls. Understanding the behavior of the this keyword in various contexts is essential for writing efficient and maintainable code. By using arrow functions and alternative solutions, you can avoid common issues related to the this keyword and handle different scenarios effectively. Mastering the this keyword will undoubtedly make you a more proficient JavaScript developer.