In JavaScript, how do you lazily walk a deeply nested structure with a recursive generator, and what goes wrong when the nesting gets very deep?

## The recursive form A generator that delegates to itself turns any nested structure into a flat, lazy stream: ```js function* walk(node) { if (Array.isArray(node)) { for (const child of node) yield* walk(child); } else { yield node; } } [...walk([1, [2, [3, [4, 5]]]])]; // [1, 2, 3, 4, 5] ``` The same three lines handle trees: ```js function* nodes(tree) { yield tree.value; for (const child of tree.children ?? []) yield* nodes(child); } ``` It is lazy: `for (const v of walk(huge)) { if (v === target) break; }` stops descending as soon as the consumer stops pulling, and no flattened array is ever built. That combination — trivially short, fully lazy, arbitrary shape — is why the recursive generator is the idiomatic answer. ## Why depth costs The cost is in how `yield*` works. It is not a macro that inlines the inner generator's yields into the outer one. It is a relay: while delegating, the outer generator's `next()` forwards to the inner generator's `next()`, which forwards again, all the way to whichever generator is actually suspended at a `yield`. The produced value then returns back up through every level. So for a structure nested `d` levels deep, each leaf value costs about `d` `next()` calls and `d` result objects returned, not one. For `n` leaves the traversal is O(n·d) rather than O(n). With `d` in the single digits nobody notices. With a list nested 10,000 deep — say the linked-list-shaped `[1, [2, [3, [...]]]]` — the last element is relayed through 10,000 frames, and traversal becomes quadratic. Worse, those relayed `next()` calls are real JavaScript call frames. Beyond a few thousand levels of active delegation you hit `RangeError: Maximum call stack size exceeded`, thrown at the moment a value is pulled through the chain. This is a genuine production hazard for parsers, JSON-shaped data from an external source, or DOM-like structures built programmatically, because the depth is controlled by the input rather than by your code. ## The iterative rewrite When depth is unbounded or attacker-controlled, keep the laziness but flatten the recursion into one generator with an explicit stack: ```js function* walkIterative(root) { const stack = [root]; while (stack.length > 0) { const node = stack.pop(); if (Array.isArray(node)) { for (let i = node.length - 1; i >= 0; i--) stack.push(node[i]); } else { yield node; } } } ``` One generator, one `next()` per value, O(n) total, and depth now lives in a heap array that can grow to millions without touching the call stack. Note the reverse-order push: a stack pops last-in first, so pushing children in reverse preserves left-to-right order. The price is that the code no longer reads like the structure it walks — which is exactly the readability the recursive version was buying. ## Choosing between them - **Recursive `yield*`**: default choice. Depth is small and known — a config object, a component-ish tree you authored, a directory a few levels deep. Optimize for the reader. - **Explicit stack**: depth is unbounded, input-controlled, or measured to be deep; or profiling shows traversal dominating. Also the right call when you need to carry per-node state (a path, a depth counter) that recursion would pass as parameters through every frame. A middle option is to cap depth explicitly and fail loudly rather than blow the stack: ```js function* walkCapped(node, depth = 0) { if (depth > 200) throw new RangeError('structure too deep'); if (Array.isArray(node)) { for (const c of node) yield* walkCapped(c, depth + 1); } else yield node; } ``` For untrusted input that is often the best answer: a clear domain error beats a stack overflow surfacing from inside a library. ## Details worth knowing - Delegation stays transparent no matter how deep it goes: `return()` propagates down the chain when the consumer breaks, so `finally` blocks in every active generator still run and resources get released. - The recursion depth here is the *data's* depth, not the number of elements. A million-element flat array is fine recursively; a thousand-deep nesting of single elements is not. - Generators do not avoid the call stack. A suspended generator's frame is off-stack, but an *active* delegation chain is on it, which is why the limit applies at pull time rather than at construction time.