What is the use of the yield* keyword in JavaScript?

In JavaScript, the yield* keyword is used in generator functions to delegate the generation of values to another generator function or an iterable object. This keyword allows us to write more concise and modular code by separating the concerns of generating values and iterating over them.

Let’s start by looking at an example of a generator function that uses the yield* keyword to delegate to another generator function.

Suppose we want to generate a sequence of values that alternates between two sub-sequences: [1, 3, 5] and [2, 4, 6]. We can define two generator functions to generate these sub-sequences, and then use the yield* keyword to delegate to them in the main generator function:

function* subseq1() {
  yield 1;
  yield 3;
  yield 5;
}

function* subseq2() {
  yield 2;
  yield 4;
  yield 6;
}

function* alternatingSequence() {
  yield* subseq1();
  yield* subseq2();
  yield* subseq1();
  yield* subseq2();
}

// Usage:
for (const value of alternatingSequence()) {
  console.log(value);
}
// Output:
// 1
// 3
// 5
// 2
// 4
// 6
// 1
// 3
// 5
// 2
// 4
// 6

In this example, we define two generator functions subseq1 and subseq2 that generate the sub-sequences [1, 3, 5] and [2, 4, 6] respectively. Then, in the alternatingSequence generator function, we use the yield* keyword to delegate to each sub-sequence generator function twice, in an alternating order. Finally, we use a for-of loop to iterate over the values generated by the alternatingSequence generator function, and log them to the console.

Note that when we use the yield* keyword to delegate to a generator function, we do not need to explicitly iterate over the values generated by the delegated function. Instead, the yield* keyword automatically iterates over the generator function and yields its values one by one.

Now let’s look at another example of using the yield* keyword, this time to delegate to an iterable object. Suppose we want to generate a sequence of values that combines the elements of two arrays: [1, 2, 3] and [4, 5, 6]. We can define an array concatenation function that returns an iterable object, and then use the yield* keyword to delegate to it in the generator function:

function* arrayConcatenation(arr1, arr2) {
  yield* arr1;
  yield* arr2;
}

function* combinedSequence() {
  yield* arrayConcatenation([1, 2, 3], [4, 5, 6]);
}

// Usage:
for (const value of combinedSequence()) {
  console.log(value);
}
// Output:
// 1
// 2
// 3
// 4
// 5
// 6

In this example, we define an arrayConcatenation function that takes two arrays as arguments and returns an iterable object that yields the elements of both arrays in sequence. Then, in the combinedSequence generator function, we use the yield* keyword to delegate to the arrayConcatenation function, passing it the two arrays [1, 2, 3] and [4, 5, 6] as arguments. Finally, we use a for-of loop to iterate over the values generated by thecombinedSequence generator function, and log them to the console.

Note that when we use the yield* keyword to delegate to an iterable object, we are not limited to arrays. Any object that implements the iterable protocol can be delegated to using yield*, including strings, sets, maps, and custom iterable objects.

Thank you for reading, and let’s have conversation with each other

Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.