JavaScript — Behind the scenes
JavaScript is a Single Threaded , Synchronous Language.
Everything in JavaScript happens inside the execution context
Confused? Well don’t worry let us see how execution context looks like
The execution context is like a big box which has 2 components
The first component is known as memory component , in this component all the variables and function are stored in key value pair
This memory component is also known as variable environment
Now, the second component of this execution context is code component, in this component the code is executed one by one
The code component is also known as Thread of execution
Thread of execution is nothing but its like a thread where the code is executed one by one
Now remember the first line that i wrote?
That is JavaScript is a Single threaded , Synchronous language , but what does this means?
Let us see
When i say that JavaScript is a single threaded synchronous language it means that it executes one command at a time and in specific order.
JavaScript is nothing without this execution context
Now let us take a look at how exactly JavaScript code runs?
Let us take an simple example
var a = 4;
function cude(num)
{
var result = num*num*num;
return result;
}
var cude1 = cube(a);
var cubea = cube(5);
Now we all know what this code is going to give us.
But when i write this code what exactly is happening behind the scenes in JavaScript engine ,let us see
When you execute this code the global execution code is created
So when the global execution phase is created it is created in 2 phases that is
- Memory creation phase
- Code execution phase
Memory creation phase
Take a look at out above JS code, so when JS sees that variable a is defined , a particular memory is allocated to it in this phase
Now, most important thing is that if the memory is allocated to the variable a then what value it stores , it stores a special value that is UNDEFINED.
Then after that JS will go to line 2 where we have defined a function cube and allocate a specific memory to it.
For the function the whole code inside the function is stored in this phase
Then it will also allocate a memory to our variable cube1 and cubea , again as it another variable it will allocate a special value to it that is UNDEFINED.
Code execution phase
After the memory allocation phase, JavaScript once again runs through the whole code line by line and executes the code now
In this phase all the calculations and function is done
As it sees that the value that is given to variable a in code is 2 , it will place 2 inside the variable a in memory allocation phase overriding our special value undefined
Now in this phase we are going to invoke our function
As the function is going to invoke, here a whole new execution context is going to be created.
Now its turning interesting
Now again it will go through 2 phases memory creation and code execution phase
Inside that memory creation phase we will allocate memory to 2 variables they are num and result and give them special value that is undefined
And inside code execution phase the value of n is passed to variable num as we have passed it as an argument.
And then all the calculation is done in this phase that is num is calculated inside this phase and the result is store into the result variable inside memory allocation phase overriding our undefined value so the result variable will store value 64 .
Then it will go to another line where we have return the value result , return basically says that the work is over and hand over all the result again to the execution context where the function was invoked
No as soon as we return result it will find a the value of result into memory allocation phase that is 64 and return that value to the phase where we have allocated variables cube1
Confused? Let us understand through a diagram
Now after the return is executed the whole execution context inside our code execution phase gets deleted
And now it moves to next line
As in last line we have invoked the function it will again follow the same process and change our cubea variable value to 125.
And after function is executed that whole execution phase will get deleted
And at last our whole and main execution context will also get deleted…….
Hey! Thankyou for reading the blog, i hope you gained some insights on JavaScript
Do follow and comment to get such amazing blogs about JavaScript, and do watch akshaysaini namaste JavaScript playlist on YouTube.
If there is anything wrong you found in this blocg then feel free to add a comment!
Thankyou..signing of…