The Yield* Keyword in JS Generators

A Guide to Delegating Yields to Another Generator

In JavaScript generators, yield* is a special syntax used to delegate to another generator or iterable object. It allows a generator to yield the values from another generator, an array, or any other iterable object, effectively flattening their outputs into a single sequence.

In this brief, yet hands-on article, let’s look at how it can be used in our JavaScript generators.

If you’d like to quickly get up to speed on JS generators, feel free to have a look at the following articles:

Using yield* with Generators

When yield* is used with another generator, the current generator will yield all values from the delegated generator until that generator is done. This is particularly useful for breaking complex generator functions into simpler, modular components.

function* numberGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

function* combinedGenerator() {
    yield* numberGenerator();
    yield* ['a', 'b', 'c'];
}

const combined = combinedGenerator();

for (let value of combined) {
    console.log(value); 
}

In this example, combinedGenerator uses yield* to yield values from both numberGenerator and an array.

Using yield* with Iterables

yield* can also be used to iterate over any iterable object (like arrays or strings) directly within a generator.

function* stringGenerator() {
    yield* "Hello";
}

const stringGen = stringGenerator();

for (let char of stringGen) {
    console.log(char); 
}

Here, yield* is used to iterate over and yield each character of a string.

Nested Generators

yield* can be especially powerful when used with nested generators, allowing for complex, multi-level iterations.

function* nestedGenerator() {
    yield* numberGenerator();
    yield 'Middle';
    yield* stringGenerator();
}

const nested = nestedGenerator();

for (let value of nested) {
    console.log(value); 
}

In this nested example yield* seamlessly combines the outputs of multiple generators and an iterable.

Conclusion

Thus we have quickly looked at how yield* enhances the functionality and flexibility of generators, allowing for more modular code and easy iteration over various types of iterables.

If you’d like to understand how we could use generators and promises in combination, this detailed article will be of use:

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: Stackademic | CoFeed | Venture
• More content at PlainEnglish.io