this keyword in javaScript.

Let's understand the most confusing keyword thoroughly.

1. this keyword inside global space represents the global object. It will print the window object inside the browser. Because here browser is the environment for js code.

Here I print this inside global space and the output is a window object inside the browser. This output could be different for different environments.

2. Inside the function, if we log this output would be different for "strict mode" and different for "non-strict mode". If the mode is strict then output will be undefined and for the non-strict mode output will be the window. Because in non-strict mode undefined is replaceable by window object because of this substitution algorithm.

Output when we use strict mode.

Output for non-strict mode.

3. The value of this depends upon how the function is called. If we call the function with the window object the output will be window no matter which mode is on. The value of this will be a window object for both modes.

We can see the output is the same in both modes. Because we call calling this function with a window object.

4. But this theory is not the same as the arrow function. Because the arrow function does not have access to this keyword. You might be thinking that it would be printed. Keep one thing in your mind while dealing with an arrow function. Inside the arrow function the value of this would be the value where its parent context is present. Let's understand with a few examples.

The value of this is a window object because this is a fun function that is available inside global space.

We are calling the printDetails function at line 19 the output of this is an object because we are calling the function with an object. and the value of this depends upon how the function is called. We already see it in the above examples. Now at line no 16 we are invoking the fun function that is available inside the printDetails functions. The value of this keyword depends upon the value of its parent context. The value of the printDetails function is an object that's why the value of this is also an object. Let's further deep dive with more nested objects.

Here the value of outer function is a window object because we are invoking this function normally you can see at line no 19. And we are in non-strict mode the value of this will be replaceable by window object. Inside the outer function we are calling fun function which is an arrow function arrow function depends upon its parent contex that's why we got the window object. Note:- inside the strict mode value will be undefined for both.

You can see the value is undefined for both. Let's see the last concept of this with DOMElement.

Here we have a button tag with id btn. I added a click event and passed a cb function which is an arrow if I click on the button the output would be window object because this cb is an arrow function if this would have been a regualr function output would be a button element. Let's see.

Here you can see output is a button element. Same theory is applied here. I hope now have understand the concept of this Keyword. If You like it share with your friends.