How JavaScript works and what is execution context?

Everything in JavaScript happens inside an Execution Context.

-- Namaste JavaScript

Execution Context is further divided into two parts,

Variable Environment - The place or container where all the variables and functions are stored as key: value pairs.
Thread of Execution - Code will be executed line by line here.

Let's take a simple example and see how it is executing.

var a = 10;
function sum(num){
    var ans = num + num;
    return ans;
}
var output = sum(a);

Initially, JavaScript creates a global execution context as shown in the above table.

Now, the code will be executed in two phases,

Memory Creation Phase

Memory will be created and stored in the memory block for all the variables and functions in this phase.

Memory	Code
a: `undefined`	var a = 10;
sum: { var ans = num + num; return ans; }	function sum(num){ var ans = num + num; return ans; }
output: `undefined`	var output = sum(a);

Note: All the variables are initialized with undefined initially in this phase. for Functions, it will store the exact code inside the memory.

Code Execution Phase

Code will run line by line in this phase.
- The 1st line will be executed, value of a will be replaced by 10 in the memory block.

Memory	Code
a: 10	var a = 10;

When it comes to the 6th line, sum function will be Invoked and this function invocation will create a new execution context.

It will again store all the variables and functions including parameters in the memory and start executing the code in two phases.

Memory	Code
num: 10	Function Parameter

Now, the code will start executing line by line inside the function. The local execution context will be deleted when it reaches to return statement in the code.

Finally, the Global execution will look like the below and this will be deleted once the program is completed.

Memory	Code
a: 10	Var a = 10;
sum: { var ans = num + num; return ans; }	function sum(num){ var ans = num + num; return ans; }
output: 20	Var output = sum(a);

JavaScript will create an execution context before executing the code.
Execution context has 2 components, Variable Environment where all the variables and functions are stored and the Thread of Execution where our code runs.
All the variables are initialized with undefined initially and later those will be replaced with actual values. In the case of functions, the whole code will be stored inside the memory block.
JavaScript created a new execution context while executing the function and this will be deleted once the function execution is completed.

Sai Prasad