Async JavaScript: how the engine runs your async code

JavaScript has one thread, but it can wait for many things at once. The trick is the event loop - a simple algorithm that picks what to run when the stack is empty. Microtasks beat tasks, render fits between cycles, and execution order starts to make sense.

Async in JS without Promises is callback hell - the code has no way to refer to the in-flight operation, and error handling sits separately inside every callback. A Promise stands in for a value that will arrive later - the code reads flat, and you catch errors in one place.

async/await looks like magic: you write await fetch(...), get the result on the next line, and the thread doesn't block for a single moment. Underneath there's no magic - just an old pattern of generator + Promise + auto-runner, hidden under the new keywords async and await.

A regular JS function runs top to bottom, returns a value, and disappears from memory. A generator is different - marked with function*, it pauses on every yield, hands a value out, and waits for the next .next(). A small change in the runtime, but it's the one that powers on-demand sequences and lives under the hood of async/await.