What is THIS keyword in JavaScript? - Part 2
Tags: javascript, webdev
Published: 2020-11-07 13:19:56

> |What is THIS keyword in JavaScript? |
| --- |
| [Part 1 - What is this and it's different types of binding](https://dev.to/heet1996/what-is-this-keyword-in-javascript-part-1-2g9p)|
| [Part 2 - Arrow function and `this` keyword](https://dev.to/heet1996/what-is-this-keyword-in-javascript-part-2-7be)|  

In the previous article, we had discussed what `this` keyword means in general and different types of binding. In this article, we will see what `this` keyword means in the arrow function.

You may have learned that an arrow function does not have their own `this`. Instead, `this` is determined lexically. Let us first understand why do we need `this` to bind itself lexically.

```js
const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: function () {
        this.cars.forEach(function (car) {
            console.log(`${this.name} owns ${car}`);
        })
    }
}

person.showCars();
/*
Output:
undefined owns Aston Martin
undefined owns Maserati
undefined owns BMW
undefined owns Alfa Romeo
*/
```    
If you have understood the previous article then you shouldn't be surprised at seeing "undefined" in the output. I have explained it earlier that `this` will bind itself by default to a global object if there is nothing to the left of the dot (Remember the thumb rule). In `forEach` loop we are passing an anonymous function which is by default bind to a global object when it is invoked. So what we want is to tell `this` inside the callback to refer to parent `this` (which points to `person` object).       
Below is the solution that we can use to avoid such type of behavior without using an arrow function.

```js
const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: function () {
        this.cars.forEach(function (car) {
            console.log(`${this.name} owns ${car}`);
        }.bind(this))
    }
}
person.showCars();
/*
Output:
John Green owns Aston Martin
John Green owns Maserati
John Green owns BMW
John Green owns Alfa Romeo
*/
```
We have bound our callback to the current object (person) so at the time of invocation,`this` will remember that `person` is the object to which I am bind to. So we've seen how `bind` solves the issue then why do we need an arrow function? If the above code is read intuitively then you will expect `this` inside the callback in the `forEach` loop to be bound to the `person` object viz. to its parent context. This is known as lexical binding which is just like variable lookup, the javascript interpreter will look to its parent `this` if it is inside the arrow function.

```js
const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: function () {
   // Here this will bind itself to person object
        this.cars.forEach((car) => {
   /*
   Here this will bind itself to 
   parent which itself is bind to person object 
   */
            console.log(`${this.name} owns ${car}`);
        })
    }
}
person.showCars();
/*
Output:
John Green owns Aston Martin
John Green owns Maserati
John Green owns BMW
John Green owns Alfa Romeo
*/
```  
So once again always remember if you see the `this` keyword inside the arrow function always look up the parent `this`.
Let's see one more interesting example:
```js
const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: () => {
        this.cars.forEach((car) => {
            console.log(`${this.name} owns ${car}`);
        })
    }
}
person.showCars();
```  
If you run the above code you will get an interesting error *`this.cars` is not defined*. Remember you will never use the thumb rule which we had discussed earlier in the previous article to determine the `this` keyword inside the arrow function. 
As we know that `this` is determined lexically inside an arrow function in the above code `this` inside the `showCars` will point to the global object. Since `this.cars` is not defined globally hence it will throw an error. 
That's it! This is all you have to know about `this` keyword in javascript. Also, remember one thing, always keep practicing and keep your fundamentals clear which will help you in the long run.