"this" keyword in JavaScript
Tags: javascript, this, programming, beginners
Published: 2023-01-18 04:45:20

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.