Generator function (function*) and next(), yield, yield*

Tram Ho

1. Generator function

  • Generator function (function *) is one of the new functions of Javascript in ECMAScript 2015 (ES6).
  • function * helps declare a generator function, returns a Generator object.
  • “Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances”. So you can understand that it is a function that can be executed many times in a row that the context (number of variables, variable values, state of components inside the function …) can be saved. use after each session. With this new function, the Generator function can also stop executing at any time, wait for a condition it occurs and then continue to execute (For example, when calling ajax, such async architectures).
  • It can be understood that the Generator function is a function, capable of suspending execution before the function ends, and can continue to run at another time.


In which:

Return value:

  • When we call the Generator function: “nameYourFuntion ()”, it does not return basic data types but pushes to an iterator object. The next () function of the iterator object is used to retrieve the data nodes after each step of the resume function generator. The generator function will then execute the function until it encounters the yield keyword, or the next return has not been approved in the previous step.
  • In other words, the function will not be executed immediately after the call, but instead the generator function returns the iterator, just like a pointer in a loop. After the iterator’s next () function is called, the generator function will execute the function until the first yield keyword is met. The yield will return the value to the iterator, the generator function will finish until the value expires to yield.

About iterator:

  • Iterator is a browser used to browse an array, a list, or a collection through which each browsing record will record the location from which to know and get the next location.
  • In Javascript, iterators provide the next () method and this method will return the next element, while also recording the iterated element as the next () element. The next () method will return an Object with two properties, value and done. done has a value of true if the iteration has been completed, otherwise it has a value of false.

Example: The following function works to create an incremental ID, every time the next function is called.

=> yield will be called 3 times in the for loop, so when the 4th call is called, the log will return undefined. In the above example, () will return an object with two parameters, value and done. Check if next () is available or not, just check the done value

2. Yield

  • Basically, yeild is the keyword used to pause and also continue the execution inside the generator function.


  • As mentioned above, the iterator is initialized with generatorFunc with the index starting with 0. You can see that yeild here, in this example, is another version like return. It returns an IteratorResult object with two properties, “value” and “done”.

  • The value of the index is retained after each time we call next () and of course the same is true for the generator function’s context until all yield and return have been passed.

=> yield can only return to value. To return to a function we use yield *

For example:

3.Yield *

  • Yield * is a form of execution authorization. Here, yield * can embed the code of a generator function immediately after it or directly delegate an iterator object.


  • The expression here returns the iterator object as mentioned, be it generator function, or array, string, or list, etc.

For example :

  • You can use yield * in many ways, as long as it returns an object of type iterator behind.

Note : yield * is an expression, not a statement, so it will reflect the return value.

For example :

Share the news now

Source : Viblo