this keyword in javascript

The this keyword refers to an Object on which we call our function.

This line explains the full functionality of this keyword. So instead of going theoretically we will understand it by using examples.

object1.getUsername();

here you can see getUsername() function is calling from the object1. Now if you will read the definition of this you will be able to understand whats that mean. It means  getUsername() function is called from the object1 means it will refer object1. Therefore the value of this inside the getUsername() will be object1.

For simplicity you just need to remember the position of dot(.). Means whatever the things is there before the dot(.). So that is the value of “this” only inside our function.

Similarly let’s see example2

object2.getAge();

Here getAge() function is called from the object2. Hence the value of this will be object2 inside the getAge() function.

Let’s understand it practically. Suppose we have below code –

function getAge() {
  console.log('25',this);
}
getAge();

Output: 

In the above example you can see we have called getAge() function. And before getAge function there is nothing written before the dot. Most of the time we are calling function as it is. When we call the function as it is then value of this  will be be window object. Internally by default window will be there if nothing is before the dot. We don’t need to explicitly add it.

It will look like this –

window.getAge();

Thats why if you will see the output screenshot , there value of this is showing as window object.

Now let’s see the another example-

let object1 = {
  getAge : function () {
    console.log(35, this);
  }
}

Here getAge() function is inside the object1. So to call this function we need to write the below code –

object1.getAge();

Output: 

In output you can see that value of this is displaying  as object. because object1 is having getAge() function. which is exactly we can see in the output.

Now let’s take another example where we will call the same function from different objects.

function getUsername() {
  console.log(this.name);
}

let object1 = {
   name: "John",
   getUsername: getUsername
}

let object2 = {
   name: "Smith",
   getUsername: getUsername
}

object1.getUsername();
object2.getUsername();

Output: 

As you can see in the above example there are two objects created object1 and object2. And getUsername() function is called from both the objects. So object1.getUsername() will print “John” because object1.getUsername() refers to the name which belongs to object1 and object2.getUsername() will print “Smith” object2.getUsername() refers to the name which belongs to object2.

So it’s totally depends on how we are calling the function. So “this” keyword  gives a function access to object in which it is defined. So with the help of this keyword  we are able to reuse the same function in different objects as well as in window object.

Let’s use  getUsername( ) function in window object. So it will be like this –

var name = "Alex";
getUsername();

Output: "Alex"

As we have discussed earlier this time this will refer the window object as there is nothing before the dot. So by default it will be window. And internally it will be written as  window.getUsername().

So basically value of this is dynamic. Its value is dynamically changes based on how we are calling the function. It does not depend on where the function is defined.

This all the things which we have seen till now is based on regular function.Now let’s see how this behaves in case of arrow function.

In case of arrow function its just opposite from the previous one. Here value of this depends on where the function is defined not on how we are calling it. Lets see one example –

const object3 = {
  pirce: 30,
  setPrice : function () {
     console.log("set" , this);
     var getPrice = ()=> {
         console.log("get", this);
     }
     getPrice();
  },
}

object3.setPrice();

Output: 

So you can see in the output for the method getPrice() which is an arrow function , this refers to an object3 because it defined inside the object3. If we will keep getPrice() function outside the object3 in that case it will refer the window object.

var getPrice = ()=> {
  console.log("get", this);
}

getPrice();

Output: 

So you can see it is referring the window object.

Conclusion:  So it is all about the this keyword. And it behaves differently with regular function and arrow function. In regular function it’s value depends upon how we have called the function. And in arrow function its value depends upon where we have defined the function. I hope you enjoyed this article.