How javascript code executed/ Javascript Execution Context

What is Execution Context?

When you write JavaScript code, it gets interpreted by the JavaScript engine.

To understand what happens behind the scenes, you need to be familiar with the execution context. The concept of an execution context is also important to understand other JavaScript concepts such as Hoisting, Scope, and Closure.

Execution Context is an environment in which a JavaScript code executes. When the JavaScript engine runs, it first creates the global execution context and then a new context is created for each function or eval call.

Components of Execution Context

Everything in JS happens/executes inside Execution Context.

Inside the Execution Context there are two components:

Memory component/ Variable Environment: In a Memory component, variables and function values can be stored in a key-value format. The memory component is also known as variable environment.
Code component/ Thread Of Execution: Code component is a place where the whole JavaScript code is executed. Code Component is also known as the thread of execution.

How Javascript executes code:

Let's understand how the JavaScript Engine is creating the execution context for the below code:

When we run a JS program, the Execution Context is created.

const n = 2;  // n is available to the global execution context

// the square function creates its own execution context, when num is declared
function square(num) { 
  const ans = num * num; // ans is only available to the function execution context
  return ans;
}
// square2 is available to the global execution context
const square2 = square(n); 
const square4 = square(4);

When the code is run Global Execution Context is created.

Before the Javascript Code starts executing, memory will be allocated to all the variable(s) and function(s) in the form of a key-value format. This phase is known as the Memory creation Phase.

For variable(s), the key is the variable name itself and the value is undefined (even if the variable is initialized). For function(s), the key is the function name and the value is the body of the function code.
This is the second phase also known as Code Execution Phase, where JavaScript code starts executing line by line and starts assigning the values to all the variables in the memory.

When it starts executing, Global Execution Context(GEC) will be created. Now it starts executing line by line. So, variable - n is in the GEC. It will assign the value 2 in the memory component after executing the first line.

It will encounter the square2 variable. square2 variable is a function that is calling square function. So, a new execution context will be created having its own memory and code component.

Inside the new context of square2, memory and code component will be created again. Memory component initialize variable num and ans as undefined. In the code component, it starts executing line by line and after execution, it returns the value of ans by assigning it to the memory component.

Now, the whole function execution is completed it will delete the execution context of the function by returning the value of ans and assigning it to square2.

Now, the Execution context inside the code component of the Global Execution context gets deleted.
When the execution of JavaScript code completes and values are allocated to the variable. the Execution context inside the code component of the Global Execution context gets deleted.

Now, again the execution context will be created for the square function, for assigning the value in square4.

The local execution context gets deleted after assigning the value in square4.

So javascript is done executing the code, and the whole execution context will be deleted.