🚀 JavaScript Async/Await vs `.then()` : The Microtask & Event Loop Secret

Ever seen this and wondered why the output changes just by reordering lines?

async function hi() {
  return "there";
}

// Version A
const waitedhi = await hi();
console.log(waitedhi);

hi().then(res => console.log(res));

console.log("end");

vs

// Version B
hi().then(res => console.log(res));

const waitedhi = await hi();
console.log(waitedhi);

console.log("end");

👀 Same code… different output. Why?

---

🧠 The Hidden Mechanism: Microtasks

Both await and .then() use Promises, and both schedule work in the microtask queue.

👉 Key rule:

Microtasks run in the order they are added (FIFO)

---

⚡ What await really does

await hi();

is roughly:

hi().then(result => {
  // rest of your code
});

So:

• .then() → schedules a microtask
• await → schedules a microtask (continuation)

---

🔥 Why order matters

Version A

1. await schedules continuation
2. resumes → logs "there"
3. .then() schedules another microtask
4. "end" logs
5. .then() runs

✅ Output:

there
end
there

---

Version B

1. .then() → microtask A
2. await → microtask B
3. Run A → Run B

✅ Output:

there
there
end

---

🧩 The Bigger Picture: Event Loop

To fully understand this, you need 3 things:

1️⃣ Call Stack

• Executes synchronous code
• Runs line by line
• Example:

console.log("start");

---

2️⃣ Microtask Queue (High Priority)

• Promises (.then, await)
• Runs immediately after stack is empty

---

3️⃣ Macrotask Queue (Low Priority)

• setTimeout
• setInterval
• Runs after all microtasks are done

---

⚡ Golden Rule

JS finishes the call stack → runs ALL microtasks → then runs ONE macrotask

---

🧪 Full Example

console.log("start");

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

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

await Promise.resolve();

console.log("end");

---

🔍 Execution Flow

Step 1: Call Stack

start

Step 2: Queues

Microtasks: [then, await-resume]
Macrotasks: [timeout]

Step 3: Run Microtasks

then
end

Step 4: Run Macrotask

timeout

---

✅ Final Output

start
then
end
timeout

---

🎯 Final Takeaways

• await = pause + schedule continuation as microtask
• .then() = directly schedules microtask
• Microtasks always run before macrotasks
• Order of scheduling = order of execution

---

💬 Once you understand this, async JavaScript stops feeling random and starts feeling predictable.