JavaScript Code Execution and Call Stack

When you run the program many things are happening behind the scene in the JavaScript Engine.

As everything in JS happens inside the execution context, and JS is not possible without the execution context, what exactly happens when you run the JS program?

So whenever the program runs in JS the 1st that happens is the execution context is created.

We have a below function for a better explanation

let n = 2;

function square(num) {
  let ans = num * num;
  return ans;
}

let squareFour = square(n);
let squareFive = square(5);

console.log(squreOne);
console.log(squreTwo);

Here is the function square which returns the square of the number (num), which is being passed inside the number, also there are 2 other variables squareFour and squareFive which are invoking the function.

Here the Global execution context is created and JS will allocate memory to all the variables and functions.

This takes place in two-phases

1. Memory Allocation Phase

2. Code Execution Phase

Memory Execution Phase

As soon as the JS engine encounters the variable let n = 2; It will allocate the memory to n then JS will go to line 2 it sees that there is also a function square it will allocate the memory for the function square.

When the memory is allocated for variable n, it stores the special value undefined. and in the case of a function, it stores the whole code for the function inside this memory space.

Also, it will allocate the memory space for variable squareFour and squareFive and will store the value undefined.

Code Execution Phase

• Here JS runs once again through your code line by line and then it executes the code.

• This is the point where the function and every calculation in the program are done.

• And as soon as it encounters the variable n the value undefined is now been replaced by 2 the value 2 is now been placed in the

  placeholder or the identifier n.

• when it encounters the function it sees it has nothing to do and moves to the next line and sees another variable squareFour and squareFive.

• Here, at squareFour and squareFive we have a function invocation when it encounters the functions name square() i.e. the name and parenthesis.

• It means that the function is now being executed, functions are the heart of JavaScript.

• functions over here are the mini-program, and whenever the function / mini-program is invoked a new execution context is created.

• The whole program was in the Global Execution context and when you run the function mini execution context is created.

• Again here 2 phases will be involved the memory execution phase and the code execution phase.

• Similarly, for the 1st line of the function argument, it will store undefined in num.

• 

• And same when it encounters the variable ans it will store undefined.

• Now, here the 2nd phase is called i.e. code execution takes place, where now when the function square is invoked the value 2 is been passed to num.

• num here is the parameter of the function and n over here is an argument.

• num holds the value 2 and ans now becomes 4.

• When the controls move to next line it encounters the special keyword returns.

• return key-word tells to return the whole control back to the execution context where the function was invoked.

• when the return ans statement is executed it finds/searches the value in the local memory.

• ans will now replace the undefined of squareFour.

• Then the whole execution of that function will be completely deleted.

• For squareFive same process will happen again with values num: 5 and

  ans: 25.

As this is too much for JS to manage these things, as these things are very tough to manage, as they can go to any deep level where there are functions inside functions.

All this is been managed by the STACK also known as CALL Stack.

The Stack here handles everything i.e. creation, deletion and control and at the bottom of this stack, we have the global execution context.

This call Stack is populated with this global execution context, whenever the function is invoked or new execution context is created this execution context is put inside the stack.

Once the return statement is encountered in the mini execution context is popped out and control goes back to GEC where it left off.

Hence, the call stack is only to manage the execution context once the whole thing is executed the call stack gets empty even global execution gets empty.

Call Stack maintains the order of execution in the Execution Context.

Call Stack is also referred as

• Execution Context Stack

• Program Stack

• Control Stack

• Runtime Stack

• Machine Stack