What is an Execution Context and Call Stack? 

In this article, we’ll take a look at everything that
happens behind the scenes in the browser to run JavaScript code. We will dive deep into the Execution Context using this piece of code.

<mdspan datatext="el1664532165222" class="mdspan-comment">var n = 2;</mdspan>
function square (num) {
var ans = num * num;
return ans;
} 

var square2 = square(n);
var square4 = square(4);

Code language: JavaScript (javascript)

In the above example:-

When we run this whole code a global execution context is created. 

It is like a big box and it has two components first one is a memory component and the second one is a code component.

Execution context is created in 2 phases.

The First Phase

It is the Memory allocation Phase(also known as the Creation Phase) In this Phase JavaScript will allocate Memory to variables and Functions.

1. As soon as JavaScript encounters line 1 it allocates memory to variable n and that variable stores a special value undefined(it is like a placeholder in JavaScript and a special keyword in JavaScript).
   
2. Then in line 2, it allocates memory for function square (), and this function square () stores the whole code itself in this memory space.
   
3. Then it will also allocate memory for square2 and square4 and they both are variable so they store a value of undefined.

The Second Phase

It is the Code Execution Phase.

Now once again JavaScript runs through this whole JavaScript code line by line and it executes the code now.     

1. As soon as it encounters this first line this time it actually places the 2 inside the n until now the value of n was undefined now in this phase the 2 is allocated in that variable n.

2. The JavaScript goes to line 2 and there is nothing to execute so, then it moves to line 6.

3. Now, in line 6 the function is invoked(whenever we see the function name, with parentheses () it means that the function is now being executed).
   
4. So whenever we invoke a function a whole new independent(independent means it will have its own memory and code component and the phases) Execution context is created inside the Global Execution Context. 

5. Then it will follow the same steps as the global execution phase followed by assigning value in phase 1.

6. Then in phase 2, the code will be executed Whenever we see a return in the function, this return keyword tells this function that you are done with your work just return the whole control back to the execution context where the function was invoked and the function was invoked by the square(n) that means just return the value of ans to the place where it was invoked and the square2 get its value.

7. And when we return the value from the function means that function has done its work then the whole execution context will be deleted from that function.

8. Again we are invoking a function square4 so, it will follow exactly the same steps as the square2 function, and again when that returns the value the control back to the execution context where the function was invoked and the whole execution context of the function square4 will be deleted.

9. Now, we don’t have anything to execute means the whole program has finished then the global execution context will also delete. 

Thread of Execution

In the code component, the code is executed line by line and that process is called the thread of execution. This feature makes JavaScript a single-threaded language and synchronous language.

Call Stack

While creating so many execution contexts inside an execution context and it can go to any deep level so it is very difficult for the JavaScript engine to manage, and yet it does it very beautifully.

Here Call Stack comes into play.

In that stack, we have our global execution context at the bottom means that, whenever any JavaScript program is run, this call stack is populated with the Global execution context and when any function has invoked the execution of that function will be on top of the call stack and when that function finished executing that execution context will completely be deleted.

And the controls go back to where the function was invoked and when the whole program is finished executing the global execution context will also be deleted from the call stack and the call stack gets empty. That’s how the call stack manages the order of execution contexts.

Conclusion

1. When JavaScript code is executed, Execution Context is created and it is called Global Execution Context.
   
2. JavaScript program is executed in TWO PHASES inside this a. MEMORY ALLOCATION PHASE(Creation Phase) – JavaScript program goes throughout the program and allocates memory for Variables and Functions declared in the program. b. CODE EXECUTION PHASE – JavaScript program now goes through the code line by line and executes the code.
   
3. When a Function is invoked in another function when it is called and it acts as another MINI PROGRAM and creates its own Context.
   
4. Returns keyword return the Control back to the PREVIOUS Execution-Context where the Function is called and Execution Context of the Function is DELETED.
   
5. CALL STACK maintains the ORDER of execution Contexts. It CREATES Context whenever a Program is executed or a Function is invoked and it pops out of the Call Stack when a Function or Program ENDS.