Whenever we give our files to js, the first thing that is generated while running/executing our js code is the Global Execution Context (GEC), and this GEC is referred to a variable known as "this".
JS code is executed in 2 phase:
Memory creation phase
Execution phase
Difference between both phases
In the memory creation phase, the variables or anything that has been defined or declared get's memory (or we can say memory is allocated to the variable or functions that are declared).
Only memory is allocated, they doesn't get executed, all the execution of the function is done during the execution phase.
PermalinkJavaScript Execution Context
The execution context refers to the environment in which JavaScript code is executed and this context contains the two phase defined above (memory creation and execution phase).
Now, an Execution Context has two components and JavaScript code gets executed in two phases.
Memory Allocation Phase: In this phase, all the functions and variables of the JavaScript code get stored as a key-value pair inside the memory component of the execution context. In the case of a function, JavaScript copies the whole function into the memory block but in the case of variables, it assigns undefined as a placeholder.
Code Execution Phase: In this phase, the JavaScript code is executed one line at a time inside the Code Component (also known as the Thread of execution) of the Execution Context.
Global Execution Context (GEC): In the browser, the GEC is the window
object, while in a Node.js environment, it is {}
or global
.
JavaScript is single-threaded, meaning it executes code sequentially, one line at a time, performing one operation at a time.
PermalinkTypes of Execution Contexts to remember
There are three types of execution contexts to remember:
Global Execution Context
Function Execution Context
Eval Execution Context
PermalinkPhases of JavaScript Code Execution
As mentioned earlier, JavaScript code is executed in two phases:
Memory Creation Phase
Execution Phase
PermalinkMemory Creation Phase
In this phase, memory is allocated for variables and functions. The variables are assigned undefined
initially, while the functions are stored in memory completely.
PermalinkExecution Phase
In this phase, the code is executed line by line, and the actual values are assigned to the variables. The functions are also executed in this phase.
PermalinkExample to Understand the Phases
Let's understand the execution context with an example:
let val1 = 10;
let val2 = 5;
function addNum(num1, num2){
let total = num1 + num2;
return total;
}
let result1 = addNum(val1, val2);
let result2 = addNum(10,2);
after this total is returned to GEC, this execution context gets deleted, and control moves to result2 and then again new execution context is created and whole process is repeated and after the process will be completed, this new execution context created for result2 = addNum(10,2) will also get deleted.
after 15 is stored in total and is returned to GEC, then 15 is stored in result1 and then control moves to result2 and this process is repeated while calling the function, this time 10 and 2 are passed directly and then 12 is stored in total and the total is again returned to GEC and 12 is stored in result2.
Final execution phase looks like:
PermalinkCall stack
The call stack is a mechanism that helps manage the execution contexts. When a function is called, a new execution context is created and pushed onto the call stack. When the function execution is finished, the context is popped from the stack.
GEC is the first thing to be pushed into the call stack and after that other execution contexts are pushed.