Generator in ES6 | ECMAScript 6

ECMAScript 6 recommends a new way of working with iterators and functions. The way is named as generator or generator function. The ES 6 generator is a distinct type of function that is used to stop in the midway for one or more than one time and can be resumed later. In other words, we can say that the ECMAScript 6 generator looks like a function but behaves like an iterator.

When a normal function is called, the control rests with the called function until it returns. In the ECMAScript 6 generators, the caller function always has control over the execution of the called function.

The generator can also be defined as-

“The Generator is a function class used to classify the objective of iterator writing.”

“The Generator is also used as a function that generates results in a sequence rather than a single value.”

The Generator function is almost similar to regular or normal function except the following points-

• Generator function yields or returns control back to the caller function at any point.
• When we call the generator function, it does not run the code; instead it returns an object. It manages the execution.

Syntax

function * function1_ name ()
 {
       yield ‘Hello ES 6’;                     // statement 
        yield ‘Hello generator’;           // statement
 }                    
 var f1 = function1_ name ()                                // Generator function calling
 console.log (f1.next().value); 
  console.log (f1.next().value); 

Example

function* function ()                                    // The generator function
 {
         yield ‘Welcome to generator function’;
        yield ‘Welcome to JavaScript’;
        yield ‘Hello ECMAScript’;  
 }
 var genfunction = function ();                                      // Generator function calling 
 console.log (genfunction.next().value);
 console.log (genfunction.next().value);
 console.log (genfunction.next().value); 

Output

After the execution of the code, we will get the following output.

The Yield Statement

The Yield statement is used to pause and resume the generator function asynchronously. The yield suspends the function and returns a value to the caller function. It can generate a sequence of values.

The yield statement retains enough state to enable the function to resume where we stopped it before. When we resume the function, it will start to continue its execution after the last yield function ran.

Next Method ()

The Next method () is the essential method of the generator function. When we are going to call the next method () containing its arguments, it will start the execution of the generator function, changing the yield expression where the execution was stopped with argument from the next method.

The next method () return us the object that contains the following two properties-

Done: Done is a Boolean value; returns true if the function code is completed; otherwise it returns false.

Value: It can be the yield value.

We can better understand it with the help of the following instance.

Example

function * display ()
 {
         Yield 500;
 }
 var gen1 = display ();              // gen1 is the generator object 
 console.log (gen1.next()); 

Output

After the execution of the code, we will get the following output.

 The Return statement in Generator object

The essential work of return statement is to send a particular value back to its caller function. It is used to perform the execution and generate result for the caller. The return statement should be the last statement of the function because the statement defined after the return statement are not executed in the function.

Here, we have an example to illustrate the return statement in a generator.

Example

function* gen1 ()
 {
           yield ‘Hello ECMAScript 6’;
 yield ‘Hello JavaScript’;
 return ‘Return statement’;
 yield ‘Hello Java’;
 yield ‘Hello ECMAScript 6’; 
 }  
 let genobject = gen1 ();
 console.log (genobject.next ());
 console.log (genobject.next ());
 console.log (genobject.next ());
 console.log (genobject.next ());
 console.log (genobject.next ()); 

Output

After the execution of the above example, we will get the following output.

In the above example code, we have a function gen1 () which contains five statements, including yield and return statements. If we call the next () method, thenthe function resumes until it starts the execution of next yield.    

In the code, when we called the first next () method, returns ‘hello ES 6.’ When we called the second next () method, returns ‘hello JavaScript.’ When we called the next () method, the function returns other remaining value of yield statements. Still when we called the last yield statement, it returns the undefine statement because these statements are written after the return statement.

Generator Object

The generator function returns the generator objects. The Generator object is also defined as an instance of the generator function. It allows the iterator and iterator interface.

We can use these generator objects either by calling the next () method or with the help of generator objects inside a loop.It is an iterator, so we can use it in functions and for…of loop. 

Generator function in for…of loop

The for…of loop with the generator function helps us to make the code short and precise. It also helps us to reduce the line of code.

We can understand it with the help of the following example.

Example

“use strict”
 function* name ()
 {
           }  
 for (let value of name ());
 {
          console.log (name);
 } 

Output

After the execution of the code, we will get the following output.

Difference between Regular/normal function and Generator function

Regular Function	Generator Function
It starts with function ().	It starts with function*.
It can only return for one time.	It can yield (return) many numbers of times.
It uses the return keyword.	It uses the yield keyword.
Syntax               function function_name ()         {                   // statement to be executed         }	Syntax              Function* function_name ()      {                 yield statement;      }