Understanding "this" keyword in Javascript
Tags: javascript, beginners, opensource, computerscience
Published: 2023-06-15 09:25:44

## Table of Contents:

1. [What is _this_ keyword and why it is confusing?](#chapter-1)
2. [Global execution Context](#chapter-2)
3. [_this_ keyword Inside Method](#chapter-3)
4. [Simple Function Call](#chapter-4)
5. [Event Listener](#chapter-5)
6. [Arrow Function](#chapter-6)
7. [Take aways from this blog](#chapter-7)

##1. What is _this_ keyword and why it is confusing?<a name="chapter-1" ><a>

When i started learning javascript i came across the _this_ keyword and it was quite difficult for me to understand the _this_ keyword and i came to know that many of the developers had hard time understanding _this_ .

So what is _this_ 🤔 ? , let's look into that.

_this_ is a special keyword that is created for every execution context.

**Execution context:** When the JavaScript engine scans a script file, it makes an environment called the Execution Context that handles the entire transformation and execution of the code. During the context runtime, the parser parses the source code and allocates memory for the variables and functions.

_this_ is not static i.e it changes depending upon the place where it is used.In most cases, value of this is determined by how function is called.



##2. Global execution context<a name="chapter-2" ><a>


In the global execution context i.e outside of any function this refers to global object which is window in case of browsers.

```javascript
console.log(this) //Window
this === window //true
```



##3. _this_ keyword Inside Method<a name="chapter-3" ><a>


In a method, this keyword refers to the object it belongs to ,which means using this keyword we can able to access its properties inside an object.

```javascript
const profile = {
    name: 'suresh',
    favLang: 'javascript',
    printUser: function(){
        console.log(`${this.name} ${this.favLang}`);
    }
}
profile.printUser();  
```
In browser's console we get,

`suresh javascript`




##4. Simple Function Call<a name="chapter-4" ><a>


his in a function refers to global object Window but in strict mode this keyword refers to undefined.

**Strict mode:** In order to use strict mode we use an expression: “use strict”.It helps to write cleaner code, like preventing from using undeclared variable.

```javascript
function testThis(){
    console.log(this);
}
testThis()   // represents Window

“use strict"
function testThis(){
    console.log(this);
}
// undefined
```



##5. Event Listener <a name="chapter-5" ><a>


In event listeners _this_ keyword refers to **DOM** element that handler is attached to.In simple words it refers to HTML element that received the event.


##6. Arrow functions<a name="chapter-6" ><a>


In javascript Arrow function does not get its own _this_ keyword.It uses lexical i.e it uses parent scope of _this_ keyword.


```javascript
const ex=()=>{
    console.log(this);
}

ex(); 
// refers to parent _this_ keyword.

const profile={
    name:'suresh',
    print:function(){
        const fav='javascript'
        return ()=>{
            console.log(this,this.fav);
        }
    }
}
profile.print()();


name: "ch",
print:f()
},js
```

**Isn't it cool..! the _this_ keyword also makes easier to reference the object in our program.**



##7. Take aways form this blog<a name="chapter-7" ><a>


1. Method-this refers to object in which method is called
2. Simple function call -Window Strict mode-undefined
3. Event Listener-DOM element in which handler is attached to
4. Arrow function-does not get its own this.It uses lexical(parent scope of this)
5. Global context- Window object.