serdem420 serdem420 - 5 months ago 7x
Javascript Question

Iterator and a Generator in Javascript?

On Mozilla's page iterators and generators there is a statement:

While custom iterators are a useful tool, their creation requires
careful programming due to the need to explicitly maintain their
internal state. Generators provide a powerful alternative: they allow
you to define an iterative algorithm by writing a single function
which can maintain its own state.

Regarding above explanation, isn't it possible to write an iterative algorithm without Generators, such as:

Array[Symbol.iterator] = function(){
return {
next: function(){
return {
value: "",

Can't get my head around. Could someone explain what is the main reason they created an alternative, seems not much different to me.


They might look pretty similar on the surface, but they can be used in very different ways.


Iterators are rather strictly defined. They return an object which contains a next (and possibly some other) function. Every time the next function of that object is called, it is expected to return an object with two properties:

  • value: the current value of the iterator
  • done: is the iterator finished?

An example of an iterator:

const list = {
    entries: { 0: 'a', 1: 'b' },
    [Symbol.iterator]: function(){
        let counter = 0;
        const entries = this.entries;
        return {
            next: function(){
                return {
                    value: entries[counter],
                    done: !entries.hasOwnProperty(counter++)

Their main purpose, as their name suggests, is to provide an interface which can be iterated:

for (let item of list) { console.log(item); }
// 'a'
// 'b'


Generators on the other hand are much more versatile. It helps to think of them as functions which can be paused and resumed.

While they can be iterated (their iterables provide a next method), they can implement much more sophisticated procedures and provide a input/output communication through their next method.

A simple generator:

function *mygen () {
   var myVal = yield 12;
   return myVal * 2;

const myIt = mygen();

const firstGenValue =;
// Generator is paused and yields the first value

const result = * 2).value;

console.log(result); // 48

Generator delegation

Generators can delegate to another generator:

function *mydelgen(val) {
    yield val * 2;

function *mygen () {
    var myVal = yield 12;
    yield* mydelgen(myVal); // delegate to another generator

const myIt = mygen();
const val =;

Generators & Promises

Generators and Promises together can create a sort of automatic asynchronous iterator with the help of utilities such as co.

co(function *(){
  // resolve multiple promises in parallel
  var a = Promise.resolve(1);
  var b = Promise.resolve(2);
  var c = Promise.resolve(3);
  var res = yield [a, b, c];
  // => [1, 2, 3]

In Conclusion

So in conclusion one could say that the main purpose of iterators is to create an interface for custom objects to be iterated, whereas generators provide a plethora of possibilities for synchronous and asynchronous workflows:

  • stateful functions
  • generator delegation
  • generators & promises
  • CSP