JavaScript Event Loop, Call Stack, and Concurrency Explained

Understanding How JavaScript Executes Code Asynchronously

If you’ve ever wondered how JavaScript handles multiple tasks—like fetching data while still responding to user interactions—this module is for you. To truly master asynchronous JavaScript, you must understand the call stack, event loop, callback queue, and microtask queue.

Let’s break it all down.

Table of Contents

1. JavaScript: Single-Threaded but Non-Blocking
2. The Call Stack
3. Web APIs and Asynchronous Code
4. The Callback Queue (Task Queue)
5. The Event Loop
6. Microtasks and the Job Queue
7. Example: Sync vs Async Execution
8. Visualizing the Event Loop
9. Common Pitfalls and Interview Scenarios
10. Conclusion

1. JavaScript: Single-Threaded but Non-Blocking

JavaScript is single-threaded, meaning it executes one command at a time in a main thread. But it’s also asynchronous and non-blocking, thanks to the browser’s or Node’s underlying event loop system.

This enables:

• Non-blocking I/O
• Smooth UI interactions
• Async programming with callbacks, promises, and async/await

2. The Call Stack

The call stack is a data structure that keeps track of function calls. When a function is invoked, it’s pushed onto the stack. When it finishes, it’s popped off.

function greet() {
  console.log("Hello!");
}

function start() {
  greet();
}

start();

Call stack order:

1. start() → greet() → console.log("Hello!")

3. Web APIs and Asynchronous Code

When you run something like setTimeout, it doesn’t block the stack. Instead, the browser or Node environment delegates it to Web APIs and offloads it.

javascriptCopyEditconsole.log("Start");
setTimeout(() => {
  console.log("Inside timeout");
}, 1000);
console.log("End");

Output:

Start
End
Inside timeout

The timeout’s callback waits outside the call stack, and the event loop pushes it in only when the stack is clear.

4. The Callback Queue (Task Queue)

When async operations like setTimeout, event listeners, or AJAX calls finish, their callbacks are sent to the task queue.

The event loop keeps checking:

• Is the call stack empty?
• If yes, move the oldest item from the task queue to the call stack.

5. The Event Loop

The event loop is a mechanism that coordinates the call stack and the queues.

Its job:

• Keep the program running
• Push async callbacks into the stack when ready
• Maintain non-blocking behavior

Think of it as a traffic cop that decides when callbacks can run.

6. Microtasks and the Job Queue

Microtasks are higher-priority tasks that come from:

• .then() of a Promise
• queueMicrotask()

They are placed in the microtask queue, which is processed before the next task queue cycle.

console.log("1");

setTimeout(() => console.log("2"), 0);

Promise.resolve().then(() => console.log("3"));

console.log("4");

Output:

1
4
3
2

Because .then() runs before setTimeout, even with a delay of 0.

7. Example: Sync vs Async Execution

function syncExample() {
  console.log("A");
  setTimeout(() => console.log("B"), 0);
  Promise.resolve().then(() => console.log("C"));
  console.log("D");
}

syncExample();

Output:

A
D
C
B

8. Visualizing the Event Loop

Imagine this:

• Call Stack: Executes code line-by-line.
• Web APIs: Wait for setTimeout, fetch, etc.
• Callback Queue: Stores ready callbacks (setTimeout, DOM events).
• Microtask Queue: Stores promise callbacks.
• Event Loop: Moves tasks from the queues to the stack.

Order of Execution:

1. Call stack
2. Microtasks
3. Next Task Queue

9. Common Pitfalls and Interview Scenarios

• Starvation of task queue: Heavy microtasks can block task queue.
• setTimeout(fn, 0) still runs after current stack + microtasks.
• Deep nesting can overflow the call stack.
• Misunderstanding async nature leads to bugs like:let result; fetchData().then(res => result = res); console.log(result); // undefined!

10. Conclusion

The Event Loop is at the core of how JavaScript handles concurrency and asynchronous code. Understanding this allows you to write non-blocking, performant applications, and ace those tricky JS interviews.

Next up: Working with JSON and LocalStorage