How implement a generator perform in JS (iteration protocols)

Quickly get a grasp on tips on how to construct a generator perform in JS and tips on how to use the yield key phrase.

Read the total article or watch me code this on Youtube:

In a Nutshell

  • A generator perform permits us to jot down leaner implementations of the iterable and iterator protocols in comparison with implementing them “by hand”.
  • A generator perform is outlined by placing an asterisk proper after the perform key phrase: perform* myGenerator() { … }
  • Everytime a generator perform is known as, it returns a Generator object – which is in flip an occasion of the referred to as generator perform. So the code of a generator perform really defines how that Generator object works.
  • The Generator object implements each iterable and iterator protocols and may due to this fact be used along side for … of … loops. This is a (however not the one) main use case of Generator objects.
  • The mechanics behind generator perform/object may be seen as some kind of stateful perform. It memorizes the place code execution was interrupted and continues from there on upon the following name.
  • The yield key phrase is what makes this potential. Use it as a substitute of and just like the return key phrase. It returns the given worth to the caller, interrupts execution of the generator perform and memorizes the place it must proceed.

Generator functions in a nutshell


A generator perform may be seen as an alternative choice to create an iterator object and as some kind of stateful perform.

Whenever you name a perform it runs from begin to finish and if throughout execution a return assertion is encountered, the given worth is returned to the caller. If you name that very same perform once more, it additionally once more runs from begin to finish.

With generator capabilities it is barely completely different. It may be interrupted and continued upon subsequent calls. The key phrase that allows us to take action, is the so referred to as yield assertion. It works identical to a return assertion, so the worth given to it, is returned to the caller. But, it additionally memorizes the state of the perform and the place of code execution. This implies that if the generator perform is known as once more, it continues execution simply after the yield assertion which has been executed final.

So for the next generator perform to be absolutely executed from begin to finish, 4 calls are vital. The first three calls are there to retrieve the three given values and fourth name is there to terminate the iterator (see how the next() function is outlined)

perform* myGenerator() {
yield 1;
yield 2;
yield 3;

let generator = myGenerator();
console.log(generator.subsequent().worth); // 1
console.log(generator.subsequent().worth); // 2
console.log(generator.subsequent().worth); // 3
console.log(generator.subsequent().worth); // undefined

Enter fullscreen modeExit fullscreen mode

iterable/iterator Protocols and for … of …

Heads up: If you are not conversant in iterators and/or the iterable/iterable protocols, it could be useful watching the previous episode:

JS gives two protocols referred to as iterable and iterator. Any object that implements the iterable protocol (reminiscent of arrays), can as an illustration be utilized in a for … of … loop to iterate over the content material of that given object. The iterable and iterator protocols are tightly related, as an iterable object is required to offer an iterator by exposing a zero-argument perform by way of a property accessible by means of Symbol.iterator. As difficult as this sounds,

 » Get Full Story