what is `this` in JavaScript?
Tags: javascript, webdev, tutorial, programming
Published: 2022-03-13 17:30:03

## 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

```javascript
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.

```javascript
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.

```javascript
 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`

```javascript
 "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](https://www.linkedin.com/in/sobit-prasad/) 🌸