> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/javascript/this-keyword.md).

# 'this' keyword

<mark style="color:blue;">## 'this' keyword</mark>&#x20;

In javascript, when a function is invoked

* an 'execution context' is created for the function
  * each 'execution context' has a 'variable environment' where the variables declared inside the function live
  * the 'execution context' has a reference to its 'outer environment'
  * if the function code uses a variable which is not declared inside the function, then it can look for it in its 'outer environment'. If that 'outer environment' is another parent function and doesn't have the variable, the code can look for the variable further next level of outer environment until it reaches the global environment.&#x20;
* Every time javascript creates an 'execution context', it automatically creates a variable called **'this'**.

  **'this'** could be pointing to different objects depending on how the function has been invoked.

1. When used in global scope, `this` points to `window` object
2. When used inside a function statement or expression defined in global scope, `this` points to `window` object
3. When used in a function defined inside an object - `this` points to the  object
4. When used in a function - nested inside a function which is defined inside an object - `this` points to `window` object. This is little weird. As a workaround for this, many developers define another variable usually named `that` or `self` in the parent function and assign it to `this`. Then use `that`/`self` in the nested function instead of `this`.
5. When a function is invoked with the `new` keyword, `this` would be a new empty object and passed on the function. Once function completes, `this` would be returned.
6. When called with `call()`, `apply()` or `bind()`, we can determine what `this` in the function should point to, the first parameter passed in these function is what `this` would point to.
7. &#x20;ES6's  **`Arrow`** function, => Arrow function doesn't create its own this variable. When this is used in an arrow function, it points to it's parent's scope.