JavaScript Function Generator
A generator function uses the yield keyword to generate values, pausing execution and sending values to the caller. It retains the state to resume execution after yield, continuing immediately after the last yield run.
Syntax :
// An example of generator function
function* gen(){
yield 1;
yield 2;
...
...
}
Generator-Object : Generator functions return a generator object. Generator objects are used either by calling the next method on the generator object or using the generator object in a “for of” loop (as shown in the above program)
The Generator object is returned by a generating function and it conforms to both the iterable protocol and the iterator protocol.
Example 1: In this example, we will see the creation of basic generator object.
// Generate Function generates three
// different numbers in three calls
function* fun() {
yield 10;
yield 20;
yield 30;
}
// Calling the Generate Function
let gen = fun();
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next().value);
Output:
10
20
30
Example 2: This example code prints infinite series of natural numbers using a simple generator.
// Generate Function generates an
// infinite series of Natural Numbers
function* nextNatural() {
let naturalNumber = 1;
// Infinite Generation
while (true) {
yield naturalNumber++;
}
}
// Calling the Generate Function
let gen = nextNatural();
// Loop to print the first
// 10 Generated number
for (let i = 0; i < 10; i++) {
// Generating Next Number
console.log(gen.next().value);
}
Output:
1
2
3
4
5
6
7
8
9
10
Example 3: This example of how to manually return from a generator.
let array = ['a', 'b', 'c'];
function* generator(arr) {
let i = 0;
while (i < arr.length) {
yield arr[i++]
}
}
const it = generator(array);
// We can do it.return() to finish the generator
Encountering yield and yield*
- yield: pauses the generator execution and returns the value of the expression which is being written after the yield keyword.
- yield*: it iterates over the operand and returns each value until done is true.
Example 4:
const arr = ['a', 'b', 'c'];
function* generator() {
yield 1;
yield* arr;
yield 2;
}
for (let value of generator()) {
console.log(value);
}
Output:
1
a
b
c
2
Example 5: Another way to create iterable.
let createOwnIterable = {
*[Symbol.iterator]() {
yield 'a';
yield 'b';
yield 'c';
}
}
for (let value of createOwnIterable) {
console.log(value);
}
Output:
a
b
c
Example 6: Return from a generator function.
function* generator() {
yield 'a';
return 'result';
yield 'b';
}
let it = generator();
console.log(JSON.stringify(it.next()));
// {value: "a", done: false}
console.log(JSON.stringify(it.next()));
// {value: "result", done: true}
Output
{"value":"a","done":false}
{"value":"result","done":true}
Example 7: How to throw an exception from the generator.
function* generator() {
throw new Error('Error Occurred');
}
const it = generator();
it.next();
// Uncaught Error: Error Occurred
Output:
Example 8: Calling a generator from another generator.
function* firstGenerator() {
yield 2;
yield 3;
}
function* secondGenerator() {
yield 1;
yield* firstGenerator();
yield 4;
}
for (let value of secondGenerator()) {
console.log(value)
}
Output:
1
2
3
4
Limitation of Generators: You can’t yield inside a callback in a generator.
Example 9: In this example, we will try to give yield inside a generator function.
function* generator() {
['a', 'b', 'c'].forEach(value => yield value)
// This will give syntax error
}
Output:
SyntaxError: missing ) after argument list
Example 10: Using async generators (for api call).
const firstPromise = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(1), 5000)
})
}
const secondPromise = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(2), 3000)
})
}
async function* generator() {
const firstPromiseResult = await firstPromise();
yield firstPromiseResult;
const secondPromiseResult = await secondPromise();
yield secondPromiseResult;
}
let it = generator();
for await (let value of it) {
console.log(value);
}
Output:
(after 5 seconds)
1
(after 3 seconds)
2
Advantages of generators: They are memory efficient as lazy evaluation takes place, i.e, delays the evaluation of an expression until its value is needed.JavaScript use-case (generators)
- Writing generators in redux-saga
- JavaScript async-await (Implemented with promise and generators)
We have a complete list of Javascript Functions, to check those please go through Javascript Function Complete reference article.
Supported Browser: