JS Basics: All about ‘This’ keyword.
Hi folks,
This keyword has always been a topic of confusion for most of the developers and I can say I was always one of them! After doing a good reading on this part, I thought of sharing my understanding with others as well.
The basic function of `this` keyword is to store the current execution context of the program. In simple words, it refers to the object that is executing the current function. As it stores the current execution context, it starts getting confusing because its value will vary based on execution of the function (function’s execution context) and on strict or non-strict mode.
In this article I have divided `this` keyword into different use cases. Let’s go through it one by one and understand `this` in a better way possible.
- If this is called in a global scope, it will always refer to the window object in both strict and non-strict mode.
For e.g.
```
let x;
function printX() {
//some code for function
}
console.log(this);
// As this is called in global scope, it will always point to the window object.
```
- If `this` is called in a function which is a part of object, it will refer to that object. This will remain same for strict mode.
```
let obj = {
x: 10,
y: 20,
add: function() {
console.log(this.x + this.y)
// This here will point to the obj object
here, as function add is a method of object
obj.
}
}
obj.add()
// It will print 30, as x and y are taken from the obj object.
```
- If `this` is called from a regular function, it will always refer to a global object i.e window object. But in case of strict mode, if the value of this is not defined, it will return `undefined`.
You can learn more about the javascript `strict` mode from my [previous article](https://dev.to/ms_yogii/js-basics-understanding-strict-mode-370e)
```
function y() {
console.log(this)
}
y();
// As program is not running in strict mode and this is a regular function, this will refer to the window object
```
- If `this` is called from a constructor function, it will refer to its outer function for normal function and to window object for arrow functions. It will not be the case in strict mode, it will be `undefined`, as `this` keyword will work same in functional as well as class component.
```
function y(title) {
this.title = title;
console.log(‘y:’, this);
function x() {
console.log(‘x’, this);
// This will refer to window object as it is
called from regular function and this is
not set
}
let z = () => {
console.log(‘z:’, this);
// This will refer to this object inside y as
at the time of creation of arrow function z,
this was already set to function y.
};
x();
z();
}
// Here, this will return {title: ok}, as this is defined. If it is not defined it will return window object
let p = new y(‘ok’);
// Here, when a new operator is used, it will create a blank object {} as a scope and this keyword will start referring to that new blank object.
```
- If you are using call, apply or bind methods to attach the scope of `this` keyword, then the object on which the methods are attached or bound, this will refer to them.
```
let obj1 = {
x: 10,
printX: function() {
console.log(this.x)
}
}
let obj2 = {
x: 20
}
obj1.printX.call(obj2)
// here, due to call method, this inside the printX() method will refer to the obj2 object.
```
- If you are using this inside arrow function, it will refer its outer scope at the time of arrow function creation
```
this.x = 10;
let y = () => {
console.log(this)
// this will refer to {x: 10} as it was the outer scope at the time of creation of this arrow function
};
y();
```
That’s all about `this` keyword. There is one more [article](https://codeburst.io/the-simple-rules-to-this-in-javascript-35d97f31bde3) on this topic which has the cleanest ever explanation about `this`, do check that out.
I have tried covering all the possible use cases for this keyword. If you encounter any further use-cases do share them in comments. I would love your comments/feedback about the article as well.
