In a JavaScript generator function, what is the difference between yield [1, 2, 3] and yield* [1, 2, 3], and what kinds of operands does yield* accept?

## The two operators look similar and do very different things Inside a `function*`, `yield` is a single-value operator. It evaluates the expression to its right, suspends the generator, and hands that one value to whoever called `next()`. The value's type is irrelevant — an array, an object, another generator object — it is still one item in the sequence. `yield*` is the *delegation* operator. Instead of producing its operand, it treats the operand as a sequence and produces everything in it, one element at a time, as if those `yield`s had been written inline in the outer generator. ```js function* single() { yield [1, 2, 3]; } function* spread() { yield* [1, 2, 3]; } [...single()]; // [[1, 2, 3]] — one value [...spread()]; // [1, 2, 3] — three values ``` ## What counts as a valid operand `yield*` does not require a generator. The spec step is "get an iterator from the operand", which means it calls the operand's `Symbol.iterator` method. Anything iterable works: ```js function* mixed() { yield* 'ab'; // 'a', 'b' — strings are iterable yield* [1, 2]; // 1, 2 yield* new Set([3, 3, 4]); // 3, 4 yield* new Map([['k', 'v']]); // ['k', 'v'] — entries, as arrays yield* other(); // another generator object } function* other() { yield 'z'; } ``` If the operand is not iterable — a number, a plain object literal with no `Symbol.iterator`, `null` — you get a `TypeError` at the moment the delegation starts, not a silently skipped step. `yield* 42` throws. ## Delegation is transparent, not a wrapper While a `yield*` is in progress, the outer generator is effectively a pass-through pipe: - every value the inner iterator yields goes to the outer caller untouched; - an argument given to `next(v)` is forwarded to the inner iterator's `next(v)`; - `throw()` and `return()` called on the outer generator are routed to the inner iterator when it has those methods, so cleanup in the inner generator's `finally` still runs; - the outer generator resumes at the statement after the `yield*` only when the inner iterator reports `done: true`. Because of that transparency the caller cannot tell, from the values alone, whether a sequence came from one generator or five composed ones. That is exactly the property composition relies on. ## Why this matters beyond the syntax trivia The usual junior mistake is to reach for concatenation: ```js // Materializes everything, defeating the point of a generator function* bad(a, b) { yield [...a, ...b]; } // Streams both sources, allocates nothing extra function* good(a, b) { yield* a; yield* b; } ``` The second version never builds an intermediate array, works when `a` or `b` is huge, and works when one of them is an endless sequence — the consumer simply stops pulling. That is the whole reason `yield*` exists: it lets you build a sequence out of smaller sequences without ever holding the whole thing in memory. A second everyday use is recursion. A generator can delegate to itself, which turns a nested structure into a flat stream with almost no code: ```js function* leaves(node) { if (Array.isArray(node)) { for (const child of node) yield* leaves(child); } else yield node; } [...leaves([1, [2, [3, [4]]]])]; // [1, 2, 3, 4] ``` ## Things people get wrong - **"`yield*` returns an array of the inner values."** It does not return a collection at all; it produces the values one at a time. Its own expression value is the inner iterator's *return* value, which is usually `undefined`. - **"`yield*` only works on generators."** Any iterable works, which is why `yield* someArray` and `yield* someString` are common. - **"`yield` spreads arrays."** It never does; there is no implicit flattening in JavaScript's `yield`. - **"Delegation copies the inner sequence first."** Nothing is buffered. The inner iterator is advanced lazily, one `next()` at a time, driven by the outer consumer.