UI Development

ES6: Generators and Iterators

Introduction

Generators are the function with * on their syntax. When they are executed they return a special type of iterator which is called as generator.

1) Lets see whats the basic Generator looks like –

Output –

Here a function* count is there which has series of yield in it. The statement yield just pauses at that point of the generator.

We can see here that when we call the generator it gives an iterable object which remains suspended.

This generator has a next function in it which when called pauses the execution of the generator at the yield point which then returns an object with value and done as key.

This value we can get if we pass any value with the yield inside generator like yield 1, yield2 otherwise it is undefined.

when the value of done is true this means that generator is no more in suspended state and is finished.

2) We can pass data to the next() to add the value to the yield

 

Output –

Here we see that when the generator is first called with next() then it pauses at the first yield point of the generator function const num = yield which is undefined as there is

no value at the yield.  That’s why we get value as undefined here and done is false.

Again at the second time, when we use next() , the value of yield is 2 and also we have passed the 2 with the next() therefore value of num is now 2 and we get the value as 4.

Again at the third time when we use next() then we get the value as 6 because the value of num is already 2 from the previous iteration.

On the last next() we get the done as true as there are no more yields in the generator and thus suspension ends.

3) We can also loop generators with each other like

Output –

Here we can call one generator inside the another generator , when the next is called with the outer generator then it will pauses at the respective yield of

the inner generator too without calling specifically  the inner generator.

Iterable

A data structure that provides an interface for iteration, which means that it uses a new iterable protocol. This protocol says that you have to use a

special key in an object that is Symbol.iterator, so we can write Array.prototype[Symbol.iterator] and we get an iterator function there.

Similarly at String.prototype[Symbol.iterator] and function generator*(){} generator[Symbol.iterator] we get the same.

So, they all have iterators that live on them at this key.

Iterator

Any object which implement the iterator protocol  as discussed above. Let’s see a custom iterator-

Actually we have seen this  as generators already use them , they use iterable protocol So, if we call the function iterable[Symbol.iterator]()

and then call the next function on it.

So knowing these all lets create our own iterable object.

Output –

Instead of calling again and again next functions we can get the yield by

  1. Using spread operator like console.log(…iterable)
  2. We can also use for of loop like


    These both under the hood call the next function.

About The Author