About the 'this' keyword in javascript.

• 'this' keyword/variable: It is a special variable that is created for every execution context (every function).
• It takes a value ( point to ) the "owner" of the function in which 'this' keyword is used.
• The value of the 'this' keyword is not static. It depends on how the function is called and its value is only assigned when the function is actually called.

So it's very different from a normal value in this regard. If we set for example x = 5, then x will always just be five. But 'this' keyword, again, depends on how a function is called. But what does that actually mean? Well, let's analyze four different ways in which functions can be called.

- Method   👉 this = <Object that is calling the method>

- Simple function call  👉  this = undefined   (in strict mode!!) otherwise window (in the browser)

- Arrow functions   👉  this = <this of surrounding function (lexical this)>

- Event listener   👉 this = <DOM element that the handler is attached to>

• the first way to call a function is as a method. So as a function attached to an object. So when we call a method, the 'this' keyword inside that method will simply point to the object on which the method is called. or in other words, it points to the object that is calling the method. Okay? And so let's illustrate this with a simple example.

Method example:

const jayu = {
name : "Jayu" ,
year : 2001 , 
calcAge : function ()                      // calcAge is method
 {
return 2022 - this.year;
 }
};
jayu.calcAge(); //21

• 'this' keyword will bind to the object that is calling a method right, that means that 'this' keyword then points at the object in which we wrote the method. let's illustrate this with a simple example.

const jayu = {
name : "Jayu" ,
year : 2001, 
calcAge : function ()                      // calcAge is method
 {
return 2022 - this.year;
 }
};
jayu.calcAge();   //21

const anisha = {
name : "Anisha"
year : 2003,
};
anisha.calcAge = jayu.calcAge;
anisha.calcAge();  //19

• Another way we call functions is by simply calling them as normal functions. So not as a method, and so not attached to any object. In this case, the 'this' keyword will simply be undefined. However, that is only valid for strict mode. So if you're not in strict mode, this will actually point to the global object, which in the case of the browser is the window object. And that can be very problematic. And so this is yet another very good reason to always use strict mode.

• Next, we have arrow functions. Arrow functions are not exactly a way of calling functions, it's an important kind of function that we need to consider. Because, arrow functions do not get their own 'this' keyword instead, if you use this variable in an arrow function, it will simply be the 'this' keyword of the surrounding function(parent function). So of the parent function, and in technical terms, this is called the lexical 'this' keyword, because it simply gets picked up from the outer lexical scope of the arrow function.

  It's really important not to forget that arrow functions do not get their own 'this' keyword.

• And finally, if a function is called an event listener, then 'this' keyword will always point to the DOM element that the handler function is attached to. (window object)

• For the sake of completion, there are actually other ways in which we can call a function, for example, using the new keyword, or the call apply and find methods.

If you know these rules, then it should become a lot simpler to use 'this' keyword😍. "Thank You for reading this blog💕"