Suspending frames: generators & async functions

Pause a function without losing it

A normal function call is simple: enter the function, create a stack frame, run the body, then return and remove the frame. A generator or async function has one extra trick. It can pause mid-body, give control back to the caller, and later continue from the exact point where it paused.

This lesson is about the engine shape behind the syntax. For the language surface, link back to generators, generators for control flow, async/await, iteration protocols, microtasks, and transpilers and polyfills. For ordinary stack behavior, revisit the call stack and stack and heap.

Normal frames vs suspended frames

A stack frame is the engine's record for one active call. It holds the instruction pointer, local slots, parameters, and return information while that call is running. In a normal call, the frame is short-lived. Once the function returns, the frame is gone.

A generator or async function cannot throw away everything at the pause point. If line 4 yields a ticket number, line 5 still needs the same token value when you call next() later. Engines solve that by keeping the resumable state with an object or continuation, then rebuilding the active frame when it runs again.

This is JavaScript semantics first: the program must resume correctly. The exact storage layout is an engine strategy. V8's strategy is visible enough to test, so this lesson proves stable V8 bytecode names and generator-object fields without asserting memory addresses.

Saving a generator's frame on the heap

A generator function is written with function*. Calling it does not run the body. Instead, it returns a generator object. A yield expression returns a value to the caller and pauses the body. The local values that will be needed later must survive outside the active call stack.

1function* ticketCounter(start) {2  let token = start;3  while (token < start + 3) {4    const command = yield token;5    token += command === "skip" ? 2 : 1;6  }7  return "closed at " + token;8}9 10const tickets = ticketCounter(1440);Run11tickets.next();12tickets.next("skip");13tickets.next();

Step through the replay. Line 10 creates the generator object in suspended-start. Line 11 enters the body. Line 2 stores token. Line 4 yields 1440 and suspends. When line 12 calls next("skip"), the old frame is restored: the yield expression finishes with "skip", line 5 updates the same token, and line 4 yields again.

V8 evidence you can reproduce in Node

In V8 12.4, printing bytecode for a generator shows the control-flow machinery. The lesson test runs the probe in a child Node process and asserts only the stable names SwitchOnGeneratorState, SuspendGenerator, and ResumeGenerator.

1function* ticketCounter(start) {2  let token = start;3  yield token;4  token += 1;5  return token;6}7 8const gen = ticketCounter(41);9gen.next();10gen.next();

1$ node --print-bytecode --print-bytecode-filter=ticketCounter generator-probe.mjs2[generated bytecode for function: ticketCounter]3SwitchOnGeneratorState ...4SuspendGenerator ...5ResumeGenerator ...

The object itself is visible with V8 native syntax. The lesson test runs the following code with --allow-natives-syntax and asserts stable substrings such as JSGeneratorObject, continuation, and register file.

1function* ticketCounter(start) {2  let token = start;3  yield token;4  token += 1;5  return token;6}7 8const gen = ticketCounter(41);9%DebugPrint(gen);10gen.next();11%DebugPrint(gen);

1DebugPrint: ... [JSGeneratorObject]2 - resume mode: .next()3 - continuation: 0 (suspended)4 - register file: ...5DebugPrint: ... [JSGeneratorObject]6 - continuation: 1 (suspended)

Resuming with next(), return(), and throw()

A generator object is the handle you use to resume the saved frame. next(value) continues normally. After the first start, that value becomes the result of the paused yield expression. return(value) closes the generator after cleanup. throw(error) resumes by throwing at the paused yield, so a try/catch inside the generator can handle it.

1function* ticketCounter(start = 1440) {2  let token = start;3  try {4    while (token < start + 3) {5      const command = yield token;6      token += command === "skip" ? 2 : 1;7    }8    return "closed at " + token;9  } catch (error) {10    return "handled " + error.message;11  }12}13 14const counter = ticketCounter();15counter.next();16counter.next("skip");

Use the playground as a live object, not a fake console. The result values come from real method calls. The state label is a teaching model because browsers do not expose [[GeneratorState]] directly.

1function* station() {2  try {3    yield "boarding";4    yield "moving";5  } catch (error) {6    yield "caught " + error.message;7  } finally {8    console.log("cleanup");9  }10  return "done";11}12 13let trip = station();14console.log(JSON.stringify(trip.next()));15console.log(JSON.stringify(trip.throw(new Error("delay"))));16console.log(JSON.stringify(trip.next()));17console.log(JSON.stringify(trip.next()));18 19trip = station();20console.log(JSON.stringify(trip.next()));21console.log(JSON.stringify(trip.return("closed")));22console.log(JSON.stringify(trip.next()));

Lines 14 through 17 throw into the paused yield. The generator catches the error, yields a recovery value, then runs finally. Lines 20 and 21 show return("closed"): it resumes only far enough to clean up and finish.

How await suspends and resumes

An async function always returns a promise. It starts synchronously, just like a normal function, until it reaches an await. If the awaited promise is not ready, the async frame suspends. When the promise settles, the continuation runs as a promise reaction job in the microtask queue.

1async function resumeAfterAwait(gate) {2  console.log("async start");3  const token = await gate;4  console.log("async resumed " + token);5  return token + 1;6}7 8let release;9const gate = new Promise((resolve) => { release = resolve; });Run10console.log("script start");11const resultPromise = resumeAfterAwait(gate);12resultPromise.then((value) => console.log("then " + value));13queueMicrotask(() => { console.log("settle promise"); release(41); });14queueMicrotask(() => console.log("already queued microtask"));15console.log("script end");

The ordering is the key. The script logs script end before the awaited value is available. A queued microtask settles the promise. Another microtask that was already queued runs next. Only then does the async frame resume and log async resumed 41.

1async function fetchTicket(promise) {2  const value = await promise;3  return value + 1;4}5 6fetchTicket(Promise.resolve(41));

1$ node --print-bytecode --print-bytecode-filter=fetchTicket async-probe.mjs2[generated bytecode for function: fetchTicket]3SwitchOnGeneratorState ...4_AsyncFunctionAwaitUncaught ...5SuspendGenerator ...6ResumeGenerator ...

V8 lowers async functions through generator-like suspend and resume machinery plus async-function intrinsics. That is implementation detail. The portable rule is simpler: await pauses this async function, lets the current turn finish, then resumes from a microtask after the awaited promise settles.

Generator objects and their state

The ECMAScript spec describes a generator object with an internal [[GeneratorState]]. The useful states are suspended-start, executing, suspended-yield, and completed. You cannot read that internal slot directly, but behavior exposes it.

1let self;2function* reentrantProbe() {3  try {4    self.next();5  } catch (error) {6    console.log(error.name + ": " + error.message);7  }8  yield "first pause";9  return "finished";10}11 12self = reentrantProbe();13const first = self.next();14console.log(first.value, first.done);15const second = self.next();16console.log(String(second.value), second.done);17const third = self.next();18console.log(String(third.value), third.done);

Line 4 tries to call next() while the same generator is already running. V8 throws TypeError: Generator is already running. After line 16 returns finished, line 18 proves the completed rule: another next() returns undefined with done: true.

State machines in transpiled code

Before a runtime supports generator or async syntax directly, a transpiler can rewrite the control flow. Tools such as regenerator and TypeScript's __generator helper use the same big idea: save locals in variables, save the resume point in a label, and use a switch statement to jump to the right part on each next().

1function* lunchOrder() {2  const instruction = yield "cut fabric";3  yield instruction === "rush" ? "stitch now" : "stitch tomorrow";4  return "ready";5}6 7function createLunchOrderMachine() {8  let label = 0;9  let instruction;10  return {11    next(sent) {12      while (true) {13        switch (label) {14          case 0:15            label = 1;16            return { value: "cut fabric", done: false };17          case 1:18            instruction = sent;19            label = 2;20            return {21              value: instruction === "rush" ? "stitch now" : "stitch tomorrow",22              done: false,23            };24          case 2:25            label = 3;26            return { value: "ready", done: true };27          default:28            return { value: undefined, done: true };29        }30      }31    },32    [Symbol.iterator]() { return this; },33  };34}35 36function collect(iterator) {37  return [iterator.next(), iterator.next("rush"), iterator.next(), iterator.next()]38    .map((step) => String(step.value) + ":" + step.done)39    .join(" | ");40}41 42console.log(collect(lunchOrder()));43console.log(collect(createLunchOrderMachine()));

Lines 1 through 4 are the friendly syntax. Lines 7 through 29 are the visible machinery: label remembers where to resume, instruction stores a live local, and each return hands a result back to the caller. The lesson test drains both versions and proves they produce the same sequence.

Practical use

Suspended frames show up anywhere JavaScript waits without blocking the page. Async functions pause while a network request, permission prompt, stream read, or timer promise settles. Generators and async generators are useful when code pulls values over time. The practical rule is not “avoid suspension”; it is “know what is retained and measure before rewriting clear code.”

If a suspended async function closes over a large object, that object stays reachable until the function completes or becomes unreachable. That is expected, not automatically a leak. If memory matters, measure with the browser's memory tools and cancel work deliberately.

Common misconceptions

• “`yield` leaves the whole call stack active.” No. It returns to the caller; only the resumable generator state is retained.
• “`await` starts another thread.” No. It pauses the async function and resumes through promise jobs on the microtask queue.
• “A suspended local is a memory leak.” It is retained on purpose while it may be needed. It becomes a leak only if something keeps the generator or promise chain reachable forever.
• “Transpiled state machines are less real.” They are real JavaScript and a useful model; they just expose the labels and saved locals manually.
• “V8 bytecode names are JavaScript semantics.” They are evidence about this engine version. The semantics come from the ECMAScript behavior.

Practice exercises

function* ticketCounter(start) {
  let token = start;
  while (token < start + 3) {
    const command = yield token;
    token += command === "skip" ? 2 : 1;
  }
  return "closed at " + token;
}

const tickets = ticketCounter(1440);
console.log(tickets.next().value);
console.log(tickets.next("skip").value);
console.log(tickets.next().value);

function* takeThree(items) {
  // yield the first three items, then return "done"
}

const run = takeThree(["A", "B", "C", "D"]);
console.log(run.next().value);
console.log(run.next().value);
console.log(run.next().value);
console.log(run.next().value);

function* takeThree(items) {
  for (let i = 0; i < 3 && i < items.length; i += 1) {
    yield items[i];
  }
  return "done";
}

function* greeter() {
  const name = yield "ready";
  return name ?? "no name";
}
const gen = greeter();
console.log(gen.next("Asha").value);
console.log(gen.next().value);

let release;
const gate = new Promise((resolve) => { release = resolve; });
async function demo() {
  const value = await gate;
  console.log("async resumed " + value);
}
demo();
queueMicrotask(() => { console.log("settle promise"); release(41); });
queueMicrotask(() => console.log("already queued microtask"));

Check your understanding

Key takeaways

• A normal call stack frame disappears on return; a suspended frame keeps live state and a resume point.
• A generator object is the handle that stores and resumes a paused generator body.
• V8 12.4 exposes stable suspend/resume bytecode names for both generators and async functions.
• await starts synchronously, suspends at the promise boundary, and resumes through microtasks.
• Transpiled state machines make the same resume point visible with a label and a switch.

Previous in this batch: Async stack traces. Up next: Exceptions & unwinding, where a thrown value stops normal execution by unwinding frames instead of saving them.