How does Javascript work under the hood?

#javascript #webdev #coding #programming

Okay, So today we shall learn about How Javascript works.

Firstly, JavaScript is a lightweight, cross-platform, single-threaded, and interpreted compiled programming language.

So, Everything inside Javascript happens inside a place known as execution context.

Now the question arises in your mind what is execution context?

Execution Context:-

The environment that handles the code transformation and code execution by scanning the script file (JS file).

As shown above, the Execution context is divided into 2 parts.

Memory component (variable environment)
This is a place where all the variables and functions are stored in key-value pairs.
Code component (thread of execution)
This is a place where code is executed one line at a time.

Now lets see how execution context works?

consider the below example



var n = 3;

function cube(num) {
  var result = num * num * num;
  return result;
}

var cube3 = cube(n);
var cube5 = cube(5);

Now execution context is created with memory and code components as shown in the above image

The first phase is the memory creation phase and the second phase is the code execution phase.

Memory creation phase

In this phase, JS will allocate the memory to all the variables and functions

allocate memory to n variable and store value as undefined.
allocate memory to the cube function and store the whole function code.
allocate memory to cube3 variable and store value as undefined.
allocate memory to cube5 variable and store value as undefined.

Now after the memory creation let's see how the code is executed in the code execution phase.

Code execution phase

Javascript goes through the whole JS program line by line and executes the code.

assign value 2 to n

now it goes to the line where the square function is invoked. so whenever any function is invoked a new execution context is created same as mentioned in the image.

so for the square(n) a new execution context is created with memory and code components

here again, memory is allocated to num and as undefined and then it runs the code execution phase for the function in which it assigns num a value i.e. passed from square(n) where n = 3. so num will assign 3. After that ans will be assigned num * num * num i.e. 27.

Now whenever anything is returned from the function its value is assigned to the variable that invoked the function. here in our case, cube3 will have 27 as ans is assigned 27.

Note here that whenever an execution context is done with its task it is deleted from the call stack.

The same thing happens for the 2nd function cube 5.

Thank you so much for being with me.