Welcome to my first ever blog. I am learning web development and I would like to share my learning on the internet. In this blog we will see how a javascript code is executed. I saw a youtube video explaining this same topic by Akshay Saini and I will explain it in my own words. It will help me to understand it better and also spread some knowledge along the way.
How code is executed in javascript
Every time a javascript program is run, a Global Execution Context is formed. Think of it as a container that stores all the variables, functions and executes all the code written. There are two components in the global execution context.
1.) Memory component
2.) Code component
Figure 1
Let us take an example code and go step by step to see how each line of code is executed.
Figure 2
The javascript code is executed in two different phases.
Phase 1 - Memory creation phase
Phase 2 - Code execution phase
Phase 1 - Memory creation phase
In this phase, the javascript engine goes through the code written, line by line, and reserves memory for every variable and function that it encounters. The way the data is stored in the memory component is like a key-value pair. The variable name as the key and its value as its value.
Let us see this happening line by line.
Figure 3
The moment javascript encounters the 1st line (see Figure 3), it reserves a memory location for that variable with its name as a key(in this case num) and allocates a value to it. The allocated value is undefined and not 3. In phase 1, the value of the variable is always stored as undefined. Javascript does not care about the value that is assigned to that variable during the memory allocation phase. It stores the variable name as the key and undefined as its value.
Figure 4
Now let us move to the second line.
Figure 5
As you can see, we have a function keyword on line 2. This tells javascript that here's a function declaration. Just like what happened when we declared a variable, a memory location is reserved for this particular function with the name double but unlike the variable where the value is stored as undefined, the value for the function is the code inside the curly braces "{}". Yes! The entire piece of code inside those curly braces is stored in the memory component, line by line, character by character.
Figure 6
Here's an example (Figure 6) to see the values that are stored in variables and let us see what happens when we console.log num and double.
Figure 7
As we discussed above, the value stored in the variable num is undefined and the value stored in the function double is the entire code inside the curly braces{}.
The variables inside the double function do not get stored in the memory component like we saw with the num variable on line 1. We will see what happens to them very shortly.
The global execution context looks like this after completing line 2.
Figure 8
After the function is stored inside the memory component, javascript goes to the line after the function which is line 6 (figure 9)
figure 9
Now the code encounters another variable doubleNum and the same process is followed like with the num variable where the memory is reserved, the variable is stored in that memory and the assigned value is undefined.
The global execution context now looks like this(figure 10)
figure 10
This marks the end of the 1st phase which was the memory creation phase. Let's go to the next phase. The code execution phase.
Phase 2 - Code execution phase
In this phase, javascript goes through the code line by line again but this time it replaces the undefined with the actual values given to the variables.
Let's see what happens when we encounter the first line in the code execution phase.
figure 11
When javascript goes through the 1st line again, it stores the value(3) assigned to the variable num inside the memory component. The memory component now looks like this. (figure12)
figure 12
Next, it moves to the 2nd line where the function is declared and this time, the code is completely skipped till the function ends as it is already stored in the memory component during the memory creation phase.
Now we move to the 6th line and this is where things gets interesting. In this line we invoke a function double with the parenthesis (). This creates an execution context for that function inside the global execution context just like in figure13.
figure13
Just like the whole code has a global execution context, every function has its own execution context in which all the variables inside the function are stored. It is like Inception, a dream inside a dream and here we have an execution context inside an execution context. The same process is followed here. First the memory creation phase and then the code execution phase. A memory location is reserved for the variable number which is the parameter passed to the function. The value given is undefined. Same goes for the variable ans. This is how the execution context looks like after the memory creation phase.
figure14
Moving on to the code execution phase line by line.
figure15
In line 2 the value assigned to the variable number is 3 because when we invoked the function, we passed num as an argument to the function which is 3. The undefined value of number is replaced with 3.
figure16
Moving on to line 3.
figure17
The value stored in ans is number * 2 which is 3 * 2 which is equal to 6. So the undefined value of ans is replaced with 6.
figure18
Let us move to line 4.
figure19
When javascript encounters the return keyword, it takes the value of ans being returned which is 6 and stores it inside the doubleNum variable inside the global execution context.
figure20
After the function is completed executing, the execution context for that function is deleted and the control returns to the global execution context.
figure21
Since we have executed the last line, the global execution context gets deleted which marks the end of the program.
End of program
This was the journey of code execution in javascript. Thank you for reading my first blog. More to come as I learn new things.
Top comments (2)
Wow Parth ,
Its Was awesome
Great article! Increased my knowledge of javascript execution and I completely understood it. Can i also ask for an article which explains what exactly happens when we import files to another files?