UI Development

ES6: Generators and Iterators


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 –

function* count() {
  yield 1;
  yield 2;
 var generator = count()

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


function* add() {
  const num = yield;
  yield 2 + num;
  yield 4 + num;

var generator = add();

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

function* outer() {
	yield 1;
	yield* inner();
    yield 2;

function* inner(){
	yield "a";
    yield "b";
var generator = outer();

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.


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.


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

function customIterator() {
    return {
        next: function() {
            // This return a obj
            // with a value and done key
const iterable = {};
iterable[Symbol.iterator] = customIterator;

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.

const iterable = {
	[Symbol.iterator]() {
		let step = 0;
        return {
            next: () => {
                if (step < 3) {
                    return {value: step, done: 'false'}
                 return {value: undefined , done: 'true'}

var itr = iterable[Symbol.iterator]();

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

    for (let it of iterable) {

    These both under the hood call the next function.

About The Author