JavaScript Iterables

October 23, 2019

What are iterables?

With the addition of ES2015 JavaScript received two new protocols. Some built-in JavaScript types have default iterable behavior defined like Array or Map which allows them to be used in for..of loops. The new iterable and iterator protocols allows you to define iterable behavior for any object.

Concepts

• Iterable - any object that defines a Symbol.iterator method that returns an iterator.
• Iterator - any object containing a next method.

Using iterables

Say that you had an object that contained some users each keyed by their user id.

const users = {
  1438: {
    name: 'Steve'
  },
  1693: {
    name: 'John'
  },
  2356: {
    name: 'Sally'
  }
};

If you try to use a for..of loop with users you will get TypeError: users is not iterable. Well then, how do we make users iterable?

const users = {
  1438: {
    name: 'Steve'
  },
  1693: {
    name: 'John'
  },
  2356: {
    name: 'Sally'
  },
  // iterator definition that makes users an iterable
  [Symbol.iterator]: function() {
    let i = 0;
    const userIds = Object.keys(users);
    return {
      next: () => {
        if (i > userIds.length - 1) {
          return { done: true };
        }

        const userId = userIds[i];
        const user  = this[userId];
        i++;

        return {
          value: user
        }
      }
    }
  }
};

Now when you try to use a for..of loop on users, you are now able to loop over all of the users.

for (const user of users) {
  console.log(user.name); 
  /**
   * outputs:
   * Steve
   * John
   * Sally
   */
}

Users can now also be spread into an array

[...users] // [{"name":"Steve"},{"name":"John"},{"name":"sally"}]