• When a JS program is ran, a global execution context is created.

• The execution context is created in two phases.

flowchart LR
    subgraph Phase1["Phase 1: Memory Creation"]
        M1["Allocate memory
for variables & functions

var n → undefined
function square → {code}
var square2 → undefined
var square4 → undefined"]
    end
    Phase1 --> Phase2
    subgraph Phase2["Phase 2: Code Execution"]
        C1["Execute code
line by line

n = 2
square2 = square(n)
  → New EC created
square4 = square(4)
  → New EC created"]
    end

    style Phase1 fill:#7c3aed,color:#fff
    style Phase2 fill:#059669,color:#fff
    style M1 fill:#4f46e5,color:#fff
    style C1 fill:#0d9488,color:#fff

• Memory creation phase - JS will allocate memory to variables and functions.

• Code execution phase

• Let’s consider the below example and its code execution steps:

var n = 2;
function square(num) {
  var ans = num * num;
  return ans;
}
var square2 = square(n);
var square4 = square(4);

The very first thing which JS does is memory creation phase, so it goes to line one of above code snippet, and allocates a memory space for variable ‘n’ and then goes to line two, and allocates a memory space for function ‘square’. When allocating memory for n it stores ‘undefined’, a special value for ‘n’. For ‘square’, it stores the whole code of the function inside its memory space. Then, as square2 and square4 are variables as well, it allocates memory and stores ‘undefined’ for them, and this is the end of first phase i.e. memory creation phase.

So O/P will look something like

Now, in 2nd phase i.e. code execution phase, it starts going through the whole code line by line. As it encounters var n = 2, it assigns 2 to ‘n’. Until now, the value of ‘n’ was undefined. For function, there is nothing to execute. As these lines were already dealt with in memory creation phase.

Coming to line 6 i.e. var square2 = square(n), here functions are a bit different than any other language. A new execution context is created altogether. Again in this new execution context, in memory creation phase, we allocate memory to num and ans the two variables. And undefined is placed in them. Now, in code execution phase of this execution context, first 2 is assigned to num. Then var ans = num * num will store 4 in ans. After that, return ans returns the control of program back to where this function was invoked from.

When return keyword is encountered, It returns the control to the called line and also the function execution context is deleted. Same thing will be repeated for square4 and then after that is finished, the global execution context will be destroyed. So the final diagram before deletion would look something like:

• Javascript manages code execution context creation and deletion with the the help of Call Stack.

• Call Stack is a mechanism to keep track of its place in script that calls multiple function.

• Call Stack maintains the order of execution of execution contexts. It is also known as Program Stack, Control Stack, Runtime stack, Machine Stack, Execution context stack.

flowchart TB
    subgraph CS["Call Stack (LIFO)"]
        direction TB
        Top["Top of Stack"]
        EC_square4["EC(square4)
num=4, ans=16
↩ Global"]
        EC_square2["EC(square2)
num=2, ans=4
↩ Global"]
        GEC["GEC (Global)
n=2, square={fn}"]
    end

    Top --> EC_square4 --> EC_square2 --> GEC

    style CS fill:#1e293b,color:#fff
    style Top fill:#dc2626,color:#fff
    style EC_square4 fill:#7c3aed,color:#fff
    style EC_square2 fill:#4f46e5,color:#fff
    style GEC fill:#059669,color:#fff

Watch Live On Youtube below: