How JavaScript Code is Executed?

JavaScript is a synchronous single-threaded language meaning JavaScript can only execute one command at a time in a specific order. It can only go to the next line of code once the previous line of code is executed. Everything in JavaScript happens inside an Execution Context. Imagine Execution Context as a big box inside which the whole JavaScript codes gets executed whenever a JavaScript program is run an execution context is created. Execution Context has two components they are:-

1. Variable Environment (Memory Component)
2. Thread of Execution (Code Component)

Example
1) var number=10;
2) function add (n)
3) {
4) var result=n+n;
5) return result;
6) }
7) var result1= add(n);
8) var result2= add(4);

When the above code is executed a global execution context is created. Global execution context gets created in two-phase

Memory Creation Phase in this phase, the JavaScript engine runs through the whole program and allocates the memory space for all the variables and functions present in the program. The variables in the program are store with placeholder undefined and the function is stored as it is.

Code Execution Phase is the 2nd phase, in which JavaScript code is executed line by line when the engine executes the 1st line of code the variable value is updated from undefined to 10. It comes to the 2nd line where the function is declared and it skips lines 2 to 6 since the function is not invoked yet. Now line 7 in the program is executed where a function is invoked so it goes back to where a function is declared on line 2 and starts executing the function.

Function in JavaScript are like mini-programs whenever JavaScript executes a function a new execution context is created. so when line 7 of program gets executed a function is invoked and execution context for function gets created in two phases Memory Creation phase where variables in a function are store with placeholder undefined. In the 2nd phase i.e. Code execution phase variable n is assigned to value 10 and line 4 is executed result value is calculated and stored in the result variable. Now it comes to line 5 where the return result indicates the function to return the calculated result value to the global execution context and control goes to the global execution context. Now execution context created for function gets deleted. And the value of variable result1 is updated to 20.

Js engine goes to next line 8 again here the function is invoked and new execution context gets created same as mention above process happens once the function returns the value and control goes back to the global execution context. And execution context created for function gets deleted. Value of variable on line 8 is updated to 8. Now the whole JavaScript program is executed so global context also gets delete.

A Call stack is used by JavaScript to maintain the "Order of execution in execution contexts". Global execution context is created at the start of the program execution and all other new execution context is pushed on top of it. It works similarly as a stack whenever a new function is invoked its execution context is pushed into the call stack. When function execution gets finished its execution context is pop out from the call stack.

So this is it for this article. If you find it informative please leave a like and consider following me. Thanks for reading.