Declarative Iterators

[00:00:00]
>> Kyle Simpson: If you wanted to iterate over a string programmatically, like automatically in some sort of looping construct, instead of calling .next over and over again. You could come up with a looping construct like this. Which makes an iterator, and then calls .next on it, saves the result. If the result is not done true, then grab the results value out and then use it.

[00:00:25]
And that certainly works, but I think we can all agree, nobody wants to write loops like that. And so this is a perfect example of where we should have declarative syntax in place of a very imperative and hard to understand approach to the code. And so in ES6, we added, instead of that kind of construct, to consume an iterator, you can now use what's called the for of loop.

[00:00:49]
That is distinct from the for in loop and the regular for numeric iterator loop. The for of loop takes iterables, meaning things that can be iterated over. And it iterates over them, and gives you the iterated value for each iteration. So notice that I'm making, manually, my own iterator, by calling that special Symbol.iterator location.

[00:01:15]
I'm making an iterator instance here called IT. And I can iterate over an iterator, because an iterator is an iterable, it just returns itself. But also, line 9, I can just say for of with the iterable itself, the string. I can do it in either way. One advantage of making your own iterator is that, if that was a function that you wanted to call, or call it from a different location, or pass some sort of arguments to it, you can make your own iterator, and then iterate over it.

[00:01:52]
But if you're just gonna use the basic, built-in default ones, line 9 shows you, just do a for of loop directly over the iterable value. So as I said, most of the built-in data structures that you're familiar with, strings, arrays, sets, and maps, and typed arrays, all of these are iterables, which means you can use the for of loop on them.

[00:02:17]
You can also use another syntax for iterating over them. Which is the dot dot dot operator. This is the so-called spread operator from ES6, and the dot dot dot operator consumes an iterator. So here, string bean iterator on line 3. The dot dot dot operator says, I'm gonna go get all of those values one at a time from the thing, and iterate them out, and here I'm spreading it out, or iterating it out, into the enclosing array, line 3.

[00:02:49]
And that has, in this case, the effect of separating a string out into an array of its characters
>> Kyle Simpson: So dot dot dot and for of are both syntactic support for the iterator protocol, which is now a first-class built-in citizen in JavaScript. Now, why this matters is not just because you're gonna iterate over characters of a string, which you, quite frankly, probably won't do.

[00:03:16]
But why it matters that it's now a first-class protocol, is that that means your own custom data structures, if you adhere to the iterator protocol. If you expose an iterator that adheres to that protocol, then any user of your code can use these syntactic built-in mechanisms with your data structure.

[00:03:40]
So say you have a data structure that is a map with various different objects in it that represent location points. And you wanna make that map iterable, not map as in the sense of, like, a data structure map, but like a geographical map thing, like a Google Maps thing.

[00:03:59]
So you wanna make your little custom map thing. The iterable, all you have to do is expose an iterator on it that, when it calls .next, it returns another one of those point objects. And then somebody can use a dot dot dot or a for of loop to iterate over your data structure.

[00:04:15]
It creates a standardized way of iterating through data sources.