Iterators, iterables, and generators in Javascript

Everything you need to know about function-generated collections in Javascript


Collections do not stop with Arrays, Sets, Maps, and similar data structures. There is a completely different approach to define them.

They are called streaming, lazy, or function-generated collections. This is when you don’t necessarily have all the elements beforehand, but define a function that creates the next one when needed.

This opens up a whole new world. Collections that don’t fit into the memory or even infinite ones become possible, opening new possibilities and making some problems more expressive or efficient.

While this guide focuses on Javascript, the same concepts pop up everywhere. Most languages have some concepts of Iterators and Iterables. Learn the protocols for the functions that generate them on-the-fly.

Level up your coding game and avoid the pitfalls along the way with our screencast series.


1. [Screencast] Iterators in Javascript

In this first post, we’ll look into the basis of all generated collections: The iterator protocol.

Iterators are both simple and elegant. They capture the essence of what a collection is good for: The ability to produce a sequence of elements. There is the generalized and standardized way to define them in Javascript.

In this post, you’ll learn how they are defined, how to write one, and also how to make use of one.


2. [Screencast] Iterables in Javascript

In the second post, we’ll move on to iterables. While iterators focus on how to use elements, iterables are the other end of the equation: how to produce iterators. They define how something can be iterated over.

Having a protocol is also useful that language constructs can support them. This makes different collection types interchangeable: the consumer does not care how the elements are produced as long as they are the right ones.

Learn how Javascript’s iterable protocol is defined, and some of the constructs that support them on the language level.


3. [Screencast] Generators in Javascript

Generator functions are a recent addition to Javascript, and they are unique in the language.

They are a type of function that can be paused and resumed. Unlike traditional functions that run to completion, they produce multiple elements in the course of a single call. This behavior opens up a lot of potential.

In the context of collections, they greatly simplify the protocol you need to write for a lazy collection.

But alas, they break the clear separation between iterators and iterables.

Learn why it’s a problem and what to do about it.


4. [Screencast] Generators and ImmutableJS

While iterators open up new ways of coding that are not possible with traditional Arrays, they still lack an important component: a developer-friendly API.

This is where third-party libraries come handy. We’ll look into a specific one: ImmmutableJs. It has support for its own version of lazy collection: the Seq.

For many use cases, Seq does a great job. But it lacks the versatility of generator functions.

Learn how to combine generator functions with ImmutableJs’s Seq to get the best of both worlds. And also learn what to look out for when you do so.


Interesting article?

Get hand-crafted emails on new content!