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 )

Google+ photo

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

Connecting to %s


A great site

Elliot Balynn's Blog

A directory of wonderful thoughts

Robin Sedlaczek's Blog

Developer on Microsoft Technologies

HarsH ReaLiTy

My goal with this blog is to offend everyone in the world at least once with my words… so no one has a reason to have a heightened sense of themselves. We are all ignorant, we are all found wanting, we are all bad people sometimes.

Softwarearchitektur in der Praxis

Wissenswertes zu Webentwicklung, Domain-Driven Design und Microservices

the software architecture

thoughts, ideas, diagrams,enterprise code, design pattern , solution designs

Technology Talks

on Microsoft technologies, Web, Android and others

Software Engineering

Web development

Disparate Opinions

Various tidbits

chsakell's Blog

Anything around ASP.NET MVC,WEB API, WCF, Entity Framework & AngularJS

Cyber Matters

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

Guru N Guns's

OneSolution To dOTnET.

Johnny Zraiby

Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

%d bloggers like this: