Understanding 'this' in Javascript 
Tags: javascript, this
Published: 2022-02-06 11:00:09


The **this** keyword is an extremely important concept to understand in Javascript ,and many beginners, like me, find it difficult to understand.

 **this** keyword/variable is a special variable that is created for every _execution context_(the 'environment' a function executes in).

**So what is stored in 'this' keyword ?**

In General terms , the **this** keyword will always take the value of the owner of the function  in which the 'this' keyword is used.
or we can say that it points to the owner of the function.

Which means the value of this keyword is not static, it depends on how the function is actually called, and its value is only assigned when the function is actually called.

let's analyze different ways in which function can be called

## 1. As a Method
means as a function attached to an object.
When we call a method, the this keyword inside that method will simply point to the object in which the method is called. Or in other words, it points to the ` object ` that is calling the method.
Ex.

```js
const shashank = {
    name : 'shashank',
    year : 1998,
    findAge: function (){
        console.log(this) // this = shashank object 
        return 2022 - this.year;
    }
}

shashank.findAge(); // 24 
```
here the value of `this` keyword inside `findAge` method is `shashank` `object`, because `shashank` object is calling this method.

## 2. Simple Function Call
means not as a `method` & not attached to any `object`.
In this case the `this` keyword will be `undefined` (**Only in Strict Mode**),
if you're not using `'strict mode'`( which you should not be doing), the `this` keyword will simply point to `global` object - meaning the `window` object,
(another good reason to use `'strict mode'` )

```js
function findUserAge () {
    console.log(this)
}
findUserAge();
```

![simple function call](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fryozxvjkh0d5lmu2ry.jpg)
 
the reason for getting `undefined` in second line is because function `findUserAge()` is not returning any value,

```js
'use strict'
function findUserAge () {
    console.log(this)
}
findUserAge();
```

![when using strict mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xs2ceianos3boeoxbb0m.jpg)
the reason for getting two `undefined` is because we are using strict mode so `this` is `undefined` and in second line its because function `findUserAge()` is not returning any value,

## 3.  Arrow Function.
Arrow function do not get their own `this` keyword , if you use `this` in  an arrow function it will simply be the `this` keyword of the surrounding function ( or `parent function`)
In technical terms this is called the `lexical this keyword` because it simply gets picked up from the outer lexical scope of the arrow function.

```js
const shashank = {
    name : 'shashank',
    year : 1998,
    findAge: () => {
        console.log(this) // Window object
        return 2022 - this.year;
    }
}

shashank.findAge(); // NaN ( Not a Number)
```
## 4. Function is called as an Event Listener
Then the `this` keyword will always point to the DOM element , that the handler function is attached to 

## What is Not the `this` keyword
`this` does not point to the function itself and also not the variable environment of the function 

There are also some other ways to call a function using `call` `apply` & `bind` method, calling the function using these three methods is called `explicit binding` .

## Summary
|            |                      |
|----------------------|-----------------------------------------------------------------|
|Method    | `this` = Object that is calling the method |
| Simple Function Call | in strict mode `this` = undefined, otherwise this = window object |
| Arrow Function       | `this` = surrounding of function , also called lexical this       |
| Event Listener       | DOM element , where the handler is attached