JavaScript was initially designed to run within a web browser that has a JavaScript engine. This engine is built into most major browsers. These are like V8 on Google Chrome, Mozilla Firefox has Spider monkey, and so on. They all are used for the same purpose because the browser cannot directly understand JavaScript code.

1 / 3

This process involves several key stages

• Parsing: The engine first reads and interprets the raw JavaScript code. (around 15% of overall code)
• Compilation: It then converts the machine code into machine-readable instructions (roughly 25%).
• Execution: Finally, the compiled code is run (the core 50% of the process), leading to the desired actions in the browser or other environments. Additionally, the engine handles garbage collection to manage memory and utilizes an event loop for asynchronous operations, together accounting for the remaining 10% of the execution lifecycle.

Note: The JavaScript Engine is a program that reads and executes JavaScript code.

JavaScript in the Browser Development Mode

When building an application, "Development Mode" refers to working on your local machine before deployment. You write HTML, CSS, and JavaScript in an editor like VS Code. Using a Live Server extension (or manual refreshing), your browser fetches these files from a local server. Crucially, the browser's JavaScript Engine then reads, understands, and executes your JS code, making your webpage interactive and dynamic on your computer.

How JavaScript Code Works in Production?

In "Production Mode," your optimized HTML, CSS, and JavaScript files are deployed to a remote web server. When a user visits your site, their browser requests these files from the server. The server delivers them, and upon receiving the JavaScript files, the user's browser-based JavaScript Engine efficiently executes your code, providing a seamless and interactive user experience.

What is the Execution Context?

Everything in JavaScript is wrapped inside an execution context, which is an abstract concept (can be treated as a container) that holds all the information about the environment within which the current JavaScript code is being executed.

Phases of the JavaScript Execution Context

• Memory Allocation Phase: In this phase, all the functions and variables of the JavaScript code get stored as a key-value pair inside the memory component of the execution context. In the case of a function, JavaScript copied the whole function into the memory block but in the case of variables, it assigned undefined as a placeholder.
• Code Execution Phase: In this phase, the JavaScript code is executed one line at a time inside the Code Component (also known as the Thread of Execution) of the Execution Context. 

Let's see the whole process through an example.

let x = 2;

let y = x*x;

console.log(y);

In the above JavaScript code, there are two variables named x and y. When we run this program, the Global Execution Context is created.

1. Memory Allocation Phase

• In this phase, memory is allocated for all variables. Since we are using let, the variables are hoisted but kept in the Temporal Dead Zone (TDZ) until they are initialized.

2. Code Execution Phase

• JavaScript, being a single-threaded language, runs the code line by line.
• Line 1: let x = 2; now x is assigned the value 2.
• Line 2: let y = x * x; JavaScript looks up x from memory, calculates 2 * 2, and assigns 4 to y.
• Line 3: console.log(y); prints 4 to the console.

3. Final Memory State

At the end of execution, variable x holds the value 2 and variable y holds the value 4. Thus, when console.log(y) runs, we get the output 4.

JavaScript Code Execution

Visit Course