Mastering the Yield* Keyword in JavaScript Generators
Written on
Chapter 1: Understanding Yield*
In JavaScript, the yield* keyword serves as a unique syntax that permits delegation to another generator or iterable object. This functionality allows a generator to yield values from another generator, array, or any iterable, effectively merging their outputs into a single cohesive sequence. In this concise, hands-on guide, we will explore the practical applications of yield* within JavaScript generators.
For those looking to quickly familiarize themselves with JS generators, consider checking out the following resource: Using yield* with Generators.
Section 1.1: Yielding from Another Generator
When utilizing yield* with an additional generator, the current generator yields all values from the delegated generator until it completes. This feature is particularly advantageous for decomposing intricate 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 illustration, the combinedGenerator function employs yield* to yield values from both the numberGenerator and an array.
The first video dives into generators, function*, yield, and yield* in a professional setting, providing a comprehensive understanding of these concepts.
Section 1.2: Yielding from Iterables
The yield* keyword can also be utilized to iterate directly over any iterable object, such as arrays or strings, within a generator.
function* stringGenerator() {
yield* "Hello";
}
const stringGen = stringGenerator();
for (let char of stringGen) {
console.log(char);
}
In this scenario, yield* iterates over and yields each character of a string.
The second video provides a quick tutorial on learning JavaScript generators in just 12 minutes, perfect for those short on time.
Chapter 2: The Power of Nested Generators
The yield* keyword proves especially powerful when used with nested generators, facilitating 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* efficiently combines the outputs from multiple generators and an iterable.
Conclusion
In summary, we have explored how yield* enhances the versatility and functionality of generators, promoting modular code and efficient iteration over different types of iterables.
For those interested in combining generators with promises, check out this detailed article: In Plain English 🚀.
Thank you for being a part of the In Plain English community! Before you leave, don't forget to clap and follow the author! ️👏️️
Follow us on: X | LinkedIn | YouTube | Discord | Newsletter
Explore our other platforms: Stackademic | CoFeed | Venture
Find more content at PlainEnglish.io