❮ Previous Next ❯

Event Loop

  • This lesson explains the JavaScript event loop and execution model.

  • Introduction to Event Loop 

    Event Loop is the heart of JavaScript’s asynchronous behavior.
    JavaScript is single-threaded, but still it can handle multiple tasks like API calls, timers, and user events - thanks to the Event Loop.

    Understanding Event Loop is very important for:
    Clean async code
    Debugging issues
    Interview preparation
    Real-world projects

    What is Event Loop ?

    Event Loop is a mechanism that manages execution of code, handling asynchronous operations, and deciding what runs next.

    Simple Definition

    Event Loop continuously checks the Call Stack and Callback Queue and executes tasks accordingly.

    Key Components of Event Loop

    Call Stack

    • Where function execution happens

    • Works in LIFO (Last In First Out)

    • Only one function runs at a time

    Web APIs

    • Provided by browser (or Node.js environment)

    • Handles async tasks like:

      • setTimeout

      • DOM events

      • fetch API

    Callback Queue (Task Queue)

    • Stores callbacks from async operations

    • Waits for Call Stack to be empty

    Microtask Queue

    • Higher priority than Callback Queue

    • Used by:

      • Promises (.then, .catch)

      • MutationObserver

    How Event Loop Works

    Step-by-Step Flow

    1. Code starts executing → goes into Call Stack

    2. Async task (setTimeout / fetch) goes to Web APIs

    3. After completion → callback moves to Queue

    4. Event Loop checks:

      • If Call Stack is empty → push callback to stack

    5. Execution continues

Introduction to Event Loop

Understand how JavaScript handles asynchronous tasks using the Event Loop, Call Stack, and Queues. 

// Event Loop 

console.log("Start");

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

console.log("End");
printed

// Final Output:
// Start
// End
// Timeout

  • Why Output Like This ?

    Explanation

    • "Start" → goes to Call Stack → executes

    • setTimeout → goes to Web API

    • "End" → executes immediately

    • Timeout callback → goes to Queue

    • Event Loop → moves it to Call Stack

    • Executes last

Microtask vs Callback Queue

Learn how Promises (microtasks) execute before setTimeout (callback queue) in the Event Loop. 

// Microtask vs Callback Queue 

console.log("Start");

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

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

console.log("End");

// Final Output:
// Start
// End
// Promise
// Timeout

  • Why Promise Runs First ?

    Explanation

    • Promise → goes to Microtask Queue

    • setTimeout → goes to Callback Queue

    • Event Loop priority:

      1. Call Stack

      2. Microtask Queue

      3. Callback Queue

    Example of Event Loop

    Imagine a Restaurant:

    • Call Stack = Chef (working on one order)

    • Web APIs = Helpers (handling tasks like baking)

    • Callback Queue = Orders ready to serve

    • Event Loop = Manager (decides what to serve next)

    Common Async Functions Using Event Loop

    • setTimeout()

    • setInterval()

    • fetch()

    • Promise

    • async/await

    Advantages of Event Loop

    • Enables asynchronous programming

    • Non-blocking behavior

    • Better performance

    • Smooth UI experience

    Disadvantages of Event Loop

    • Can be confusing for beginners

    • Debugging async code is tricky

    • Callback hell (without proper handling)

      Common Beginner Mistakes

      • Thinking setTimeout runs immediately

      • Not understanding Promise priority

      • Ignoring async behavior

      • Writing blocking code

      Best Practices

      • Prefer async/await over callbacks

      • Understand execution order

      • Avoid blocking code

      • Use Promises properly

      • Keep async code clean and readable

    ❮ Previous Next ❯