JavaScript: Make an Iterable Class

In JavaScript, we can iterate an iterable object using the built-in for ... of syntax. We can make a class iterable by implementing the iterable protocol. To implement the protocol, the class must have a property with a @@iterator key which is available via constant Symbol.iterator

class Items {
  constructor(height, width) {
    this.list = [1, 2, 3, 4, 5];
  }
 
  // the protocol interface should return an object with a next method
  [Symbol.iterator]() {
    // Use a new index for each iterator. This makes multiple
    // iterations over the iterable safe for non-trivial cases,
    // such as use of break or nested looping over the same iterable.
    let index = 0;

    return {
      next: () => {
        const value = this.list[index];
        const done = index >= this.list.length - 1;
        index++;
        return { value, done }
      }
    }
  }
}

Then we can iterate over this class like we did with a built-it iterable object (array, may, etc.)

const items = new Items();

for (const item of items) {
   console.log(item);
}