How to make an iterator out of an ES6 class

Question

How would I make an iterator out of an ES6 class in the same manner as JS1.7 SomeClass.prototype.__iterator__ = function() {...} syntax?

[EDIT 16:00]

The following works:

class SomeClass {
    constructor() {
    }

    *[Symbol.iterator]() {
        yield '1';
        yield '2';
    }

    //*generator() {
    //}

}

an_instance = new SomeClass();
for (let v of an_instance) {
    console.log(v);
}

WebStorm flags *[Symbol.iterator]() with a 'function name expected' warning directly following the asterix, but otherwise this compiles and runs fine with Traceur. (Note WebStorm does not generate any errors for *generator().)

This code works fine for me in node `v8.1.1` – Shaheen Ghiassy Jun 23 '17 at 07:58 — Shaheen Ghiassy, Jun 23 '17 at 07:58

score 69 · Answer 1 · edited Aug 20 '16 at 10:41

69

You need to specify Symbol.iterator property for SomeClass which returns iterator for class instances. Iterator must have next() method, witch in turn returns object with done and value fields. Simplified example:

function SomeClass() {
  this._data = [1,2,3,4];
}

SomeClass.prototype[Symbol.iterator] = function() {
  var index = 0;
  var data  = this._data;

  return {
    next: function() {
      return { value: data[++index], done: !(index in data) }
    }
  };
};

Or using ES6 classes and arrow functions:

class SomeClass {
  constructor() {
    this._data = [1,2,3,4];
  }

  [Symbol.iterator]() {
    var index = -1;
    var data  = this._data;

    return {
      next: () => ({ value: data[++index], done: !(index in data) })
    };
  };
}

And usage:

var obj = new SomeClass();
for (var i of obj) { console.log(i) }

In your updated question you realized class iterator through generator function. You can do so, but you must understand that iterator COULD NOT BE a generator. Actually iterator in es6 is any object that has specific next() method

edited Aug 20 '16 at 10:41

Community

1
1

answered Feb 26 '15 at 11:55

alexpods

47,475
10
100
94

3

This actually works, better than the answer flagged as correct. Thanks! – Dec 22 '17 at 21:12
In order to make the ES5 code work, I had to set `index = -1` like it is in the ES6 code. Possible mistake ? – Guerric P Aug 23 '18 at 13:15
@alexpods I just wanted to ask, I noticed your done statement. When testing this in the console, it never has truth to it. I was testing it. It actually would work if it was python, but i was not sure if this is a bug? – Fallenreaper Dec 20 '18 at 02:50
wondering, having this custom iterator, is there an easy way to convert the generated data right into an array? Thinking of adding a method like "toArray" that calls the iterator internally and fills in an array, but maybe there is a better way? – vir us Dec 05 '20 at 20:40
`done: !(index in data)` exits the loop early on sparse arrays. A simple fix is: `done: index == data.length`. If you need to handle loops that change the array length you can use `>=` and make sure you check `.length` every iteration instead of pre-assigning it to a constant. – Sideways S Jul 28 '23 at 04:31

Andreas Rossberg · Accepted Answer · 2018-02-25T08:28:48.213

61

Define a suitable iterator method. For example:

class C {
  constructor() { this.a = [] }
  add(x) { this.a.push(x) }
  [Symbol.iterator]() { return this.a.values() }
}

Edit: Sample use:

let c = new C
c.add(1); c.add(2)
for (let i of c) console.log(i)

edited Feb 25 '18 at 08:28

answered Feb 26 '15 at 13:47

Andreas Rossberg

34,518
3
61
72

1

And prefix with an asterix to use as a generator function by the looks. – user5321531 Feb 26 '15 at 16:23
20

This particular example is not using a generator. It's simply delegating to an array iterator. – Andreas Rossberg Feb 26 '15 at 18:31
Could you please add an example of this code being used? I can't get it to work. – timkay Feb 24 '18 at 18:15
@timkay, done, it's exactly like asked in the question. – Andreas Rossberg Feb 25 '18 at 08:29
3

@timkay You probably can't get it to work because arrays [still don't have a `.values()` method](https://stackoverflow.com/q/28514411/1048572) in most implementations. Use `this.a[Symbol.iterator]()` instead – Bergi Feb 25 '18 at 09:45
1

Thanks! As @bergi points out, most implementations don't support values() for arrays. His solution works more generally. Maybe you could update your code. – timkay Feb 26 '18 at 16:13
@alexpods answer below is better – Oleg Abrazhaev Mar 03 '19 at 18:04
Unlike some of the other answers, this one easily applies to other iterable objects beyond `Array`, such as `Set` and `Map`. It also handles sparse arrays properly. – Sideways S Jul 28 '23 at 22:54

Shaheen Ghiassy · Answer 3 · 2017-07-10T17:34:44.223

26

Here's an example for iterating over a 2d matrix custom class in ES6

class Matrix {
    constructor() {
        this.matrix = [[1, 2, 9],
                       [5, 3, 8],
                       [4, 6, 7]];
    }

    *[Symbol.iterator]() {
        for (let row of this.matrix) {
            for (let cell of row) {
                yield cell;
            }
        }
    }
}

The usage of such a class would be

let matrix = new Matrix();

for (let cell of matrix) {
    console.log(cell)
}

Which would output

edited Jul 10 '17 at 17:34

answered Jun 23 '17 at 07:12

Shaheen Ghiassy

7,397
3
40
40

Note: The above code may need the latest version of nodeJS to work. It compiles fine using `node v8.1.1` – Shaheen Ghiassy Jun 23 '17 at 07:59
3

You can simplify the iterator using `for...of` loops: `for (let row of this.matrix) { for (let cell of row) { yield cell; } }` – Luke Willis Jul 10 '17 at 15:45
1

@LukeMWillis - Nice! Much better. Updated answer – Shaheen Ghiassy Jul 10 '17 at 17:35

awhie29urh2 · Answer 4 · 2017-08-24T01:52:44.903

Documentation: Iteration Protocols

Example class implementing both iterator protocol and iterable protocol techniques:

class MyCollection {
  constructor(elements) {
    if (!Array.isArray(elements))
      throw new Error('Parameter to constructor must be array');

    this.elements = elements;
  }

  // Implement "iterator protocol"
  *iterator() {
    for (let key in this.elements) {
      var value = this.elements[key];
      yield value;
    }
  }

  // Implement "iterable protocol"
  [Symbol.iterator]() {
    return this.iterator();
  }
}

Access elements using either technique:

var myCollection = new MyCollection(['foo', 'bar', 'bah', 'bat']);

// Access elements of the collection using iterable
for (let element of myCollection)
  console.log('element via "iterable": ' + element);

// Access elements of the collection using iterator
var iterator = myCollection.iterator();
while (element = iterator.next().value)
  console.log('element via "iterator": ' + element);

Note to future readers; last loop with _`while`_ doesn't work on it's own without a proceeding `let element;`... well for some JavaScript shells that is. Solid answer otherwise. — S0AndS0, Jul 03 '19 at 08:30

score 8 · Answer 5 · answered Mar 04 '19 at 14:38

Explanation

Making an object iterable means this object has a method named with the Symbol.iterator. When this method gets called, it should return an interface called iterator.

This iterator must have a method next that returns the next result. This result should be an object with a value property that provides the next value, and a done property, which should be true when there are no more results and false otherwise.

Implementation

I will also implement an iterator for a class called Matrix which all elements will range from 0 to width * height - 1. I will create a different class for this iterator called MatrixIterator.

class Matrix {
    constructor(width, height) {
        this.width = width;
        this.height = height;
        this.content = [];

        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                this.content[y * width + x] = y * width + x;
            }
        }
    }

    get(x, y) {
        return this.content[y * this.width + x];
    }

    [Symbol.iterator]() {
        return new MatrixIterator(this);
    }
}


class MatrixIterator {
    constructor(matrix) {
        this.x = 0;
        this.y = 0;
        this.matrix = matrix;
    }

    next() {
        if (this.y == this.matrix.height) return {done: true};

        let value = {
            x: this.x,
            y: this.y,
            value: this.matrix.get(this.x, this.y)
        };

        this.x++;

        if (this.x == this.matrix.width) {
            this.x = 0;
            this.y++;
        }

        return {value, done: false};
    }
}

Notice that Matrix implements the iterator protocol by defining Symbol.iterator symbol. Inside this method, an instance of MatrixIterator is created which takes this, i.e., the Matrix instance as parameter, and inside MatrixIterator, the method next is defined. I particularly like this way of implementing an iterator because it clearly shows the iterator and the implementation of the Symbol.iterator.

Alternatively, one can also not define directly Symbol.iterator, and instead add a function to prototype[Symbol.iterator] as follows:

Matrix.prototype[Symbol.iterator] = function() {
    return new MatrixIterator(this);
};

Usage Example

let matrix = new Matrix(3, 2);
for (let e of matrix) {
    console.log(e);
}

Reference - Eloquent Javascript – RamanSB Jun 06 '20 at 16:23 — RamanSB, Jun 06 '20 at 16:23

score 1 · Answer 6 · edited Aug 24 '18 at 21:48

Example of an ES6 iterator class that stores in a sub-object:

class Iterator {
    data;

    constructor(data = {}) {
        this.data = JSON.parse(JSON.stringify(data));
    }

    add(key, value) { this.data[key] = value; }

    get(key) { return this.data[key]; }

    [Symbol.iterator]() {
        const keys = Object.keys(this.data).filter(key => 
        this.data.hasOwnProperty(key));
        const values = keys.map(key => this.data[key]).values();
        return values;
    }
}

score 1 · Answer 7 · answered May 15 '21 at 19:44

I don't think anyone's posted an example of an async iterator, so here you go:

class TableReadStream<T extends any[]> {
    async *[Symbol.asyncIterator]() {
        let row: T
        while((row = await this.readRow()) !== null) {
            yield row
        }
    }
}

Usage:

for await(let row of readStream) {
    console.log(row)
}

How to make an iterator out of an ES6 class

7 Answers7

Explanation

Implementation

Usage Example

Linked