JavaScript — Behind the scenes

Photo by Paul Esch-Laurent on Unsplash

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

1. Memory creation phase
2. 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.

Memory allocation phase

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

Code execution phase

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…