Shameel Uddin

Posted on Jan 14 • Originally published at blog.hasab.tech

How Does JavaScript Code Run?

#frontend #javascript #webdev

Introduction

Have you ever wondered how JavaScript code actually runs?

Does it execute on its own or is there a system working behind the scenes?

In this blog we will clearly understand:

how JavaScript code really runs?
what a JavaScript Runtime Environment is?
The role of JavaScript Engine and it's types (V8, SpiderMonkey, JavaScriptCore)
how the JavaScript V8 Engine looks like from inside? (Call Stack, Heap, Parser, JIT Compiler, Interpreter, and Garbage Collector)

This blog builds the foundation for understanding:

Call Stack in detail
The working of JavaScript Engine, Execution Thread and Context
The event loop
Callback queue
MicroTask queue
Async JavaScript

which we will cover in our future blogs. In this blog, we focus on building a strong mental model of the JS engine itself.

Does JavaScript Run on Its Own?

The simple answer is No.

JavaScript code cannot do anything on its own unless it is executed inside a Runtime Environment.

A runtime environment provides all the necessary tools, libraries, and features required for JavaScript to interact with the real world such as handling clicks, accessing files, or making network requests.

What Is a JavaScript Runtime Environment?

JavaScript Runtime Environment is a system where JavaScript code lives and runs.

You may have heard some popular runtime environments, such as:

Web Browsers (Chrome, Firefox, Safari)
Node.js
Bun
Deno

All of these provide an environment that allows JavaScript to execute.

What Does a Runtime Environment Provide?

Runtime environment offers:

JavaScript Engine (the heart ♥️ of the runtime)
Environment-specific APIs
Event Loop, Callback Queue, and MicroTask Queue.

Together these components allow JavaScript to perform real-world tasks.

JavaScript Engine: The Heart of Runtime Environment

JavaScript Engine is the core component responsible for executing JavaScript code.

It is not something mysterious a JavaScript engine is simply a program that reads, compiles, and runs your code.

Popular JavaScript Engines

Different environments use different engines:

Chrome & Node.js → V8 Engine
Firefox → SpiderMonkey
Safari → JavaScriptCore

Environment Specific APIs

Runtime environments also provide APIs which allow JavaScript to communicate with other software and systems. APIs depends on which environment they are in (like, Browser, Server, etc)

Browser APIs Examples
When JavaScript runs in a browser it gets access to:

DOM (Document Object Model)
Fetch API
setTimeout and setInterval
localStorage
Event handling APIs

Server-Side APIs (Node.js)

In server environments like Node.js, JavaScript has access to APIs such as:

File System (fs module)
Networking
Global objects
Process management

These APIs are not available in the browser which shows that APIs depend on the runtime environment.

Event Loop (Brief Overview)

The runtime environment also contains:

Event Loop
Callback Queue
Microtask Queue

These components handle asynchronous operations in JavaScript. We will discuss them in detail in upcoming blogs.

Inside the JavaScript V8 Engine

Now let’s take a deeper look at how a JavaScript V8 Engine (which is the most popular one) works internally.

Core Components of a JavaScript V8 Engine

1. Heap Memory

Heap Memory is an unstructured memory space used to store:

Objects
Variables
Functions

It is mainly used for dynamic memory allocation.

2. Call Stack

The Call Stack keeps track of:

Function calls
Execution context

It follows the Last In First Out (LIFO) principle. We’ll discuss this in detail in the next blog.

Additional V8 Engine Components

Modern JavaScript engines like V8 also include several optimisation and processing components:

1. Parser

Reads JavaScript code
Converts it into AST (Abstract Syntax Tree)
AST represents code in a tree structured format

2. Interpreter

Reads and executes code line by line
Produces intermediate bytecode

3. JIT Compiler (Just-In-Time Compiler)

Converts byte code into machine readable code
Improves performance by optimising frequently executed code

4. Garbage Collector

Automatically cleans unused memory
Removes objects and variables that are no longer in use

In our next blog, we will understand the working and execution of JavaScript V8 Engine with the help of a simple code snippet example.

Let’s quickly revise what we learnt in this blog.

Summary:

The JavaScript language itself is limited until and unless it is inside of a Runtime environment.
The runtime environment acts as a container that provides additional context, tools, and capabilities, enabling JavaScript to interact with browsers, servers, and outside world.
The runtime environment comprises of JS Engine, environment specific APIs, Event Loop, Callback Queue, and MicroTask queue.
Engine is the main working component of a runtime, which handles the execution.
JavaScript V8 Engine comprises of a Heap Memory, Call Stack, Parser, JIT Compiler, Interpreter, and a Garbage Collector.

What’s Next?

In our next blog, we will understand the execution and working of the JavaScript engine with the help of a simple code example, where we will explore the: