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* () {

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) {

This will print…


…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 = {
  [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) {

…which will print all participants of the party.

View all posts related to JavaScript here.


About Andras Nemes
I'm a .NET/Java developer living and working in Stockholm, Sweden.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Elliot Balynn's Blog

A directory of wonderful thoughts

Software Engineering

Web development

Disparate Opinions

Various tidbits

chsakell's Blog


Once Upon a Camayoc

Bite-size insight on Cyber Security for the not too technical.

%d bloggers like this: