Open In App

JavaScript yield Operator

Improve
Improve
Like Article
Like
Save
Share
Report

JavaScript yield operator is used to delegate control of a generator function to another generator function or iterable object. It allows you to yield the values of an inner generator or iterable object from within an outer generator function. This operator is useful in a variety of scenarios, such as when working with iterators, asynchronously processing data, or implementing coroutines.

In this article, we’ll explore the basics of the yield operator and how it can be used to improve the performance and functionality of your JavaScript code.

Only the generator function it’s included in can call yield directly. Nested functions and callbacks are not permitted to invoke it. 

The next() function of the generator returns an IteratorResult object with the properties value and is done when the yield keyword is used to invoke the method. The generator function has not entirely finished running while done is false, as seen by the value property, which is the outcome of evaluating the yield expression.

Syntax:

[rv] = yield [expression]
  • expression: This defines the value that the generator function will return via the iterator protocol.
  • rv: It returns the optional value that was supplied to the generator’s next() function so that it may carry on with its execution.

Here is an example of how the yield* operator can be used in a generator function:

Example 1: To use the yield operator, you must first define a generator function using the function* syntax. Within the generator function, you can use the yield keyword to pause the function’s execution and return a value. 

Javascript




function* innerGenerator() {
    yield 1;
    yield 2;
    yield 3;
}
  
function* outerGenerator() {
    yield* innerGenerator();
}
  
const generator = outerGenerator();
  
console.log(generator.next().value);
console.log(generator.next().value);
console.log(generator.next().value);


Output:

1
2
3

Explanation: In this example, the innerGenerator function is a generator function that yields the values 1, 2, and 3. The outerGenerator function is another generator function that delegates control to the innerGenerator function using the yield* operator. When the outerGenerator function is called, it yields the values 1, 2, and 3, as if they were part of the outerGenerator function itself.

Example 2: You can also pass a value to the generator by calling the next method with an argument. This value will be the result of the yield expression in the generator function. 

Javascript




function* generator() {
    const value = yield 1;
    console.log(value);
}
  
const iter = generator();
  
iter.next();
iter.next('hello');


Output:

hello

Explanation: In this example, the first call to next returns the value 1, and the second call to next passes the value ‘hello’ to the generator, which is then logged to the console.

Conclusion: The yield* operator can be useful for breaking up large generator functions into smaller, more manageable chunks, or for reusing generator functions in different contexts. It is an advanced feature of JavaScript generators, and is generally not used in beginner-level code.



Last Updated : 11 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads