JavaScript Code Execution Behind the Scenes

JavaScript Code Execution Behind the Scenes

A Beginner friendly Technical Blog to understand JavaScript Code Execution behind the scenes

Table of contents

No heading

No headings in the article.

JavaScript is a Synchronous, Single-Threaded Programming Language. It is the Language of Web. Synchronous means It Executes the code in orderly manner or in particular order and Single-Threaded means It Executes one line at a time. Whenever a JavaScript engine (V8) receives a JavaScript file or a Script file, A Global Execution Context is Created. Now, this Global Execution Context contains two parts one is Memory part and another is Code part. Here is how a Global Execution context looks like : Code.png

The Memory part of Global Execution Context contains all the variables, functions in the javascript file and allocate memory for all of them in the form of Key-Value Pairs. The Code component contains the lines of code which get executed one-by-one.

var age = 18;
function getAge(num){
return num;
}
var receivedAge = getAge(age);

Now, lets see what happens when we run the above code snippet in JavaScript Engine. The Global Execution Context runs the code in two phases : 1) Memory Creation/Allocation 2) Code Execution

Lets complete the first phase: In the first phase, JS engine assigns a special keyword in javascript i.e. "undefined" to all the variables in the code. In case of functions, all the code inside those functions is stored in the memory. So, Now our Global Execution Context will look like:

Code (2).png

Second Phase: It is the Code Execution phase. The JS Engine executes the code line by line. at first line it encounters a variable with a value 18 assigned. thus now it assigns 18 to the age variable and removes the assigned undefined keyword. then, next it encounters a function. Now, there is a Twist!! In Case of a function in code execution phase, The JS Engine Creates another Execution Context inside the same Global Execution Context. This newly created Context is known as Function Execution Context. Now, the question arises, "How the JS Engine manages so many Execution contexts?" So, the answer is it uses Stack and pushes newly created context in the stack known as Call Stack. The Call Stack maintains the order of creation and execution of the execution contexts. So, coming back to our code, the Stack will look like this now :

GEC (1).png

Now, in the newly created Execution Context, again the variables will be assigned with the keyword "undefined" and after that in the second phase, the value received from the parameter will be assigned to the variable num. At last, in the function getAge, it returns the value of num. Therefore the value which is returned from getAge is assigned to the variable named as receivedAge and the newly created Functional Execution Context is discarded as the code inside the function is completely executed ( NOTE: Whenever the code inside the function executes completely, the execution context created for that function also gets terminated i.e. popped out from the Call Stack). So, Now the state of our execution context is like this :

GEC (2).png

At Last, as the whole code in the Javascript file is executed, the Whole Global Execution Context will be deleted and the Call Stack will be Empty Now. In this way, JavaScript Engine(V8) executes the JS programs behind the scenes.