Can't Touch "this"
Tags: weeklyretro, webdev, computerscience, javascript
Published: 2021-03-09 12:10:09

<img src="https://c.tenor.com/jK_geuFcuN0AAAAM/olaf-elsa.gif" alt="can't touch this"/>


'this' is a special variable that is created for every execution context (i.e. it is a part of the execution context).
It takes the value of the owner of the function in which the 'this' keyword is used.

The 'this' keyword is not a static variable actually it depends totally on which type of execution context and with which type of environment variable it is defined.

Now, 'this' can broadly be divided into four types:
1) For Methods
2) Function declarations and Function expressions.
3) Arrow functions
4) Event listeners


###Methods
this= object that is calling the method 
```javascript
'use strict';

const duck = {
  name: 'donald',
  getName: function(){
    console.log(this);
  }
};

duck.getName();
```
#####Output:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzygqxhru1ocjjlvhpcm.png)
Now ain't that great this= Direct parent, which in this case is duck Object.
<hr>

###Function declarations and Function expressions
For sloppy mode this= window object 
and for strict mode this= undefined. 
But you gotta understand, this 'this' that we are logging to the console is actually part of this function.
I mean there is some memory in its execution context exclusively dedicated to this 'this'.
i.e every function expression and function decleration have its own 'this'
```javascript
const strict = function(){
  'use strict';
  console.log(this);
};

const sloppy = function(){
  console.log(this);
};


strict();
sloppy();
```
#####Output:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyyh46yg250ftizoqdou.png)
<hr>

###Arrow functions
Arrow functions don't have their own 'this' keyword so they inherit the value of 'this' keyword from their direct parent when it is called.
```javascript
'use strict';

const arrow = () =>{
  console.log(this);
};

arrow();

const duck = {
  name: 'donald',
  getName: function(){
    const arrow = () =>{
      console.log(this);
    };
    arrow();
  },
  gogetter: ()=>{
    console.log(this);
  }
};

duck.getName();
duck.gogetter(); // pay attention to this part

```
#####Output:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cysmvkd6trijtki7yob8.png)
Look at the third output, why is that?
Same as I explained before 'this' is dynamic and for arrow functions points to value of its direct parent hence called lexical 'this'.
<hr style="border: 1rem soid #1560bd">

###Event Listeners:
this= DOM element that the handler is attached to.

```javascript
'use strict';

const body = document.querySelector('body');
body,addEventListener('click', function(){
  alert("Hello World!");
  console.log(this); 
});
```
Paste this code in your console and click see what happens
#####Output:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jht9wao02v7kj81qwyl1.png)

Why window object?
Because in DOM window is the direct parent of the body element.
<hr>

###Take aways
1. 'this' has a dynamic value.
2. Never use arrow functions as methods of an object.
Why because arrow functions have no memory allocated for 'this'.
3. Always prefer strict mode. "personal opinion"
  
Fun Fact:
JavaScript was developed by Brendan Eich in just 10 days.
<img src="https://c.tenor.com/QfaPw2Fr4eEAAAAM/will-smith-clap.gif" alt="excited">


I hope this might have helped you a little.

Comments "this" if you got any doubt or suggestions?

Have a beautiful day.