In this article we are going to cover:

• How JavaScript works behind the scene
• Global execution context
• Call stack

Everything in JavaScript happens inside an Execution Context.

This Execution context is known as Global Execution Context where everything in the Javascript code happens. you can visualize this execution context as a big box.

The execution context is divided into two parts:

1. Memory (Variable Environment): In this section, the whole code of Javascript gets scanned and variables initialized with undefined and function with its full body, this is known as Hoisting you can read more about hoisting in my previous blog. Hoisting

2. Code(Tread of Execution): This is the place like a thread where Javascript code runs one command at a time that's why JavaScript is a Synchronous and single-threaded language.

Now let's see how this execution context is created with the help of one code:

var a=2;
function square(num){
    return num*num;
}
var square2 = square(a);

Now as we have seen earlier as soon as we run the code Execution context is created

This execution context is created in 2 phases:

1. Memory Creation Phase
2. Code Execution Phase

Let's see one by one what happens in each phase

Memory Creation Phase

In this phase, Javascript allocates memory to variables and functions. variables allocate with the special keyword in JavaScript i.e. undefined and function allocates with its whole body.

Code Execution Phase

In this phase, JavaScript once again goes through the whole code. it finds that the variable a has a value of 2 so now in this phase the variable value change from undefined to 2.

Next at the last line of code where we invoke function square(). Javascript behaves at it is a whole new program and creates another Execution context on top of our Global Execution Context.

As the new execution context is created we again go through the 2 phases in which execution context is created i.e. memory creation and code execution

As we know now during the memory creation phase Javascript allocates memory to variables and functions. As inside function square(), there is no function we allocate memory to the variable which includes parameters also. So, inside function square(), the parameter assigns with the undefined keyword i.e. num: undefined

Next, the Execution phase begins as there are no other variables and functions in function square().

During the execution phase variable num assign with the value, we pass as an argument during function calling in the last line of code i.e. 2 and after that, we go to the next line where we see some execution of code with return statement so first of all num * num performs in a code section and the result value is returned.

As soon as the Javascript engine sees the return statement in the function the control goes back to the place where the function was invoked. In our case, control returns at square2 variable and whatever the value is returned is assigned to square2 variable i.e 4

As soon as the execution of the function is completed its execution context is deleted completely.

Now our whole code finished its execution there is nothing to execute. So now the global execution context also gets deleted.

Call Stack

Everything that we have seen earlier happens inside the call stack. As soon as the code starts global execution context push into the stack and whenever there is a function call the new execution context is pushed into the stack. If execution over the execution context pops out from the stack.

That's it for this article!