Iterators are a way to process each item of a collection. They were introduced in ES6 and bring the concept of iteration directly into the language.
The concept of iterable object is fundamental to understand iterators.
An iterable object is an object that defines the behavior for each iteration. In other words an object is iterable if it provides the values that are looped over in a
Let’s say we have a simple array.
We can iterate over
movies with a
for...of loop in the following way.
The loop above logs every movie one by one:
The example above is possible because
Array is a built-in iterable.
Set are all built-in iterables. This means that each of them provides a default iteration behavior:
TypedArrayiterate over their items
Stringiterate over each character
Mapiterates over its key-value pairs
Setiterates over its elements
As we have seen not all objects are iterable by default.
What would happen if we iterated over an non-iterable object?
Let’s say instead of an array we have the following object.
Let’s try to iterate over
movies as we did above.
Now we get a different result:
TypeError: movies is not iterable
The error is pretty explanatory, let’s see how we can turn non-iterable into iterable objects.
In order to be able to create iterables, ES6 introduced a couple of iteration protocols:
- the iterable protocol
- the iterator protocol
These protocols can be implemented by any object by following some conventions.
The iterable protocol allows us to define the iteration behavior for our objects.
In order to be iterable, an object must implement a function whose key is
Symbol.iterator and this function must return an object conforming to the iterator protocol.
The iterator protocol is a standard way to produce a sequence of values and a return value when all values have been generated.
In order to be an iterator, an object must implement a
next() that returns an object of the following type:
To recap, if we want our object to be iterable we have to add a function (keyed as
Symbol.iterator) that returns an object with a
next method that returns an object with the value of the current iteration and its status.
Talk is cheap, show me the code!
This might sound confusing so the best way to understand it is with an example.
Let’s make an iterable object
Let’s use the last version of our
movie object and make it iterable.
Our goal is also to restructure the iteration value to an object that includes the title of the movie.
Here is how we could do it:
As you can see in the iterator function I make an array of keys which is the list of movie titles
[ 'The Godfather', 'Pulp fiction' ] and I use it in combination with an index
i that I increase in each iteration to create the desired object for the
Now, with this being done, let’s iterate over our object again.