‘ ’ is always been a pain in the for many JavaScript developers, but it’s time to say ‘I got ’ this a** this Previously, I wrote . Before reading article, I recommend you read that article first, but if you think you have a good grasp on scope and context in JavaScript let’s continue. Understanding Scope and Context in JavaScript this So What is 'this’ in JavaScript? The value of keyword in a global context refers to a global object which is in case of browser. this Window So answer to "what is in JavaScript" is simple. contains a value that is most of the time is an object which is an execution context at that particular time. this this As you can see in the above example, by default, will contain an object the value that refers to the global execution context which is in web browsers. this Window The value of is determined by how a function is being called. this if a function is called with a new keyword JavaScript will create a separate execution context for it. Note: The value of this will change if we run it in strict mode. As you can see in the above example, if called normally, this will now contain value since it is running in strict mode. constructorFunction undefined JavaScript has introduced a new property called which points to global value. globalThis this Note: The value of global this is different in NodeJS (Object), and in WebWorker it might be DedicatedWorkerGlobalScope or SharedWorkerGlobalScope but in a web browser, it will be Window. So all in all, this is nothing but the execution context in which that particular line of code is running, which is defined at runtime bindings And as you can see, almost in all scenarios this is nothing but an object, we sometimes call it context or execution context How the value of 'this' is determined We have understood what is and what it contains, it’s time to learn some rules which identify the value of this at any given point in time. this Determining the value of is the part for many, which makes controversial in JavaScript. this HARD this We’ll list down all possible scenarios where value gets changed. this Default value This is the most simple part, open up devtools and log , it will look like this in Chrome. this As you can see, all are logging the same value which is a Window object. This is the default execution context in JavaScript, every function by default gets executed in the default context. A variable declared in the global scope ( ) gets added in the object and we can access them using using var Window window.varName Changing the value of this If this will always point to the Window object, we can not achieve code , code and we will pollute the global context. That's why there is a way using which we can create custom context and change the execution context of some function that is already defined in some other context. reusability abstraction , and to rescue us. Call apply, bind These are the methods available on the Function prototype, and the purpose of all three methods is the same it’s just that there is deference in implementation. We are not going to look at these methods in detail but will explain in short with some examples. Let’s imagine, you wrote a function called that accepts messages as input and prints a variable called to the console from the context in which it is running. printName name All good, right, In the above example, we created a variable called name which will get added on the window object, and since function by default runs in global context variable name is available on . printName this Now imagine, there is a change in requirements and now you have another object called user who also contains a property called name and you want to print it on the console. Since you are a good programmer and you practice , you want to reuse the above function which does the job. DRY As you can see above, we are now able to print property called which is available in user object and not in the Window object. name Basically, we are changing the context of the original function which by default runs in the global context. printName And , and method saying, please run-in context, call apply bind printName user Have a close look at the below example, Now we are also logging in function this printName As you can see, when we call Normally this points to Window and when we call using call, apply, and bind this is pointing to the User object. printName Normal function vs arrow(fat) function As you can see in the above example, we created an object called and defined an anonymous function and assigned it to a property called which prints and property. The second example is identical to the first only difference is that we are using the arrow function. customeScope printName this name But this small difference results in a big change. Explanation: arrow(=>) function by default does not have this set to Window which is in normal function. Rather an arrow function executes in scope they are created. In the above snippet, in the first example, this is pointing to a context in which they are created which is customeScope. In the second example, since the arrow function do not have it’s own , it will use value of enclosing scope, which is Window (enclosing scope is whose is Window). this this customeScope this Arrow function example That's all for today, I have tried my best to explain what is this and how it may get changed in various scenarios. Hope you have learned something new today… For further understanding please consider the below sources: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide https://javascript.info/ Feedback and suggestions are welcome. Reach out to me on . Twitter Until then... Also published at https://medium.com/geekculture/understanding-this-in-javascript-22c068616f5a
