ECMA-LOOP

JavaScript Async Concurrency & Await Visualizer

Ready · Step 0 of 14
Source Code & Pointer Synchronous Parse
Step Analysis

Load a scenario and step forward to trace call stack dispatch and microtask scheduling.

Event Loop Architecture Frames: 0
CALL STACK (LIFO Execution) Drained
Call stack is empty (idle)
MICROTASK QUEUE (PromiseJobs / await continuations) 0 pending
No scheduled microtasks
SUSPENDED ASYNC CONTEXTS (Awaiting Promise Settlement) 0 paused
None (all functions actively running)
Shared Heap & Console Tick: #0
HEAP VARIABLES
CONSOLE STDOUT
[System] Console initialized...

Microtick Execution Waterfall

Click any node to inspect that historical state

Why 90% of Engineers Misunderstand Await

⚠️ Await Pauses ONE Function, Not the Runtime

When JavaScript encounters await, it packages the remainder of that async function into a continuation microtask and immediately pops the function from the Call Stack. The calling code (e.g. forEach or synchronous statements below) keeps executing without delay.

🔄 Array.prototype.forEach Ignores Promises

Array.prototype.forEach is a synchronous loop implemented in ECMAScript specification. It fires its callback, completely ignores whatever that callback returns (even a pending Promise), and synchronously proceeds to the next iteration.

🛡️ The Correct Patterns

For sequential async processing, use for (const x of items) { await fn(x); }. For parallel concurrent execution with proper coordination, map items to promises and wait with await Promise.all(...).