Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
JavaScript Function Generator
Generator-Function: A generator-function is defined like a normal function, but whenever it needs to generate a value, it does so with the yield keyword rather than return. The yield statement suspends the function’s execution and sends a value back to the caller, but retains enough state to enable the function to resume where it is left off. When resumed, the function continues execution 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.
javascript
// Generate Function generates three // different numbers in three callsfunction* fun() { yield 10; yield 20; yield 30;} // Calling the Generate Functionlet 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.
javascript
// Generate Function generates an // infinite series of Natural Numbers function* nextNatural() { let naturalNumber = 1; // Infinite Generation while (true) { yield naturalNumber++; }} // Calling the Generate Functionlet gen = nextNatural(); // Loop to print the first// 10 Generated numberfor (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.
javascript
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:
javascript
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.
javascript
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.
javascript
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} |
{"value":"a","done":false}
{"value":"result","done":true}
Example 7: How to throw an exception from the generator.
javascript
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.
javascript
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.
javascript
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).
javascript
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:
- Google Chrome 39 and above
- Microsoft Edge 13 and above
- Firefox 26 and above
- Opera 26 and above
- Safari 10 and above
Please Login to comment...