# How Does JavaScript Code Run?

%[https://youtu.be/nqsevuRskdE] 

## 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768330074956/d06eda44-f935-46b3-9e53-d2c0fdcb0f06.gif align="center")

## 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
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768330443877/336e9fcd-25d1-4ba3-8cc2-8406d7da6eac.gif align="center")

## 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
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768331593719/baf20026-af30-432c-82c3-a565345ee7c0.gif align="center")

## 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768331963751/1882d34e-ee7e-47cd-8036-adb8f098ea3d.gif align="center")

## 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768332215403/c4b5781a-b05b-4eb8-acb3-be58cdfddcf1.gif align="center")

### 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768386838758/9b21f4ae-055e-44eb-a076-170a3776e11e.gif align="center")

## 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
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1768332568968/e9fee7c7-d2a3-445f-add0-fd90b6709d1d.gif align="center")

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:

* Call Stack and Heap Memory in action
    
* Execution Thread and Execution Context
    

**Stay connected with hasabTech:**

* Website: [**https://hasab.tech/**](https://hasab.tech/)
    
* Facebook: [**https://www.facebook.com/hasabTech**](https://web.facebook.com/hasabTech)
    
* LinkedIn: [**https://www.linkedin.com/company/hasabtech**](https://www.linkedin.com/company/hasabtech)
    
* X (Twitter): [**https://x.com/hasabTec**](https://x.com/hasabTec)
    
* YouTube: [**https://youtube.com/@hasabTech**](https://youtube.com/@hasabTech)
    
* TikTok: [**https://tiktok.com/**](https://tiktok.com/@hasabtech)**@hasabTech**