In ECMA2015 generators are introduced in javascript. Functions in Javascript run until return or end. Generators run until yield or return or end. Generator is a process that can be passed and resumed and can yield multiple values. It provides a new way of working with functions and iterators.
Using a generator:
- You can stop the execution of a function from anywhere inside the function.
- Continue executing from pause position.
Regular function return only one single value or nothing. It is executed upto completion. It cannot pause in middle and continue from pause position.
On the other hand generators can yield multiple values, one after another on demand. It works with iterators, to create a data stream with ease.
Create Generators:
To create a generator, we define a generator function with *. The objects of generator function are called generators.
Syntax:
// define a generator function
function* generator_function() {
... .. ...
}
// creating a generator
const generator_object = generator_function();
This generator function can also be defined in expressions
// Generator function expression
const generatorFunction = function*() {}
Using yield and next():
Generator function once called returns generator object, which holds generator iterable that can be iterated using next() method or for … of loop.
Every next() method executes every line of code until next yield it encounter and suspends its execution temporarily.
// generator function
function* generatorFunc() {
console.log("1 invoke");
yield 1;
console.log("2 invoke");
yield 2;
}
// returns generator object
const generator = generatorFunc();
console.log(generator.next());
Output:
1 invoke
{ value: 1, done: false }
Here a generator object is created. When generator.next() is called it executes upto yield 1 and pause the execution.
Using multiple yields:
// generator function
function* generatorFunc() {
console.log("1 invoke");
yield 1;
console.log("2 invoke");
yield 2;
console.log("3 invoke");
}
// returns generator object
const generator = generatorFunc();
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
Output:
1 invoke
{ value: 1, done: false }
2 invoke
{ value: 2, done: false }
3 invoke
{ value: undefined, done: true }
Here after first generator.next() executes 1 invoke upto yield 1 and pause.
Second generator.next() executes from pause position and executes 2 invoke upto yield 2 and pause again.
Third generator.next() executes from pause position and all yields are accessed so returns { value: undefined, done: true }
Using for… of loop:
Since generators are iterables we use for … of loop.
// generator function
function* generatorFunc() {
   console.log("1 invoke");
   yield 1;
console.log("2 invoke");
   yield 2;
}
// returns generator object
const generator = generatorFunc();
for ( const g of generator){
  console.log(g);
}Output:
1 invoke
1
2 invoke
2
Generator methods:
| Method | Description |
| next() | Returns a value of yield |
| return() | Returns a value and terminates the generator |
| throw() | Throws an error and terminates the generator |
Generator states:
The next table lists the possible states of a Generator object:
| Status | Description |
| suspended | Generator has halted execution but has not terminated. |
| closed | Generator has terminated by either encountering an error, returning, or iterating through all values. |
Return vs yield keyword:
| return keyword | yield keyword |
| returns the value and terminates the function | returns the value and pause the function |
| available in both normal and generator function | available only in generator function |
Using return :
// generator function
function* generatorFunc() {
yield 1;
return 22;
yield 3;
}
// returns generator object
const generator = generatorFunc();
console.log(generator.next());
console.log(generator.next());
console.log(generator.next());
Output:
{ value: 1, done: false }
{ value: 22, done: true }
{ value: undefined, done: true }
We can use return() method instead of return keyword as generator.return()
Here when return statement is encountered it returns the value, done is set to true and terminates the function and return nothing after that.
Generator throw() method:
// generator function
function* generatorFunc() {
yield 100;
yield 200;
}
// returns generator object
const generator = generatorFunc();
console.log(generator.next());
// throws an error
// terminates the generator
console.log(generator.throw(new Error('Error occurred.')));
console.log(generator.next());
Output:
{ value: 100, done: false }
Error: Error occurred.