JavaScript Yield Operator

The JavaScript return operator is used to delegate constructor control to another constructor or an inerrable object. It allows you to create internal constructor values ​​or inerrable objects from an external constructor. This operator is useful in many different scenarios, such as when working with iterators, asynchronous data processing, or coroutine implementations.

In this article, we will explore the basics of the yield operator and how to use it 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 returns an IteratorResult object with the values ​​of the properties and is executed when the yield keyword is used to call the method. The constructor has not completed its execution and done is false, as shown by the value attribute, which is the result of evaluating the output 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 return operator, you must first define a constructor using function* syntax. In the constructor, you can use the yield keyword to suspend the execution of the function 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 the constructor that generates the values ​​1, 2, and 3. The externalGenerator function is another constructor that delegates control to the InnerGenerator function using the yield* operator. When the externalGenerator function is called, it returns the values ​​1, 2, and 3, as if they were part of the externalGenerator 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 connected to the console.

Conclusion: The yield* operator can be useful for breaking large constructors into smaller, more manageable parts, or for reusing constructors in different contexts. This is an advanced feature of JavaScript generators and is not typically used in beginner-level code.

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, Codeconfig.in Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!