{"id":8091,"date":"2025-07-21T01:32:25","date_gmt":"2025-07-21T01:32:24","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=8091"},"modified":"2025-07-21T01:32:25","modified_gmt":"2025-07-21T01:32:24","slug":"event-loop-and-callback-queue-in-js-9","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/event-loop-and-callback-queue-in-js-9\/","title":{"rendered":"Event Loop and Callback Queue in JS"},"content":{"rendered":"

Understanding the Event Loop and Callback Queue in JavaScript<\/h1>\n

JavaScript is single-threaded, meaning it can only execute one task at a time. However, it has a powerful model to handle asynchronous operations. Two key components in this model are the Event Loop<\/strong> and Callback Queue<\/strong>. In this article, we will dive deep into these concepts, understand how they work, explore examples, and discuss their implications for JavaScript developers.<\/p>\n

What is the Event Loop?<\/h2>\n

The Event Loop is a core part of JavaScript’s concurrency model. It is the mechanism that allows JavaScript to perform non-blocking operations even though it is single-threaded. To understand the Event Loop, we need to grasp the concepts of the call stack<\/strong>, the Web APIs<\/strong>, and the callback queue<\/strong>.<\/p>\n

The Call Stack<\/h2>\n

The call stack is a data structure that keeps track of function execution in JavaScript. When a function is invoked, it is placed on the top of the stack. When the function is completed, it is popped off the stack. Here\u2019s a visual representation:<\/p>\n

Function A\nFunction B\nFunction C\n<\/code><\/pre>\n
In the above example, if Function C had to call another function, that new function would be placed on the stack until it returns. The call stack operates in a last-in, first-out (LIFO) manner.<\/p>\n
Web APIs<\/h2>\n
Web APIs are provided by the browser to handle asynchronous operations such as timers (setTimeout, setInterval), AJAX requests (XMLHttpRequest, Fetch API), event listeners, etc. When these APIs are invoked, they run outside of the call stack in the background, and once they finish their job, they push their callback functions to the callback queue.<\/p>\n
The Callback Queue<\/h2>\n
The Callback Queue is a queue that holds messages or callbacks to be executed once the call stack is empty. When asynchronous operations, like an AJAX request or a timer, complete, their associated callbacks are moved to this queue.<\/p>\n
How the Event Loop Works<\/h2>\n
Here\u2019s how the Event Loop orchestrates operations:<\/p>\n
    \n
  1. JavaScript runs the main thread and executes tasks in the call stack.<\/li>\n
  2. If it encounters an asynchronous operation, it hands it over to the Web API.<\/li>\n
  3. Once the operation is complete, its callback is added to the callback queue.<\/li>\n
  4. The Event Loop continuously checks if the call stack is empty.<\/li>\n
  5. If the call stack is empty, the Event Loop pulls a callback from the callback queue and pushes it onto the call stack.<\/li>\n<\/ol>\n
    This process continues, allowing JavaScript to handle multiple operations without blocking the main thread.<\/p>\n
    Visualizing the Event Loop<\/h2>\n
    Below is a simplified flowchart of how the Event Loop interacts with the call stack and callback queue:<\/p>\n
    \n +------------------+\n |     Call Stack   |\n +--------+---------+\n          |\n          |   +------------------+\n          +-->|   Web APIs       |\n          |   +--------+---------+\n          |            | \n          |   +------------------+\n          +-->|   Callback Queue |\n              +------------------+\n                      |\n                      |\n                  Event Loop\n<\/pre>\n
    Example: Simple Asynchronous Code<\/h2>\n
    Let\u2019s look at an example that illustrates the Event Loop and Callback Queue:<\/p>\n
    console.log('Start'); \/\/ 1\n\nsetTimeout(() => {           \/\/ 2\n    console.log('Timeout');   \/\/ 4\n}, 0);\n\nconsole.log('End'); \/\/ 3\n<\/code><\/pre>\n
    The output of the above code would be:<\/p>\n
    Start\nEnd\nTimeout\n<\/code><\/pre>\n
    Here\u2019s a step-by-step breakdown of what happens:<\/p>\n
      \n
    1. Line 1 logs ‘Start’.<\/li>\n
    2. Line 2 calls setTimeout, which schedules its callback in the Web API. Immediate execution is not halted.<\/li>\n
    3. Line 3 logs ‘End’.<\/li>\n
    4. Once the call stack is empty, the callback from setTimeout is pushed onto the callback queue and executed, logging ‘Timeout’.<\/li>\n<\/ol>\n
      Understanding Promises and Microtasks<\/h2>\n
      Alongside the callback queue, JavaScript introduces the concept of Promises<\/strong> and the Microtask Queue<\/strong>. Promises allow for cleaner handling of asynchronous operations. When a promise is resolved, its .then() callback is added to the Microtask Queue instead of the callback queue.<\/p>\n
      The Event Loop prioritizes the Microtask Queue over the Callback Queue. Here\u2019s how it affects the execution order:<\/p>\n
      console.log('Start'); \/\/ 1\n\nsetTimeout(() => { \n    console.log('Timeout'); \/\/ 4\n}, 0);\n\nPromise.resolve().then(() => {\n    console.log('Promise resolved'); \/\/ 3\n});\n\nconsole.log('End'); \/\/ 2\n<\/code><\/pre>\n
      The output will be:<\/p>\n
      Start\nEnd\nPromise resolved\nTimeout\n<\/code><\/pre>\n
      In this example:<\/p>\n
        \n
      1. Lines 1 and 2 execute normally.<\/li>\n
      2. The promise gets resolved, and its then callback is queued in the Microtask Queue.<\/li>\n
      3. Once the main call stack is empty, it processes the Microtask Queue before moving to the Callback Queue, leading to ‘Promise resolved’ being logged before ‘Timeout’.<\/li>\n<\/ol>\n
        Together and Working as One<\/h2>\n
        In summary, the Event Loop, Call Stack, Callback Queue, and Microtask Queue work together to give JavaScript its asynchronous capabilities. JavaScript developers must understand this model to write efficient and performant code.<\/p>\n
        Common Pitfalls<\/h2>\n
        While the Event Loop is powerful, developers often face some challenges:<\/p>\n