> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript Yield Delegation
The `yield*` operator delegates the execution of a generator to another iterable object or generator. When encountered, it pauses the current generator and yields values from the target iterable one by one until the target is exhausted, effectively flattening the iteration process.
## Syntax
```javascript theme={"dark"}
yield* expression;
```
* **`expression`**: Any object that implements the iterable protocol (e.g., Generators, Arrays, Strings, Maps, Sets, or custom iterables containing a `[Symbol.iterator]()` method).
## Execution Mechanics
When the JavaScript engine evaluates a `yield*` expression, it performs the following sequence:
1. **Iterator Instantiation**: It calls the `[Symbol.iterator]()` method on the provided `expression` to retrieve an iterator.
2. **Value Delegation**: It repeatedly calls the `next()` method on the delegated iterator. For every `IteratorResult` object returned with `done: false`, the JavaScript engine extracts the `value` property and constructs a brand new `IteratorResult` object to pass to the caller of the outer generator. Any custom properties attached to the inner iterator's `IteratorResult` object are lost and not passed to the caller.
3. **Expression Evaluation**: When the delegated iterator is exhausted (returns an `IteratorResult` where `done: true`), the `yield*` expression evaluates to the `value` property of that final `IteratorResult`.
## Return Value Behavior
A critical mechanical distinction between `yield` and `yield*` is how the expression itself evaluates within the generator body. While a standard `yield` evaluates to the argument passed to the outer generator's `next(val)` method, a `yield*` expression evaluates to the explicit `return` value of the delegated iterator.
```javascript theme={"dark"}
function* innerGenerator() {
yield 'A';
yield 'B';
return 'Inner Complete'; // This becomes the evaluation result of yield*
}
function* outerGenerator() {
yield 'Start';
// The generator pauses here, yielding 'A' and 'B' to the caller.
// Once innerGenerator finishes, 'Inner Complete' is assigned to innerResult.
const innerResult = yield* innerGenerator();
yield innerResult;
}
const gen = outerGenerator();
console.log(gen.next().value); // 'Start'
console.log(gen.next().value); // 'A' (Delegated)
console.log(gen.next().value); // 'B' (Delegated)
console.log(gen.next().value); // 'Inner Complete' (Evaluated result of yield*)
```
## Method Proxying
The `yield*` operator does not merely loop over values; it acts as a two-way proxy between the outer generator and the delegated iterator.
If the caller invokes `next()`, `throw()`, or `return()` on the outer generator while a `yield*` expression is active, those method calls (and their arguments) are forwarded directly to the delegated iterator:
* **`next(value)`**: The `value` is passed to the inner iterator's `next()` method.
* **`throw(error)`**: If the inner iterator has a `throw()` method, it is called with the `error`. If it does *not* have a `throw()` method, the JavaScript engine throws a `TypeError` (e.g., *"The iterator does not provide a 'throw' method"*), the inner iterator is closed, and the original `error` passed to the outer generator is discarded.
* **`return(value)`**: If the inner iterator has a `return()` method, it is called. The `IteratorResult` returned by the inner iterator's `return()` method dictates the final return value of the outer generator. This means the inner iterator can override the `value` originally passed to the outer generator's `return()` call.
## Delegation to Built-in Iterables
Because `yield*` operates on the iterable protocol, it natively unpacks standard JavaScript data structures without requiring an intermediate generator function.
```javascript theme={"dark"}
function* unpackIterables() {
yield* [1, 2]; // Array delegation
yield* "XY"; // String delegation
yield* new Set([3]); // Set delegation
}
const iterator = unpackIterables();
console.log([...iterator]); // [1, 2, 'X', 'Y', 3]
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
