How JavaScript Async Actually Works (Event Loop, Micro tasks, and Call Stack)

If you have ever thought: Why does Promise.then() run before setTimeout ? Why does await run “later” even though it looks synchronous? What is actually happening behind async / await? then you are ready to understand how JavaScript async really works. When I first struggled with “why a Promise is returned”, I realized that I could not go further without understanding the internal mechanism. In JavaScript, async behavior is built on these five concepts: Call Stack Web APIs Task Queue Microtask Queue Event Loop Promise and async / await are just built on top of this system. Let’s break it down step by step. 1. JavaScript Is Single-Threaded JavaScript can execute only one thing at a time. Example: console . log ( " A " ) console . log ( " B " ) console . log ( " C " ) Output: A B C This order is controlled by the Call Stack . 2. What Is the Call Stack? The call stack is: a stack that keeps track of currently executing functions It follows LIFO (Last In, First Out). Example: function main