Skip to content
Fenil Sonani

Understanding Event Loop and Concurrency in JavaScript: A Beginner\

Understanding Event Loop and Concurrency in JavaScript: A Beginner’s Guide

JavaScript is often described as single-threaded, meaning it can only perform one task at a time. Yet, JavaScript applications can handle tasks like fetching data, reading files, or responding to user events without blocking each other. How does this happen? The answer lies in the JavaScript Event Loop and its ability to manage concurrency through asynchronous operations. In this guide, we’ll explore the event loop, explain how JavaScript handles tasks, and dive into concepts like the call stack, task queue, and microtask queue.

What is the JavaScript Event Loop?

The Event Loop is the mechanism JavaScript uses to manage multiple tasks in an efficient way, even though it only has a single thread. It allows JavaScript to handle asynchronous operations, meaning tasks can start and complete without blocking the main thread.

JavaScript Event Loop Architecture

graph TB
    subgraph "JavaScript Runtime Environment"
        HEAP[Memory Heap<br/>Object Storage]
        STACK[Call Stack<br/>LIFO Execution]
    end
    
    subgraph "Browser/Node.js APIs"
        DOM[DOM APIs<br/>setTimeout, setInterval]
        HTTP[HTTP Requests<br/>fetch, XMLHttpRequest]
        TIMER[Timer APIs<br/>setTimeout callbacks]
        IO[I/O Operations<br/>File system, Network]
    end
    
    subgraph "Event Loop Queues"
        MICRO[Microtask Queue<br/>Promise.then(), queueMicrotask()]
        MACRO[Task Queue (Macrotask)<br/>setTimeout, setInterval, I/O]
        RENDER[Render Queue<br/>requestAnimationFrame]
    end
    
    subgraph "Event Loop Process"
        EL[Event Loop<br/>Single Thread Monitor]
        CHECK1{Call Stack Empty?}
        CHECK2{Microtasks Available?}
        CHECK3{Tasks Available?}
    end
    
    STACK --> CHECK1
    CHECK1 -->|Yes| CHECK2
    CHECK2 -->|Yes| MICRO
    MICRO --> STACK
    CHECK2 -->|No| CHECK3
    CHECK3 -->|Yes| MACRO
    MACRO --> STACK
    CHECK3 -->|No| RENDER
    RENDER --> STACK
    
    DOM --> MACRO
    HTTP --> MICRO
    TIMER --> MACRO
    IO --> MACRO
    
    EL --> CHECK1
    
    style STACK fill:#e8f5e8
    style MICRO fill:#e1f5fe
    style MACRO fill:#fff3e0
    style EL fill:#f3e5f5

Why is the Event Loop Important?

In a JavaScript environment, such as the browser or Node.js, multiple tasks are running, including rendering the UI, fetching data, and listening for user input. The event loop allows JavaScript to keep the UI responsive by offloading longer tasks to asynchronous functions, which will be completed independently.

Key Concepts in the Event Loop

To understand the event loop, let’s look at some key components:

1. Call Stack

The call stack is a data structure that tracks the execution of functions. Every time a function is called, it’s added to the stack. When a function completes, it’s removed from the stack. The call stack is a Last In, First Out (LIFO) structure, meaning the most recent function called is the first to be completed.

2. Task Queue

The task queue holds tasks waiting to be executed. When the call stack is empty, the event loop picks up tasks from the task queue and moves them to the call stack. These tasks usually include setTimeout and setInterval callbacks.

3. Microtask Queue

The microtask queue is similar to the task queue but has a higher priority. Microtasks include promises and the process.nextTick function in Node.js. When the call stack is empty, the event loop checks the microtask queue before the task queue, ensuring microtasks are completed first.

How the Event Loop Works (Step-by-Step)

  1. JavaScript executes functions in the call stack until it’s empty.
  2. Once the call stack is empty, the event loop checks the microtask queue for any pending tasks.
  3. If there are tasks in the microtask queue, they are moved to the call stack and executed.
  4. If the microtask queue is empty, the event loop checks the task queue and processes any pending tasks.
  5. The process repeats, ensuring the application remains responsive.

Synchronous vs. Asynchronous Code

Understanding the event loop also involves knowing the difference between synchronous and asynchronous code.

Synchronous vs Asynchronous Execution Patterns

graph TB
    subgraph "Synchronous Execution"
        SYNC_START[📝 Start Execution]
        SYNC_TASK1[Task 1: console.log('A')]
        SYNC_BLOCK[🚫 BLOCKING Operation<br/>Long-running loop]
        SYNC_TASK2[Task 2: console.log('B')]
        SYNC_END[✅ End Execution]
        
        SYNC_TIME1[Time: 0ms]
        SYNC_TIME2[Time: 10ms]
        SYNC_TIME3[Time: 2000ms<br/>⚠️ UI Frozen]
        SYNC_TIME4[Time: 2010ms]
        SYNC_TIME5[Time: 2020ms]
    end
    
    subgraph "Asynchronous Execution"
        ASYNC_START[📝 Start Execution]
        ASYNC_TASK1[Task 1: console.log('A')]
        ASYNC_NONBLOCK[⚡ NON-BLOCKING Operation<br/>setTimeout(callback, 2000)]
        ASYNC_TASK2[Task 2: console.log('B')]
        ASYNC_CALLBACK[Callback: console.log('Delayed')]
        ASYNC_END[✅ End Execution]
        
        ASYNC_TIME1[Time: 0ms]
        ASYNC_TIME2[Time: 5ms]
        ASYNC_TIME3[Time: 10ms<br/>✅ UI Responsive]
        ASYNC_TIME4[Time: 15ms]
        ASYNC_TIME5[Time: 2015ms]
    end
    
    subgraph "Comparison Results"
        SYNC_RESULT[❌ Synchronous Result<br/>UI blocks for 2 seconds<br/>Poor user experience<br/>Single-threaded bottleneck]
        ASYNC_RESULT[✅ Asynchronous Result<br/>UI remains responsive<br/>Better user experience<br/>Concurrent-like behavior]
    end
    
    SYNC_START --> SYNC_TASK1
    SYNC_TASK1 --> SYNC_BLOCK
    SYNC_BLOCK --> SYNC_TASK2
    SYNC_TASK2 --> SYNC_END
    
    SYNC_TIME1 --> SYNC_TIME2
    SYNC_TIME2 --> SYNC_TIME3
    SYNC_TIME3 --> SYNC_TIME4
    SYNC_TIME4 --> SYNC_TIME5
    
    ASYNC_START --> ASYNC_TASK1
    ASYNC_TASK1 --> ASYNC_NONBLOCK
    ASYNC_NONBLOCK --> ASYNC_TASK2
    ASYNC_TASK2 --> ASYNC_END
    ASYNC_NONBLOCK -.-> ASYNC_CALLBACK
    
    ASYNC_TIME1 --> ASYNC_TIME2
    ASYNC_TIME2 --> ASYNC_TIME3
    ASYNC_TIME3 --> ASYNC_TIME4
    ASYNC_TIME4 --> ASYNC_TIME5
    
    SYNC_END --> SYNC_RESULT
    ASYNC_END --> ASYNC_RESULT
    
    style SYNC_BLOCK fill:#ffebee
    style SYNC_TIME3 fill:#ffebee
    style ASYNC_NONBLOCK fill:#e8f5e8
    style ASYNC_TIME3 fill:#e8f5e8
    style SYNC_RESULT fill:#ffebee
    style ASYNC_RESULT fill:#e8f5e8

Synchronous Code

Synchronous code executes sequentially, meaning each line must complete before the next one starts. This can block the call stack, causing delays in responding to user input if a function takes too long to complete.

// @filename: index.js
console.log('Start')
for (let i = 0; i < 1e9; i++) {} // Long-running task
console.log('End')

In the example above, End will only print after the loop finishes, blocking the main thread.

Asynchronous Code

Asynchronous code allows JavaScript to initiate a task, such as fetching data from a server, and then continue executing other code without waiting for the task to complete. Once the task completes, its callback is added to the task queue or microtask queue, depending on its type.

// @filename: index.js
console.log('Start')
setTimeout(() => console.log('Asynchronous task complete'), 1000)
console.log('End')

Here, End prints immediately, while the setTimeout callback runs after 1 second, demonstrating asynchronous behavior.

Event Loop in Action: Understanding Examples

Let’s go through some examples to see how the event loop handles tasks.

Example 1: setTimeout and Synchronous Code

// @filename: index.js
console.log('Start')

setTimeout(() => {
  console.log('Timeout callback')
}, 0)

console.log('End')

Explanation

  1. Start is logged first.
  2. setTimeout is asynchronous, so its callback goes to the task queue with a delay of 0 ms.
  3. End is logged next as it’s part of the synchronous code.
  4. Finally, when the call stack is empty, the event loop picks up the setTimeout callback from the task queue, logging Timeout callback.

Example 2: Promise vs. setTimeout

// @filename: index.js
console.log('Start')

setTimeout(() => {
  console.log('Timeout')
}, 0)

Promise.resolve().then(() => {
  console.log('Promise')
})

console.log('End')

Explanation

  1. Start is logged.
  2. setTimeout callback is added to the task queue with a delay of 0 ms.
  3. Promise callback goes to the microtask queue.
  4. End is logged.
  5. Since the call stack is empty, the event loop processes the microtask queue first, logging Promise.
  6. After that, the event loop processes the task queue, logging Timeout.

Output:

Start
End
Promise
Timeout

Common Use Cases for the Event Loop

Understanding the event loop can help you manage JavaScript’s asynchronous nature more effectively.

1. Handling Delays and Animations

Using setTimeout or requestAnimationFrame can help you manage delays or create smooth animations without blocking the UI.

// @filename: index.js
setTimeout(() => {
  console.log('Execute after delay')
}, 500)

2. Working with Promises

Promises are essential for managing asynchronous tasks in JavaScript. They allow you to perform operations in a non-blocking way, keeping the main thread free.

// @filename: index.js
fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log(data))

3. Preventing Long-Running Tasks from Blocking the UI

If you have a heavy computation, consider breaking it into smaller chunks or running it in a Web Worker. This approach allows the event loop to process other tasks and maintain a responsive UI.

// @filename: index.js
function heavyComputation() {
  // break the task into smaller chunks
  for (let i = 0; i < 1000; i++) {
    // perform task
  }
  setTimeout(heavyComputation, 0)
}
heavyComputation()

Event Loop Execution Flow

sequenceDiagram
    participant JS as JavaScript Code
    participant Stack as Call Stack
    participant WebAPI as Web APIs
    participant MicroQ as Microtask Queue
    participant TaskQ as Task Queue
    participant Loop as Event Loop
    
    Note over JS,Loop: Synchronous Code Execution
    JS->>Stack: console.log('Start')
    Stack->>JS: Execute immediately
    
    Note over JS,Loop: Asynchronous Operations
    JS->>WebAPI: setTimeout(callback, 0)
    WebAPI->>TaskQ: Add callback to Task Queue
    
    JS->>WebAPI: Promise.resolve().then(callback)
    WebAPI->>MicroQ: Add callback to Microtask Queue
    
    JS->>Stack: console.log('End')
    Stack->>JS: Execute immediately
    
    Note over JS,Loop: Event Loop Processing
    Loop->>Stack: Check if empty
    Stack->>Loop: ✅ Empty
    
    Loop->>MicroQ: Check microtasks
    MicroQ->>Stack: Move Promise callback
    Stack->>JS: Execute Promise callback
    Stack->>Loop: ✅ Empty again
    
    Loop->>MicroQ: Check microtasks
    MicroQ->>Loop: ❌ No more microtasks
    
    Loop->>TaskQ: Check task queue
    TaskQ->>Stack: Move setTimeout callback
    Stack->>JS: Execute setTimeout callback
    
    Note over JS,Loop: Output Order: Start → End → Promise → Timeout

Visualizing the Event Loop

Imagine the event loop as a cycle that continually checks for tasks to execute. Here’s a simplified view:

  1. The call stack: Runs synchronous code.
  2. The microtask queue: Handles promise callbacks and other microtasks.
  3. The task queue: Manages callbacks from setTimeout, setInterval, and other asynchronous APIs.

Whenever the call stack is empty, the event loop pulls tasks from the microtask queue first, then the task queue.

Conclusion

The JavaScript Event Loop plays a fundamental role in how JavaScript handles concurrency, enabling it to execute tasks without blocking the main thread. By understanding the event loop, you’ll be better equipped to write efficient, non-blocking code that keeps your application responsive.

Mastering concepts like the call stack, task queue, and microtask queue allows you to manage asynchronous tasks effectively, whether you’re working with promises, setTimeout, or async/await. Start experimenting with these concepts in your projects to see the event loop in action!
Beginner Friendly
Share:

Continue Reading

Understanding JavaScript’s Event Loop: How Asynchronous Code Works

JavaScript’s event loop is the engine behind its asynchronous behavior, allowing it to handle multiple tasks without blocking the main thread. While JavaScript is single-threaded, the event loop enables it to manage asynchronous operations like API calls, timers, and UI events smoothly. In this guide, we’ll break down the event loop, explaining key concepts like the call stack, task queue, microtask queue, and how they interact to keep JavaScript responsive.

Read article
API Development

JavaScript Promises: Mastering Asynchronous Programming

Asynchronous programming is a crucial skill in JavaScript development, enabling you to manage tasks like fetching data, handling user input, and executing operations without blocking the main thread. JavaScript promises are a fundamental tool for handling asynchronous tasks, providing a clear and structured way to manage async operations. In this guide, we’ll explore how promises work, cover chaining and error handling, and provide practical examples to help you use promises effectively.

Read article

JavaScript Prototypal Inheritance: Understanding the Power of Prototypes

JavaScript’s prototypal inheritance is a unique and powerful way to manage shared behavior and build object hierarchies. Unlike classical inheritance in languages like Java or C++, JavaScript’s inheritance model is based on objects inheriting from other objects through a prototype chain. In this guide, we’ll dive into prototypal inheritance, explore how the prototype chain works, and discuss how to use prototypes effectively in your code.

Read article