Javascript Generators: Yield, Receive, Return

In Javascript, generators are a powerful feature that allows you to pause and resume the execution of a function. This can be incredibly useful for working with asynchronous code, such as fetching data from an API or handling user input. Generators use the yield keyword to pause the execution of a function and the return keyword to end the generator and return a value. Additionally, generators can receive input when resumed using the .next() method.

Using the function* syntax

To create a generator in Javascript, you use the function* syntax. This tells Javascript that the function is a generator and can be paused and resumed. Inside the generator, you can use the yield keyword to pause the function and return a value to the caller. Here’s an example of a simple generator that yields three values:

        
function* myGenerator() {
    yield 'First value';
    yield 'Second value';
    yield 'Third value';
}
        
    

Receiving input with .next()

When you call a generator, it returns an iterator object. You can then use the .next() method to resume the execution of the generator and send a value back into the generator. The value passed to .next() becomes the result of the yield expression in the generator. Here’s an example of using .next() to send a value into the generator:

        
const iterator = myGenerator();
console.log(iterator.next()); // { value: 'First value', done: false }
console.log(iterator.next()); // { value: 'Second value', done: false }
console.log(iterator.next()); // { value: 'Third value', done: false }
console.log(iterator.next()); // { value: undefined, done: true }
        
    

Using return to end the generator

When you’re finished with a generator, you can use the return keyword to end the generator and return a final value. This can be useful for cleaning up resources or performing final calculations. Here’s an example of using return in a generator:

        
function* finalGenerator() {
    yield 'First value';
    yield 'Second value';
    return 'Final value';
}

const finalIterator = finalGenerator();
console.log(finalIterator.next()); // { value: 'First value', done: false }
console.log(finalIterator.next()); // { value: 'Second value', done: false }
console.log(finalIterator.next()); // { value: 'Final value', done: true }
console.log(finalIterator.next()); // { value: undefined, done: true }
        
    

Generators are a powerful tool in Javascript for working with asynchronous code and creating reusable iterators. By using the yield, .next(), and return keywords, you can create flexible and powerful code that can be paused and resumed at will. Using generators can make your code more readable, maintainable, and easier to reason about.