What is the Event Loop in JavaScript?

The Event Loop in JavaScript is a mechanism that handles the execution of multiple pieces of code asynchronously and ensures that non-blocking operations are executed efficiently.

It is a key part of JavaScript’s concurrency model because JavaScript is single-threaded (it can only execute one task at a time).

---

How the Event Loop Works (Overview)

1. Call Stack (Execution Stack) → Where functions are executed.
2. Web APIs / Browser APIs → For asynchronous tasks like setTimeout(), HTTP requests, DOM events, etc.
3. Task Queue (Callback Queue / Message Queue) → Holds callbacks (e.g., setTimeout() callback) waiting to be executed.
4. Microtask Queue (Priority Queue) → Holds Promises callbacks and queueMicrotask() tasks.
   (Higher priority than Task Queue)
5. Event Loop → Continuously monitors the Call Stack and Task Queues.
   • If the Call Stack is empty, it picks the next task from the Microtask Queue first.
   • Then it picks from the Task Queue if the Microtask Queue is empty.

---

Event Loop Working Flow (Step-by-Step)

1. Execute the code line by line (synchronous) and push functions onto the Call Stack.
2. Asynchronous tasks (like setTimeout(), Promises, I/O operations) are handled by Web APIs.
3. Once an asynchronous task completes, its callback is sent to the Queue.
   • Promises → Microtask Queue
   • setTimeout(), setInterval(), Events → Task Queue
4. Event Loop continuously checks:
   • If Call Stack is empty → Push tasks from Microtask Queue first.
   • If Microtask Queue is empty → Push tasks from Task Queue.
5. This process repeats indefinitely.

---

Visual Flow Example:

markdownCopyEdit1. Call Stack → [Main Code Execution]
2. Web API → Handles async tasks
3. Microtask Queue → Promises, queueMicrotask
4. Task Queue → setTimeout, setInterval, I/O tasks
5. Event Loop → Coordinates everything

---

Simple Example:

javascriptCopyEditconsole.log('Start');

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

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

console.log('End');

Output:

sqlCopyEditStart
End
Promise Resolved
Timeout

Explanation:

1. 'Start' is logged.
2. setTimeout() is sent to Web API → callback goes to Task Queue.
3. Promise.resolve() → callback goes to Microtask Queue.
4. 'End' is logged.
5. Event Loop sees Call Stack is empty:
   • Microtask Queue → Executes Promise Resolved.
   • Task Queue → Executes Timeout.

---

Key Points to Remember:

Concept	Explanation
Single-threaded	JavaScript executes one task at a time.
Call Stack	Executes synchronous code (LIFO structure).
Web APIs	Handles async tasks (e.g., setTimeout()).
Microtask Queue	Higher priority – Promises, queueMicrotask().
Task Queue	setTimeout(), setInterval(), DOM events.
Event Loop	Checks if Call Stack is empty → Pushes tasks from Microtask Queue first, then Task Queue.

---

Priority Order (Execution Order):

1. Call Stack → Synchronous code.
2. Microtask Queue → Promises, queueMicrotask().
3. Task Queue → setTimeout(), setInterval(), I/O, DOM Events.

---

Key Interview Points:

• Microtasks have higher priority than Tasks.
• Promises → Microtask Queue,
  setTimeout → Task Queue.
• Event Loop is the mechanism that orchestrates the Call Stack and Queues.

---

Let me know if you want any more details or need help with examples! 🚀