How JavaScript Works(Part 2)

How JavaScript Code is Executed.

When you run a JavaScript program an execution context is created. Let's see how it is created with the help of a JavaScript program.

If you don't know about execution context, I suggest you read my previous article first which is about execution context. (https://itsismatullah.hashnode.dev/how-javascript-works)

Program:

1. var n=2;
2. function square(num){
3. var answer=num*num;
4. return answer;
5. }
6.  var squareTwo=square(n);
7.  var sqaureThree=square(3);

In line 1 we just have variable n having value 2. In lines 2-5 we have a function square() that returns the square of the number passed inside the function. In lines 6 & 7 we have variables squareTwo and squareThree that are just invoking the already created square function.

When this code is run, a Global Execution Context is created.

This Execution Context has 2 phases:

• Memory Creation Phase
• Code Execution Phase

  Let's see Memory Creation Phase.

  Assume we have the above-given code, In 1st phase of Memory, Creation JavaScript will allocate the memory to all the variables and functions. As soon as JS encounters the line1 of the code

  var n=2;
  

  it will allocate memory to n

Now JS will move to line2. At this line, it seems that there is a function named square, so it will allocate memory to square too.

function square(num){
  var answer=num*num;
 return answer;
 }

So what it actually stores inside the memory space it has created?

When it allocates memory to variable n it stores the special value known as undefined. But when it comes to function, it literally stores the whole code of function inside this memory space.

Now JS will move to line6 where it encounters another variable squareTwo and as it is a variable so it will be allocated memory and undefined will be stored in it. The same will happens in line7 for variable squareThree

var squareTwo=square(n);
var sqaureThree=square(3);

Let's see the 2nd phase (Code Execution Phase).

Let's see how code is executed once the memory has been allocated. Now JS once again runs through the above-given program, line by line and it executes the code now. This is the point where every function and calculation etc is performed. As soon as JS encounters line1:

var n=2

It actually places the 2 inside the n. Till now the value of n was undefined but now in the 2nd phase of the execution context, the value of var n is being placed in a placeholder or identifier named n.

After finishing line1 controller moves to line2.

function square(num){

At this line, it seems that no work is to be done for now, so it moves to the line where this function ends which is line6.

var squareTwo=square(n)

In line6 we invoked a function. This is where something more comes into the picture. As we know that function in JS are mini-program. Whenever a new function is invoked a mini-program is invoked and altogether a new execution context is created inside that already existing execution context.

Now we will again go through this execution context and again two phases will be invoked. Let's do this now. As 1st phase was the memory creation phase, In this memory creation phase we are now talking about this function invocation.

(num){
var answer=num*num;
return answer;
}

We will be just concerned about this piece of code only when we are executing this square(n). Let's see how memory is allocated now. As we know in 1st phase memory is allocated to variables and functions, when we say variables & functions it also involves the parameters, in this case, we have num as the parameter passed in the square function. As we are just having num and answer as variables in this piece of code and no function to allocate memory to, so we will be allocating memory to these two only.

Now comes phase 2 for this piece of code. As we know in the 2nd phase we execute code line by line. So, when the function square(n) is invoked first of all the value of n (passed as an argument) is passed to num (passed as a parameter).

var n=2;
function square(num){
...
}
var sqaureTwo=square(n)

So 2 will be passed to num.

Now controller will move to the next line which is:

var answer=num*num;

At this line, it will do the calculation and put the value in variable answer.

So the value of the variable answer becomes 4.

Now the controller moves to the next line that is.

return answer;

Here Js encounter the special keyword "return". Whenever JS sees this return keyword in a function it tells the function that your work is done for now and just returns the controller back to the execution context where the function was invoked. So return the value of the answer where it was invoked which is line6

var sqaureTwo=sqaure(n);

As soon as it encounters return answer statement, it finds the value of the answer in its local memory and return then returns the value of the answer where it was invoked and replaces the value of undefined with the answer's value.

As soon as the whole function is once executed the whole execution context for that instance of function will be destroyed.

Now controller will move to the next line which is line7.

var squareThree=square(3);

It's the same as a line6, just the difference is that the value 3 is passed directly in the argument. The same brand new execution context will be created and the same process will be performed afterward then once done that execution context will be destroyed and the controller will be back where it was invoked.

Once the whole program is executed the Global Execution Context too will be destroyed.