What is THIS keyword in JavaScript? - Part 2

What is THIS keyword in JavaScript?
Part 1 - What is this and it's different types of binding
Part 2 - Arrow function and this keyword

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.

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.

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.

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:

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.