Understanding 'this' keyword in JavaScript

Let's be honest, this keyword is one of the confusing topics in JavaScript. It is quite different than most of the languages, even I was confused about the same but after quite a bit of learning and understanding of the famous 'this' keyword I can say what 'this' refers to in a JavaScript file.

This blog is heavily inspired by a YouTube video from a channel called RoadsideCoder. There is a JavaScript interview series going on in this channel and I recommend everyone to checkout the same.

Basically the 'this' keyword is used to refer something, by something it can be used mostly to reference an object and the reference of the this keyword depends on the context.

So now let's look at some of the different contexts where 'this' keyword is being referenced to.

Global Context

this.name = 'KR$NA';
console.log(this.name); //KR$NA

Here the 'this' keyword is pointing to the global object, if you go to the console and just type 'this', you can find the name variable inside it.

'this' in normal function

this.name = 'KR$NA'
function sayMyName() {
    console.log(this.name);
}
sayMyName(); //KR$NA

Here the 'this' keyword again points to the global object which is currently the parent object of the function.

'this' in an object

const rapper = {
  firstName: 'Krishna',
  lastName: 'Kaul',
  stageName: 'KR$NA',
  sayMyName: function () {
    console.log(this.firstName);
  },
};

rapper.sayMyName(); //Krishna

Here the 'this' keyword points to the parent object of the function and the parent object in this case is the rapper object.

When a function is invoked with the dot notation, the object to the left of the dot is what the 'this' keyword refers.

The above sentence can be inferred by taking the object example, while calling the function which resides inside the object, we used a dot operator to call the function and this type of function invocation is called Implicit binding.

'this' in a nested object

const rapper = {
  firstName: 'Krishna',
  lastName: 'Kaul',
  stageName: 'KR$NA',
  newRapper: {
    newName: 'krsna,
    sayMyName: function () {
      console.log(this.newName);
    },
  },
};

rapper.newRapper.sayMyName(); //krsna

Here the 'this' keyword points to the immediate parent object of the function and the immediate parent object in this case is the newRapper object.

Again even here the sayMyName function is being invoked with a dot operator and the object to the left of the dot is what 'this' refers to.

'this in an arrow function'

The 'this' keyword value of the arrow function comes from the parent normal function, if there is no parent normal function then it will point to the global object.

There are three different scenario's here:

When an arrow function is being used outside of an object (basically in the global scope)
```
this.name = 'KR$NA'
const sayMyName=()=> {
  console.log(this.name);
}
sayMyName(); //KR$NA
```
Since there is no parent function, here the 'this' keyword points to the global object.
When an arrow function is being used inside an object

this.name = 'Krsna'
const person = {
  firstName: 'Krishna',
  lastName: 'Kaul',
  stageName: 'KR$NA',
  sayMyName: ()=>{
    console.log(this.name);
  },
};

person.sayMyName(); //Krsna

Again here the 'this' keyword will point to the global object since there is no parent normal function associated with the arrow function.

When an arrow function is being wrapped around a normal function and then being used inside an object.

const rapper = {
  firstName: 'Krishna',
  lastName: 'Kaul',
  stageName: 'KR$NA',
  sayMyName: function(){
    const nestedArrow = ()=> console.log(this.firstName);
    nestedArrow()
  },
};

person.sayMyName(); //Krishna

Finally here the 'this' keyword value of the arrow function comes from the parent normal function and the parent normal function's parent is the rapper object.

'this' inside a class

class Rapper {
     constructor(stageName){
        this.stageName = stageName
     }

     sayMyName(){
        console.log(this.stageName)
     }

}

const rapper1 = new Rapper('KR$NA')
rapper1.sayMyName() //KR$NA

Inside of a class the 'this' keyword points to the object inside of the constructor.

When a function is invoked using the new keyword, within the function the ‘this’ keyword will always refer to an empty object.

The above sentence can be inferred by taking the class example, while calling the constructor function with the new keyword, within the function the ‘this’ keyword will always refer to an empty object and this is called new binding.

'this' inside call, apply and bind

Here I will be just showing an example with the call method, the 'this' keyword behaves the same with apply and bind.

const rapper= {
  firstName: 'Krishna',
  lastName: 'Kaul',
  stageName: 'KR$NA',
};

function sayMyName() {
  console.log(this.firstName);
}

sayMyName.call(person);

When a function is invoked using the call method (which specifies the context), the first argument of the call method will refer to the ‘this’ keyword.

The above sentence can be inferred by taking the object example, while calling the function which resides outside the object, we used a method called call and passed the rapper object and this type of function invocation is called Explicit binding.

So these were the different contexts in which the 'this' keyword behaves in JavaScript.

Hope this added some value to your JavaScript knowledge.

Thanks for reading this article. 😃

siemen_subbaiah