🚀 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() → microtask A await → microtask B Run A → Run