Call stack

Problem

What becomes confusing, fragile, or impossible without understanding call stack? This lesson answers that through explanation, a worked example, two runnable exercises, and a reference solution. No teacher-supplied worksheet is required.

Event loops let one thread coordinate many delayed operations. Promises standardized continuation and error composition over callback-heavy code.

Concept explanation

Call stack belongs to “The event loop in time”. Event loop runs synchronous stack to completion, then selected microtasks/tasks and rendering opportunities.

For call stack, trace concrete input, state transition, output, and failure through a state-and-time rule spanning synchronous frames, host tasks, microtasks, rendering, cancellation, or backpressure.

Synchronous frames run to completion. Hosts schedule tasks; promise reactions enter microtask queues; rendering occurs only at host-selected opportunities. Apply that model to supplied normal, boundary, and failure cases; each case below names its input and expected evidence.

Example bank

Compare normal, boundary, failure, and cross-layer cases. Predict each observation before revealing the explanation.

Worked example

Start from supplied lab.mjs. Focus: Log script, promise, queueMicrotask, timer, and message task ordering.

1. Run: node lab.mjs
2. Save baseline evidence. Record ordering, async stacks, queue delay, cancellation signals, stream state, and cleanup paths.
3. Boundary case: Add nested microtasks and long synchronous block.
4. Failure case: Starve task queue with bounded microtask chain and measure delay.

RESULT
Final log and trace match queue model; measured timer delay grows under blocking/starvation. Starter-level baseline: Order ends as sync:start > sync:end > microtask > task. Each line is a prefix of that final sequence.

Starter material

Create lab.mjs, paste this exact content, then run the command below.

const events = [];
const record = (value) => { events.push(value); console.log(events.join(" > ")); };

record("sync:start");
queueMicrotask(() => record("microtask:call stack"));
setTimeout(() => record("task:call stack"), 0);
record("sync:end");

STOP / CLEANUPScripts exit after queued work completes. Press Ctrl+C only if your experiment creates an intentional infinite loop.

Independent exercise

Find the boundary: call stack

1. Create second case from blank file: Add nested microtasks and long synchronous block.
2. Then create controlled failure: Starve task queue with bounded microtask chain and measure delay.
3. Use Chromium Performance · Network · async debugger to prove behavior, then repair controlled failure.
4. Compare result against supplied acceptance checks and reference approach before marking complete.

Expected result

• Final log and trace match queue model; measured timer delay grows under blocking/starvation.
• Order ends as sync:start > sync:end > microtask > task. Each line is a prefix of that final sequence.
• Controlled call stack failure produces captured evidence; repair restores stated invariant without hiding error.

Hints

Solution

Attempt both exercises before opening reference approach.