1. What is the Event Loop?

JavaScript is a single-threaded language, meaning it has only one main thread to execute code. To handle asynchronous tasks without blocking the program, JavaScript uses the Event Loop.

The Event Loop is the mechanism that allows JavaScript to manage asynchronous tasks like setTimeout, fetch, event listeners, and promises by coordinating different queues.

2. Call Stack, Web APIs, Task Queue, and Microtask Queue

Call Stack

The Call Stack is where JavaScript executes functions based on the LIFO (Last In, First Out) principle.

function foo() {
  console.log("Foo");
}

function bar() {
  foo();
}

bar();

Execution flow:

1. bar() is pushed onto the Call Stack.
2. bar() calls foo(), so foo() is pushed onto the Call Stack.
3. Once foo() completes, it is popped off the Call Stack.
4. Once bar() completes, it is popped off the Call Stack.

Web APIs

Functions like setTimeout, fetch, and event listeners don't run in the Call Stack; they are handed off to Web APIs.

console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
console.log("End");

Output:

Start
End
Timeout

Even though setTimeout has a 0ms delay, it doesn’t run immediately but is handed off to the Web APIs and then the Task Queue.

Task Queue (Macro-task Queue)

The Task Queue contains macro-tasks such as:

• setTimeout
• setInterval
• setImmediate (Node.js)
• I/O Callbacks

The Event Loop only processes one task from the Task Queue at a time and pushes it into the Call Stack if the Call Stack is empty.

Microtask Queue (Priority Queue)

The Microtask Queue has higher priority than the Task Queue and contains:

• Promises (resolve, reject)
• MutationObserver
• queueMicrotask

console.log("Start");

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

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

console.log("End");

Output:

Start
End
Promise
Timeout

Microtasks (Promise.resolve()) always run before Tasks (setTimeout).

3. How the Event Loop Works

1. Execute the Call Stack (synchronous code).
2. Process all microtasks (Promise, queueMicrotask, MutationObserver).
3. Process one task from the Task Queue (setTimeout, I/O, events).
4. Repeat the process.

The Event Loop continues running until there is no more code to process.

4. Async/Await and the Event Loop

async/await makes asynchronous code more readable but still follows the Event Loop mechanism.

async function fetchData() {
  console.log("Start Fetch");
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log("End Fetch");
}

console.log("Before Fetch");
fetchData();
console.log("After Fetch");

Output:

Before Fetch
Start Fetch
After Fetch
End Fetch

Explanation:

1. fetchData() calls console.log("Start Fetch") → Call Stack.
2. await pauses fetchData(), handing control back to the Event Loop.
3. console.log("After Fetch") runs.
4. After 1 second, console.log("End Fetch") runs.

5. Summary

✅ JavaScript is single-threaded but can handle asynchronous tasks with the Event Loop.
✅ Microtasks (Promises) always run before Macro-tasks (setTimeout, I/O).
✅ Async/Await makes asynchronous code more readable but does not change the Event Loop mechanism.

Understanding the Event Loop helps you optimize JavaScript application performance and avoid issues related to asynchronous code! 🚀