The backbone of Frontend Development our very own "JavaScript" does all the rendering smoothly and we witness the beautiful working of our web apps. Have you ever wondered how JS works behind the scenes. Let us deep dive into this.

"Everything in JavaScript happens inside a execution context".

Whenever we create a JavaScript program the JS engine creates a Global Execution Context with with two sections First one being Memory Component or variable environment and second one being code component or thread of execution. Let us see this with an example of code:

When this code is executed line by line the first job of JS interpreter is to assign space in memory to all the variables and functions. The point to be noted here is that JS will assign 'undefined' keyword to variables initially and the entire code snippet to the function. Understand this with the diagram step by step.

Step 1: A Global Execution Context is Created

Step 2: Giving Space to variables and functions in memory component: In this step variable 'a' is assigned with a special value undefined which acts as a placeholder for variable. Also it assigns the entire code snippet to the function name.

Step 3: Invoking function and accessing code inside it: Now the interpreter is in line number 2 where it will again make execution context for the function 'display()'. In this it will assign a value cum placeholder 'undefined' to 'b'.

Step 4: Function Works: Now the code inside the function block starts working line by line. Now the control is on the line number 3. Now variable 'b' will get the value '100'.

Step 5: Final Step of JS Behind the scenes wrt Execution Context: Now according to the program example control goes to the line number 5. Now the value of variable is 100 and is printed in the console. Now the control moves to the last line where the value of variable 'a' gets printed in the console.

One more important thing which JAVASCRIPT ENGINES do is management of all the execution context via a CALL STACK. Let us understand it very briefly.

Call stack maintains the order of execution of execution context.

This weird line written above means that whenever a execution context is created be it global or child it is pushed into a stack and popped out when the execution is finished executing the particular block. Let us understand it via a diagram keeping in our mind the same program which we used above. 1. When for the first time a global execution context is created it is pushed into the call stack

2.Now the Execution context for the function display() is created

3. When the use of function is finished it is popped out of stack

4. finally the stack becomes empty as even global execution context is popped out

Finally we are done, Thank you for being patient and reading. if you are also in love with Java script, Do give a thumbs up.