Microtask vs Macrotask Explained Simply

Microtask vs Macrotask Explained Simply

After understanding the Event Loop,

there is one more important concept:

👉 Microtask vs Macrotask

This is a very common interview question.

Let’s understand it in the simplest way possible.

---

First Understand This

When asynchronous tasks finish,

they don’t directly go to the Call Stack.

They go into queues.

But there are TWO types of queues:

1. Macrotask Queue
2. Microtask Queue

---

📦 What is a Macrotask?

Macrotasks are normal async tasks like:

• setTimeout
• setInterval
• setImmediate (Node.js)
• DOM events

Example:

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

setTimeout always goes to the Macrotask Queue.

---

⚡ What is a Microtask?

Microtasks are higher priority tasks like:

• Promises (.then, .catch)
• async/await
• queueMicrotask

Example:

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

Promises go to the Microtask Queue.

---

🏃‍♂️ Which Runs First?

👉 Microtasks ALWAYS run before Macrotasks.

Even if setTimeout has 0 delay.

---

💻 Example

console.log("Start");

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

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

console.log("End");

---

✅ Output

Start
End
Microtask
Macrotask

---

🤔 Why This Happens

Execution order:

1. Synchronous code runs first
2. Microtasks run completely
3. Then one Macrotask runs
4. Again microtasks are checked

Microtasks have higher priority.

---

🍽 Real-Life Example

Imagine:

Macrotasks = normal customers

Microtasks = VIP customers

Restaurant rule:

• Finish all VIP customers first
• Then serve normal customers

That’s exactly how JavaScript behaves.

---

🎯 Important Interview Point

Priority order:

1. Synchronous code
2. Microtasks
3. Macrotasks

If interviewer asks:

“Which runs first, Promise or setTimeout?”

Answer:
Promise (Microtask) runs first.