Let’s get into Iterables playing with the spread operator

No bad for a story title, right? I hope this has catch your attention and it allow me to walk you into the Iteration protocols.

Photo by freestocks on Unsplash

¿Have you wonder how the spread operator works? Do you like black magic? Well, I do. But since I am an Engineer I’ll be using calculations to unveil the magic behind the spread operation.

I was having fun playing with Iterables when suddenly the three little dots ´…´what makes a spread operator came into my mind., play with me! play with me! it says. Stop this madness and show me the code

We’ll be constructing the String object explicitly to avoid auto-boxing

Spread operation over a simple string

Cool, something to be expected for. But, how about if the String has spaces?

Spread operation over a string that has spaces

I don’t know about you but personally I don’t like spaces and that spread operation is iterating over the spaces too. I want to change that behaviour.

Inside the black magic

In order to get a value from the string, the spread operator has to invoke two powerful spells (protocols), the Iterable and the Iterator.

No spaces allowed

AHA we leave no room for spaces but maybe I lost you. Let me walk you into this invocation.

The Iterable spell

This powerful spell allow Javascript objects to define or customize their iteration behaviour such as what values are looped over a for…of construct or a spread operation.

In order to be an Iterable an Object must implement the @@iterator method. So it’s just a function? it is, that’s all ❤️.

Redefining iteration behaviour

So let’s take a look a little deeper in the dontIterateOverSpaces function. The Iterable spell is made of a function that provides definition for the values we want to loop over.

The Iterable protocol

The Iterable spell has been made to be composed with the Iterator protocol, so one spell has no enough power without the other.

The Iterator spell

The Iterator spell defines an standar way to produce a sequence of values and potentially a return value when all values has been generated.

So it’s just an Object with a next function on it? Yeah, but the next function must return an object with two mandatory properties: value (the value we want to be produced), done (indicates if iteration has been terminated).

The Iterator protocol

The previous code makes an infinite iteration since we keep sending 1 to our caller and telling that the iteration will continue (done property). The next function will be called by the spread operator until there is no more values to be produced.

So it’s time to put our spells together, take a glance.

The Iteration protocols

This run smoothly, now let’s play with Numbers.

Numbers are not iterable

Numbers are not iterable, what means we cannot use them in the for…of construct or with the spread operator. Or can we? 🤔

The Iteration protocols (Iterable and Iterator)

Now you can see the results using the spread operator.

Iteration protocols over Numbers

Sweet, but ¿Could we make it a little more readable?

Generators*

“The generator Object conforms to both the Iterable protocol and the Iterator protocol”

Javascript Generators

I’ll be dropping an article about Generators but for now this was a preview.