🚀 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 await schedules continuation resumes → logs "there" .then() schedules another microtask "end" logs .then() runs ✅ Output: there end there Version B .then() → m