So this?, some would say the most confusing, and I would agree it's a little trickier to understand especially for new javascript developers. So let’s dig into this topic and find out what this is really all about. Although it looks intimidating this isn’t that hard, because all that it means and all the concept building which we are going to do in this blog will be by playing with this definition about this below :

this belongs to the object of which the function is the property or method of

So what does the above definition about this actually means? Let’s start understanding it with a piece of code below:

obj.somefunction(this)

this belongs to the object of which the function is the property of simply means that we have an object which in the above code is obj which has somefunction() as a property or method of that object and inside of this function we have access to this keyword. And this refers to the object which is obj and function is a method inside this object Still, confused by this? Let’s look at another example. First, let’s open up our developer console in the browser and write this.

Now in our browser console this is referring to the window object because this gets set in our execution context as window's object initially. Consider the code below :

function a(){console.log(this)}
a()

In the above code if i run a() what do you think the answer would be?

Well we get a window object once again this is equal to the window object and why is that ? Remember our definition of this this belongs to the object of which the function is the property or method of so that means we are running something like this window.a() so in that case what is the object that the function is the property of well the answer would be window is the object of which a() which is a function is the property of window which is an object so if we understand that then my question from you would be what is this in this context? Well, that’s easy now the window is this right? And this should make sense right? But here is the problem, when it comes to coding most of the time we don’t want this to refer to the global object of a window but obviously this happens all the time. And as we would see later on one of the pitfalls is that we unexpectedly refer this to the global object window when we think it should be something else. Let’s consider another example :

function b(){ 'use_strict' console.log(this) }
b()

In the above code if we run b() in the browser console we will get undefined as the use of use_strict in the code restricts this to refer to the global object of the window.

Now I know you are still confused so let’s give a better example. Recall what happens in our global execution context as when our code runs for the first time and a global execution context is created in that context we get this out of the box which refers to the window object but also if we have new function then we have a new this again for that function as on every new function call a new execution context is created in javascript which provides a new this for that function. So let's look at an example where this is actually useful.

const obj ={
name:'Billy',
sing: function(){
return 'How are you Billy';
}
}

In the above code we have an object obj which has property name and a method sing and inside sing function we have to return How are you Billy or use the name property which is equal to Billy but how can we do that. That is inside of the sing function in the object obj how can we access the name property and the make sing function sing How are you Billy I mean we could write How are you Billy like this (return ‘How are you Billy’) but what if the name property value changes to Jessica now we also would have to change (return ‘How are you Veronica’) instead we can simply use this keyword and write code below :

const obj ={
name:'Veronica',
sing(){
return 'How are you' + this.name;
}
}

Because remember this refers to the object obj with function sing() as its method or property. In that case, we can also say obj.name instead of this.name but obviously obj.name would not work in here so we have to use this.name. Looking at the example above if we run obj.sing() it would give us:

So now even if we change the value of the property name we don’t have to change anything in the return value of the function. If we assume that everything is clear by now I would like to share a rule of thumb that I usually use to identify the value of this in the code. Looking at the code above in obj.sing() where obj is the object which is calling the function sing, therefore, this refers to whatever is on the left side of the .sing() which is in our case is the object obj, therefore, this is referring to the obj of which the function sing is the property of. Remember with objects we can access the function and properties of that object so in this case, since this refers to the object obj we can access the methods and properties of the obj like sing and name. And like this we simply know that when we see this we simply look at what is on the left side of the ‘.’ notation and in our case it is the obj that is obj.sing() therefore this refers to the object obj and that is simply all you need to know about this.