After this lesson, you will be able to: Understand the JS engine: how V8 works, the call stack, the event loop, task queue vs microtask queue.
Most JS bugs in async code come from misunderstanding the event loop. This lesson is the mental model that ends the guessing.
This is a free introductory lesson. No purchase required.
V8 (Node, Chrome) parses JS, generates bytecode (Ignition interpreter), then JIT-compiles hot code (TurboFan / Sparkplug). Hidden classes + inline caches make property access fast, when the engine can predict your object's shape. Deoptimization happens when shapes change unpredictably. That's why monomorphic code (objects with consistent shapes) outperforms polymorphic.
Predict the output BEFORE reading the explanation.
console.log("1");setTimeout(() => console.log("2"), 0);Promise.resolve().then(() => console.log("3"));console.log("4");// Output: 1 4 3 2//// 1, synchronous, runs immediately// 4, synchronous, runs immediately// 3, Promise.then is a MICROTASK; runs before the next macrotask// 2, setTimeout callback is a MACROTASK; runs in the next loop tick
Macrotasks: setTimeout, setInterval, I/O callbacks, MessageChannel. One per loop tick. Microtasks: Promise.then, queueMicrotask, MutationObserver. ALL microtasks drain before the next macrotask. Implication: if you `await` in a tight loop, you can starve macrotasks (UI freezes in the browser; setTimeout never fires).
Treating Promise.then as synchronous. Assuming setTimeout(0) is 'immediate'. It's after current sync code + all microtasks. Mixing async/await with .then() callbacks unnecessarily. Pick one style. Calling expensive sync code from within Promise.then, blocks every other microtask until done.
Pick the order.