Introduction

Understanding the JavaScript execution model is essential for writing efficient code, debugging asynchronous behavior, and performing well in technical interviews. Although JavaScript is single-threaded, it can handle asynchronous operations in a non-blocking way. This is possible because of the Call Stack, Memory Heap, Web APIs, Queues, and the Event Loop working together.

This article explains the complete execution model in a structured and practical way.

1. JavaScript is Single-Threaded

JavaScript executes one piece of code at a time. It has:

  • One Call Stack
  • One Memory Heap
  • One main thread of execution

That means only one function can run at a time.

However, JavaScript can handle asynchronous tasks like timers, API calls, and user interactions without blocking the main thread. To understand how, we need to explore the internal components.

2. JavaScript Engine Overview

JavaScript runs inside a JavaScript engine (for example, V8 in Chrome and Node.js).

A JavaScript engine mainly consists of:

  1. Memory Heap
  2. Call Stack

3. Memory Heap (Where Data Is Stored)

The Memory Heap is where all data is stored:

  • Variables
  • Objects
  • Arrays
  • Functions

Example:

const user = { name: "Engineer" };
const count = 10;

In this example:

  • The object { name: "Engineer" } is stored in the heap.
  • The variable user holds a reference to that object.
  • The primitive value 10 is stored directly.

Important Concepts

  • Primitive types (number, string, boolean, null, undefined, symbol, bigint) are stored directly.
  • Reference types (object, array, function) are stored in the heap, and variables store references to them.

The heap is used only for storing data, not for executing code.

4. Call Stack (Where Code Executes)

The Call Stack is where JavaScript executes functions.

It follows the LIFO principle (Last In, First Out).

Example:

function first() {
  second();
}
 
function second() {
  console.log("Hello");
}
 
first();

Step-by-Step Execution

  1. Global execution context is pushed to the stack.
  2. first() is called and pushed onto the stack.
  3. Inside first(), second() is called and pushed.
  4. Inside second(), console.log() is pushed.
  5. console.log() finishes and is popped.
  6. second() finishes and is popped.
  7. first() finishes and is popped.

The stack becomes empty.

If the stack grows too large (for example, due to infinite recursion), a "Maximum call stack size exceeded" error occurs.

5. Synchronous vs Asynchronous Code

Synchronous Code

Synchronous code executes line by line:

console.log("One");
console.log("Two");
console.log("Three");

Output:

One
Two
Three

Each line waits for the previous one to finish.

Asynchronous Code

Now consider:

setTimeout(() => {
  console.log("Async");
}, 1000);
 
console.log("Sync");

Output:

Sync
Async

Even though setTimeout appears first, the synchronous code runs before the asynchronous callback.

Why does this happen?

Because asynchronous operations are handled outside the Call Stack.

6. Web APIs (Provided by the Runtime)

Functions like:

  • setTimeout
  • setInterval
  • fetch
  • DOM events

are not part of the JavaScript engine itself.

They are provided by the runtime environment:

  • Browsers provide DOM APIs and timers.
  • Node.js provides its own APIs.

When you call:

setTimeout(callback, 1000);

This happens:

  1. setTimeout is pushed to the Call Stack.
  2. It registers the timer in the Web API environment.
  3. The timer runs outside the Call Stack.
  4. After 1000ms, the callback is placed in a queue.

7. The Callback Queue (Macrotask Queue)

When an asynchronous operation completes, its callback function is placed in the Callback Queue (also called the Macrotask Queue).

Examples of macrotasks:

  • setTimeout
  • setInterval
  • setImmediate (Node.js)
  • DOM events

Callbacks wait in this queue until the Call Stack becomes empty.

They are not executed immediately.

8. Microtask Queue (Higher Priority)

JavaScript also has a Microtask Queue.

Microtasks include:

  • Promise .then(), .catch(), .finally()
  • queueMicrotask

Microtasks have higher priority than macrotasks.

Example:

console.log("Start");
 
setTimeout(() => console.log("Timeout"));
 
Promise.resolve().then(() => console.log("Promise"));
 
console.log("End");

Output:

Start
End
Promise
Timeout

Why This Happens

  1. All synchronous code runs first.
  2. After the stack becomes empty, microtasks are executed.
  3. Then macrotasks are executed.

The microtask queue is always cleared before the next macrotask is processed.

9. The Event Loop (The Coordinator)

The Event Loop is responsible for coordinating execution between the Call Stack and the Queues.

It continuously checks:

  • Is the Call Stack empty?

If yes:

  1. Execute all microtasks.
  2. Then execute one macrotask.
  3. Repeat the process.

High-level flow:

  1. Code enters Call Stack.
  2. Async functions are handled by Web APIs.
  3. Completed async callbacks go to queues.
  4. Event Loop moves tasks from queues to Call Stack when it is empty.
  5. Execution continues.

This mechanism makes JavaScript non-blocking, even though it is single-threaded.

10. Visual Execution Flow

High-level architecture:

Memory Heap        Call Stack
     |                 |
     |                 |
     -------------------
             |
          Web APIs
             |
     -------------------
     |               |
Microtask Queue   Macrotask Queue
             |
          Event Loop
             |
         Call Stack

11. Common Interview Questions

Why does setTimeout(fn, 0) not execute immediately?

Because the callback is placed in the macrotask queue. It must wait until:

  1. All synchronous code finishes.
  2. All microtasks finish.
  3. The Call Stack becomes empty.

Only then can it be executed.

What happens if the Microtask Queue never becomes empty?

If microtasks continuously add new microtasks (for example, recursive Promise chains), macrotasks may be delayed indefinitely. This is called microtask starvation.

12. Why This Matters in Real Applications

Understanding the execution model helps you:

  • Debug asynchronous bugs
  • Avoid race conditions
  • Understand Promise behavior
  • Optimize API handling in Node.js
  • Improve React and Next.js performance
  • Prevent blocking the event loop in backend systems

In backend systems, blocking the event loop can prevent other requests from being processed, reducing performance.

13. Final Summary

JavaScript is single-threaded but non-blocking.

It uses:

  • Memory Heap for storing data
  • Call Stack for executing code
  • Web APIs for handling asynchronous operations
  • Microtask and Macrotask Queues for scheduling callbacks
  • Event Loop to coordinate execution

Together, these components allow JavaScript to handle concurrency efficiently while running on a single thread.