Understanding JavaScript Microtask Queue: A Deep Dive with Examples

JavaScript is a single-threaded, non-blocking programming language designed to handle asynchronous tasks efficiently. To achieve this, it uses an event loop, which consists of two main queues: the task queue (or macro task queue) and the microtask queue. Understanding the microtask queue is crucial for writing performant and predictable asynchronous JavaScript code.

---

What is the Microtask Queue?

The microtask queue is a special queue in JavaScript that holds microtasks, which are short-lived, high-priority tasks. Examples of microtasks include:

• Callbacks for promises (e.g., .then, .catch, .finally).
• The MutationObserver API.
• Explicitly queued microtasks using queueMicrotask.

The microtask queue is processed immediately after the currently executing JavaScript code completes and before any tasks from the task queue are executed. This ensures that microtasks are executed as soon as possible, making them highly predictable.

---

Event Loop and Microtask Queue in Action

Here’s how the event loop processes tasks:

1. Execute the current script.
2. Process all microtasks in the microtask queue.
3. Handle one task from the task queue (macro task).
4. Repeat.

This ensures that microtasks always get priority over tasks in the macro task queue.

---

Examples

Let’s dive into some examples to understand the microtask queue better.

Example 1: Promises and the Microtask Queue

console.log("Script start");

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

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

console.log("Script end");

Output:

Script start
Script end
Promise 1
Promise 2
setTimeout

Explanation:

1. console.log("Script start") and console.log("Script end") execute synchronously.
2. The promise callbacks (.then) are added to the microtask queue.
3. setTimeout is added to the task queue.
4. The microtask queue is processed, logging Promise 1 and Promise 2.
5. Finally, the task queue is processed, logging setTimeout.

---

Example 2: Using queueMicrotask

console.log("Start");

queueMicrotask(() => console.log("Microtask 1"));

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

queueMicrotask(() => console.log("Microtask 2"));

console.log("End");

Output:

Start
End
Microtask 1
Microtask 2
Timeout

Explanation:

1. console.log("Start") and console.log("End") execute synchronously.
2. queueMicrotask adds callbacks to the microtask queue.
3. The microtask queue processes Microtask 1 and Microtask 2 before the setTimeout callback.

---

Example 3: Nested Microtasks

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

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

console.log("End of Script");

Output:

End of Script
Promise 1
Promise 2
Timeout

Explanation:

1. First Timeout callback added to Macro Task queue
2. After that promise immediately gets resolved and .then adds its callback to the microtask queue.
3. console.log("End of Script") executes synchronously.
4. Promise 1 logs, and another microtask is created for Promise 2.
5. The microtask queue processes Promise 2.
6. Timeout callback gets executed from Macro task queue.

---

Key Takeaways

1. Microtasks are executed before any tasks from the task queue.
2. Promises and queueMicrotask are key players in the microtask queue.
3. The microtask queue allows for responsive and predictable asynchronous programming.

---

Conclusion

Understanding the microtask queue gives you more control over asynchronous operations and ensures your code behaves as expected. By leveraging promises, queueMicrotask, and other microtask APIs, you can write clean, efficient, and non-blocking JavaScript applications.

Happy coding!