# What is THIS keyword in javascript really?

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.
![Screenshot 2021-09-21 at 6.18.14 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632230333396/u_oIeHzb8.png)

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?

![Screenshot 2021-09-21 at 6.22.12 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632230563122/SejZt7_7H.png)

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:

![Screenshot 2021-09-21 at 6.31.08 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632231095894/8RpsKKiWa.png)

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**.