'this' Keyword — Let’s Decode It Once and For All (Part 1)

So I was preparing for interviews and guess what people are still interviewing like it's 2022. What's the difference between let and var. Give me a break. LLM's are moving ahead and so should you. One of the most nutty topics I came across was 'this' keyword and it is troublesome. I think it's one such topic for which you feel like the information is not structured enough. Let's make it structured.

So before Starting anything, I hopw that you are aware of basic syntax of Javascript. What I mean by that is data types, variables, constants,loop, conditionals etc. Arrow functions as well, just the Syntax of it.

Execution context is the single most important concept in JavaScript because it defines the lifecycle of variables and functions—when they are created, how they are stored, and how they are accessed during execution.

Now that I have your attention, think of Execution Context as a stack which has information about all the variables and functions, this keyword and scope. (Ignore this keyword and scope for now, just know that they exist.), Now this is how it happens and we will let you know this with a single piece of code.

let x =10;
function a() {
  console.log("a start");

  b();

  console.log("a end");
}

function b() {
  console.log("b runs");
}

a();

Let's go through the execution one by one.

1- Global context is setup.

The Global context is created and gets all the variables and functions in the outer layer in the memory. Note this is just the creation part and not the execution.

Now once this is created, Execution of this context will start with first statement.

let x =10;
This Statement will be executed and value of x will change.

the the first function will be call(This will be skipping all the function declaration lines and call is being done by a();) and voila.

2- 'Function a()' context is setup.

Here you will have no variable but you will have a function b() inside the memory. If there was a variable inside it, we would have gotten it initialised to undefined.

3- Function a()'s Context will start execution and console.log("a start");
Will be executed. Post which a new context will open namely function b()'s Context.

4- Now b() will execute one line after the other

console.log("b runs");

5- Now the context of b() will go away and a() will execute the remaining statements namely.

console.log("a end");

6- Now a()'s context will be reaching it's end of life and since there is no other statement for Global context remaining the execution stops and the Global context also reaches end of life.

After these steps are clear, I hope you are able to understand context. There is an exception to this rule and it's memory persistence post execution. Kindly ignore it for now so that we can move to 'this' keyword sooner.

This was part one and the first pre-requisite for understanding the this keyword. Now we will discuss the keyword in more detail in the next part.