What is the use of the yield keyword in JavaScript?

In JavaScript, the yield keyword is used in generator functions to pause and resume the execution of a function. Generator functions are functions that can be paused and resumed at a later time, allowing you to write asynchronous code that looks synchronous.

When a generator function encounters the yield keyword, it will pause its execution and return a value to the caller. The next time the function is called, it will resume execution from where it left off, with the values of its variables and parameters still intact.

The yield keyword is typically used in conjunction with the next() method, which is called on a generator object to resume the execution of the generator function.

Let’s take a look at some examples to see how this works.

Example 1: Simple Generator Function:

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

const generatorObj = simpleGenerator();

console.log(generatorObj.next().value); // 1
console.log(generatorObj.next().value); // 2
console.log(generatorObj.next().value); // 3
console.log(generatorObj.next().value); // undefined

In this example, we have defined a generator function simpleGenerator() that yields the values 1, 2, and 3. We create a generator object by calling the function, and then we use the next() method to resume its execution.

The first time we call generatorObj.next(), the function starts executing from the beginning and yields the value 1. The value property of the returned object is set to 1, indicating that this is the value that was yielded. The done property is set to false, indicating that there are more values to be yielded.

The next time we call generatorObj.next(), the function resumes execution from where it left off and yields the value 2. The value property of the returned object is set to 2, and the done property is still false.

The same thing happens on the third call to generatorObj.next(), where the function yields the value 3. However, when we call generatorObj.next() for the fourth time, there are no more values to yield, so the value property of the returned object is undefined, and the done property is set to true to indicate that the generator has completed its execution.

Example 2: Using the yield* keyword:

function* generatorA() {
  yield "A1";
  yield "A2";
}

function* generatorB() {
  yield "B1";
  yield* generatorA();
  yield "B2";
}

const generatorObj = generatorB();

console.log(generatorObj.next().value); // "B1"
console.log(generatorObj.next().value); // "A1"
console.log(generatorObj.next().value); // "A2"
console.log(generatorObj.next().value); // "B2"

In this example, we have defined two generator functions, generatorA() and generatorB(). The generatorB() function yields the string "B1", then it uses the yield* keyword to delegate the execution of the generatorA() function, and finally it yields the string "B2".

When we create a generator object by calling generatorB(), and then we use the next() method to resume its execution, we can see that the values are yielded in the order "B1", "A1", "A2", "B2". This is because the yield* keyword allows the execution of generatorA() to be interleaved with the execution of generatorB().

The yield keyword is a powerful tool in JavaScript for writing generator functions that can pause and resume their execution. By using the yield keyword, you can write asynchronous code that looks synchronous, and you can delegate the execution of one generator function to another using the yield* keyword.

These features make generator functions a valuable tool for writing clean, readable, and maintainable code in JavaScript.

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.