How JavaScript works: iterators + tips on gaining advanced control over generators

Published in

SessionStack Blog

7 min readMar 11, 2021

This is post # 23 of the series, dedicated to exploring JavaScript and its building components. In the process of identifying and describing the core elements, we also share some rules of thumb we use when building SessionStack, a JavaScript tool for developers to identify, visualize, and reproduce web app bugs through pixel-perfect session replay.

Overview

Processing each item in a collection is a very common operation, no matter the programming language. JavaScript is no exception and provides a number of ways to iterate over collections. The spectrum ranges from simple for loops to the more complex map() and filter().

Iterators and Generators bring the concept of iteration, build into the core of JavaScript and provide a mechanism for customizing the behavior of for…of loops.

Iterators

In JavaScript, an iterator is an object which defines a sequence and potentially a return value upon its termination.

An iterator can be any object that implements the Iterator interface. This means that it needs to have a next() method that returns an object with two properties:

value: the next value in the sequence.
done: this value is true if the last value in the sequence has been consumed. If the value property is also present, it’s the iterator’s return value.

Once created, an iterator object can be iterated by invoking the next() method. After the last value in the sequence has been reached, additional calls to next() should continue returning {done: true}.

Using Iterators

Sometimes it might require too many resources in order to allocate an array with values and loop through each of them. Iterators, on the other hand, are consumed only as necessary. This gives the potential of iterators to even express sequences of unlimited size.

Here is an example that shows the creation of a simple iterator that generates the Fibonacci Sequence:

The makeFibonacciSequenceIterator simply starts generating the Fibonacci numbers and stops when it reaches the endIndex. The iterator returns the current Fibonacci number on each iteration and continues returning the last generated number upon completion.

This is how the Fibonacci numbers can be generated through the iterator above:

Defining Iterables

The way the iterator is created above could create potential problems since there is no way to validate whether it is a valid iterator or not. Yes, the returned value contains a next() function but this could be just a coincidence. Many objects could have a next() function defined while not being actually iterable.

This is why JavaScript has one more requirement in order to properly define an iterable object.

The Fibonacci example above won’t be recognized by JavaScript as an iterable object and this can be tested by trying to iterate through the sequence with a for…of loop:

The code above will produce the following exception:

Uncaught TypeError: fibonacciSequenceIterator is not iterable

Some built-in types, such as Array or Map, have a default iteration behavior, while other types (such as Object) do not.

In order to be iterable, an object must implement the @@iteratorby having a property with a Symbol.iterator key. The property-definition should be a function that returns the items to be iterated.

Let’s see how the above Fibonacci example looks like if we create an iterable object:

Now that we have an iterable object, we can use the for…of operator to iterate through it:

Generators

Custom iterators are very useful and can bring great efficiency in certain use-cases. Their creation and maintenance, however, requires careful programming due to the need to explicitly maintain their internal state.

Generator functions provide a powerful alternative by allowing you to define an iterative procedure by writing a single function whose execution is not continuous. Generator functions are written using the function* syntax.

When called, generator functions do not initially execute their code. Instead, they return a special type of iterator, called a Generator. When a value is consumed by calling the generator’s next method, the Generator function executes until it encounters the yield keyword.

A generator can be thought of as a function that can produce a series of values instead of a single value, as it is being continuously invoked.

The syntax of generators includes an operator called yield which allows pausing the function until the next value is requested.

Let’s look at how the Fibonacci example can be rewritten using a generator:

It can easily be seen that this implementation is much easier to implement and maintain.

Advanced Control Over Generators

Iterators define the next() function explicitly in order to implement the required interface by JavaScript. With generators, the next() function is added implicitly but it still exists. And this is how generators produce valid iterables.

The implicitly defined next() function of the generator accepts an argument that can be used to modify the internal state of the generator. A value passed to next() will be received by the yield statement.

Let’s further modify the Fibonacci example so that you can control how many numbers can be skipped on each step of the sequence:

It’s important to note that a value passed to the first invocation of next() is always ignored.

Another important feature is the ability to force a generator to throw an exception by calling its throw() method and passing the exception value it should throw. This exception will be thrown from the current suspended context of the generator as if the yield that is currently suspended were instead a throw value statement.

If the exception is not caught within the generator, it will propagate up through the external call of throw(), and subsequent calls to next() will result in the done property being true. Let’s look at the following example:

A generator can also be terminated by invoking the return(value) method which returns the given value:

Async Generators

A generator can be defined and used in an async context. An async generator can asynchronously generate a sequence of values

The syntax is quite straightforward. The `async` keyword needs to be prepended to the function* definition of the generator.

When iterating over the generated sequence, the await keyword needs to be used in the for…of construct.

Let’s modify the Fibonacci example so that it generates the sequence with predefined timeouts:

As the generator is asynchronous, we can use await inside it, rely on promises, perform network requests, and so on. The next() method of the generator returns a Promsie.

If for some reason you don’t want to use generators but want to define an iterable, you have to use Symbol.asyncIterator rather than Symbol.iterator as it was done before.

Even though generators are much simpler to create and maintain compared to iterators, they could be more difficult to debug compared to normal functions. This is especially true in asynchronous contexts. There might be many reasons for this. An example of such could be a quite limited stack trace when invoking the throw() method externally. Debugging in such cases might be quite impossible from the available technical information and you might have to ask your users for more context.

To optimize the troubleshooting efforts, you can use a tool like SessionStack, where you can replay JavaScript errors as if they happened in your browser. You can visually replay the exact user steps that led to the error, see the device, resolution, network, and all of the data that might be needed to connect the dots.

There is a free trial if you’d like to give SessionStack a try.

If you missed the previous chapters of the series, you can find them here:

Resources: