Introduction to Iterables and Iterators in JavaScript

JavaScript objects don’t come with iterables by default. Here are some potential rationales::

• One of the key features of objects is that it’s user defined. So slipping in a silent [Symbol.iterator]() into the object could result in unexpected behavior.
• The previous point also means that it can be added manually by the user, considering that all object compositions might not be similar. So having a common iterable property can be meaningless.
• If you want to loop over the top level elements in the object, you can use a for...in loop.
• The usage of the Maps object type might be more appropriate.

If you still need an iterable, a simple iterable implementation on objects would look like this:

let Reptiles = {
  biomes: {
    water: ["Alligators", "Crocs"],
    land: ["Snakes", "Turtles"]
  },

  [Symbol.iterator]() {
    let reptilesByBiome = Object.values(this.biomes);
    let reptileIndex = 0;
    let biomeIndex = 0;
    return {
      next() {
        if (reptileIndex >= reptilesByBiome[biomeIndex].length) {
          biomeIndex++;
          reptileIndex = 0;
        }

        if (biomeIndex >= reptilesByBiome.length) {
          return { value: undefined, done: true };
        }

        return {
          value: reptilesByBiome[biomeIndex][reptileIndex++],
          done: false
        };
      }
    };
  }
};

// now iterate over the new `Reptiles` iterable:
for (let reptile of Reptiles) console.log(reptile);

The output would be:

Alligators
Crocs
Snakes
Turtles

With this example, you can see iterators can be implemented within the object. Iterables can be powerful properties for objects that provide ease of use while handling certain situations and help us avoid writing long path names.

Loops like for...of have a built-in mechanism to consume iterables until the done value evaluates to true. If you want to consume the iterable on your own though, without a built-in loop, you can get the iterator from the iterable and then call next() on it manually.

Given the same example as above, you could get an iterator from Reptiles by calling its Symbol.iterator like this:

let reptileIterator = Reptiles[Symbol.iterator]();

You can then use the iterator like this:

console.log(reptileIterator.next());
// {value: "Alligators", done: false}
console.log(reptileIterator.next());
// {value: "Crocs", done: false}
console.log(reptileIterator.next());
// {value: "Snakes", done: false}
console.log(reptileIterator.next());
// {value: "Turtles", done: false}
console.log(reptileIterator.next());
// {value: undefined, done: true}

console.log(reptileIterator.next());
// TypeError: Cannot read property 'length' of undefined

As you can see, the iterator has a next() method that returns the next value in the iterable. The value for done only evaluates to true after another next() call once the last value has been returned, so to go over the entire iterable there will always be one more call to next() than there is data in the iterable. Calling next() again after an iterator has reached the end of the itarable will result in a TypeError being thrown.

With this tutorial, you have gone through the different parts and mechanisms behind looping through a data set with JavaScript. You’ve gone through the reasons JavaScript objects do not come with this ability to iterate innately, and demonstrated the option to manually implement your own iterables.