How Javascript code is executed?

JavaScript (JS) is a high-level, single-threaded, interpreted programming language commonly used for web development.
JavaScript is primarily executed in the browser, though it can also run on server-side environments like Node.js. Every major browser has a Javascript engine that executes Javascript code.The most popular one is the Google Chrome V8 engine. Google’s V8 powers Google Chrome and Node.js, a back-end JavaScript runtime environment used to build server-side applications.

Major browser engines include:

• SpiderMonkey developed by Mozilla for Firefox

• JavaScriptCore which powers the Safari browser

• Chakra which powers Internet Explorer

Execution Context

Whenever Javascript code is first executed , a global execution context is created, which is a container holding information about variables, functions, and the current scope.

There are three types of execution contexts:

1. Global Execution Context: Created by default when JavaScript starts running. It contains global objects like window (in browsers) and this.

2. Function Execution Context: Created whenever a function is invoked.

3. Eval Execution Context: Created for code executed inside eval().

Every execution context has two phases:

• Creation phase.

• Code execution phase

Creation phase

In this phase , a execution context is created and all the variables and functions in the scope are assigned values and a scope chain is also created

Execution phase

In this phase, the JavaScript engine executes the code in the execution context line by line. The Javascript engine read the code and executes the code line by line. It involves assigning values to variables and executing function and code blocks and managing the call stack.

There are two main component of a execution context:

1. Memory component.

2. Code component.

Memory component

Here all the memory is allocated to variables and other data components in the code.The memory component is also responsible for maintaining the scope chain.

Code component

Refers to the actual code that is being executed within the context. It includes any function and variable declarations, as well as any other instructions that make up the code.

Together, these two components enable the JavaScript engine to execute code and manage data within the program.

Call stack

The Call Stack is a data structure that manages and tracks the execution contexts. Call stack maintains the order of execution of execution contexts. It follows the Last In, First Out (LIFO) principle:

1. When a function is called, its execution context is pushed onto the stack.

2. When the function completes, its context is popped off the stack.

Example

var a = 2;
function cube(num){
   var ans = num*num*num*;
   return ans;
}
var cube1 = cube(a);
var cube2 = cube(56);

Initially the call stack is empty:

When javascript runs for the first time it creates the global execution context and pushes it into the stack and stores the values of variables and functions in the context.

Memory creation phase:

After memory creation phase, the execution context will move to the code execution phase.
The variable a is assigned the value 2. After that the execution moves to cube1 where the cube function is invoked and this is where the cube execution context is created and pushed onto the stack.

In the memory creation and code execution of cube execution context, variable ans is defined and is assigned the value 8 which is the multiplication result of num* num*num .

After cube function execution is done the value is returned and is assigned to the cube1 variable. The cube execution context is popped off from the stack.
The execution is then moved down and again the cube function is invoked with 56 as parameter.

Cube execution context is created like before and pushed onto the stack.
In the memory creation and code execution of cube execution context, variable ans is defined and is assigned the value 175616 which is the multiplication result of num* num*num .

After cube function execution is done the value is returned and is assigned to the cube1 variable. The cube execution context is popped off from the stack and control goes back to global execution context.

After everything is done the global execution context is popped off from the stack.

Conclusion

Javascript code execution has many such under the hood steps that are performed each time. Google’s V8 engine has a step called as parsing which in turn consists of more steps that determine the input code . This is the first step that occurs before execution . I will be talking about this in another article.

Well for now we learned that , the execution context is a fundamental concept in JavaScript that defines the environment in which code is executed. It contains information about the variables, functions, and parameters defined in that environment, as well as the scope chain and the this keyword.

Thank you for reading!