what is `this` in JavaScript?

Introduction

When we run our code in JavaScript, a Global Execution Context (GBE) is created. But, along with GBE, a Global object and this keywords also get created. But, what are Global object and this keyword we are talking about here? So, let's explore, here Global Object refers to the window object and this is a keyword that refers to this window object at the global space i.e., in the global space window === this. So, if we will type window === this in the console we will get true as the output. But, the behavior of this changes according to where it is being invoked. So, let's explore how it behaves at different places.

invoking this in global space or alone

When you write console.log(this) in your javascript program and inspect it in the console, you will see that this is referring to the Window object. So, in the global space this refers to Window.

invoking this inside an function

So, what do you think if we invoke this inside a function? So, let's write a few lines and see

function func(){
console.log(this);
}
func();

Here, this also refers to the Window object, but why? Because here function func is a property of Global i.e. Window object. So, here we can also say if we call this in a function as - this refers to the object of which this function is a property of. Don't worry if you didn't get it yet, believe me, you will understand it in the next section.

invoking this in an object

So, let's make an object and invoke this inside that.

const data = {
firstName : 'Sobit',
lastName : 'Prasad',
fullName : function(){
     return this.firstName + " " +this.lastName;
     }
}
console.log(data.fullName());

// Output : Sobit Prasad

So, here output will be Sobit Prasad. Here, inside object data we have invoked this inside function fullName and function fullName is a property of object data and that's why here this refers to data object and not the Window object. Let's understand more deeply with the help of an another example.

 const data1 = {
            firstName: 'Sobit',
            lastName: 'Prasad',
            fullName: function () {
                return this.firstName + " " + this.lastName;
            }
        }
 const dataOne = data1.fullName;
 const data2 = {firstName: 'Mohit', lastName: 'Sharma', dataOne };
 console.log(data2.dataOne());

//Output : Mohit Sharma

In the above program, in spite of declaring function fullName inside object data1, we get output as Mohit Sharma, because at the time of invoking dataOne is the property of object data2.

this under use strict

 "use strict"
        function data(){
            console.log(this);
        }
        data();

//Output : undefined

When we include use strict in our program it doesn't allow default binding and thus we get undefined.

So, that's it guys for in this blog. I will be very glad if you let me know any suggestions/corrections in any of my blog articles. If you find this article helpful, say hi to me on LinkedIn 🌸