Using ES6 generators for custom iterators

We looked at the basics of using ES6 generators in this post. Generators also come with symbol iterators which can be applied to objects. A symbol iterator helps us implement a custom iterator for our objects. We can declare how our object should behave in a for-of loop. Symbol iterators also involve some weird syntax but generators are weird anyway so a little more weirdness should be fine.

Let’s start off with a simple example:

let partyOrganisation = {
  host: 'John',
  dj: 'Jane',
  food: 'Peter',
  games: 'Mary'
}

Now we want to iterate through the people in the party organisation committee in a for loop. We can add a symbol iterator and assign a generator function to it as follows:

let partyOrganisation = {
  host: 'John',
  dj: 'Jane',
  food: 'Peter',
  games: 'Mary',
  [Symbol.iterator]: function* () {
    yield this.host
    yield this.dj
    yield this.food
    yield this.games
  }
}

The symbol iterator declaration is a bit ugly. You’ll recognise the generator declaration using * and the yield keyword from the post referenced above.

We can now iterate through all members of the object:

for (let member of partyOrganisation) {
  console.log(member)
}

This will print…

John
Jane
Peter
Mary

…in the developer console.

Now we also want to have a couple of guests for a party:

let guests = {
  bestFriend: 'William',
  father: 'Richard',
  mother: 'Susan',
  neighbourLeft: 'Andrew',
  neighbourRight: 'Lisa',
  [Symbol.iterator]: function* () {
    yield this.bestFriend
    yield this.father
    yield this.mother
    yield this.neightbourLeft
    yield this.neightbourRight
  }
}

Finally we want to join the two in a party object and have an iterator that calls upon the iterators of the party organisation and guests object. We can achieve it in the following way:

let party = {
  partyOrganisation,
  guests,
  [Symbol.iterator]: function* () {
    yield* this.partyOrganisation
    yield* this.guests
  }
}

Applying the * operator on the yield keyword declares that we want to call the iterator of the provided object. We can now loop through the party members:

for (let participant of party) {
  console.log(participant)
}

…which will print all participants of the party.

View all posts related to JavaScript here.