Iterators

[00:00:02]
>> Speaker 1: All right, our next topic to dive into, this is from ES6 LAN. So these have been in the language now for a good three to four years. We're gonna talk about iterators and generators. They flow well together, specifically generators are gonna give us a declarative way of creating iterators.

[00:00:20]
So, what do we mean by an iterator? What is that iterator pattern? Well basically, whenever you have some data source, and I'm gonna use heavy air quotes here because data source doesn't have to be a database. It can just be some value like an array. But anything that is a data source, if you would like to consume the values in that data source one at a time.

[00:00:43]
One of the most common ways to do that is called the iterator pattern. Essentially you construct a controller that gives you a view of that data source and it presents values one value at a time. You do that by constructing an object and then calling .next over and over and over again.

[00:01:03]
And every time you call .next, you get back the next value from that data source. So, to consume a data source all the way to it's completion, you would essentially do kind of a loop and just keep calling .next over and over and over again until you've got all the values out.

[00:01:20]
Now why this matters to JavaScript is not just for normal data structures, but in ES6, they took all of the basic built-in data value types that exist in the language and they made them iterable. So an iterable is something that can be iterated over. Let's take a look, you could talk about a string value like quote Hello, or you could talk at about an array that had a set of characters in it.

[00:01:49]
And in both cases, the string and the array or what we call iterable, meaning you can construct an iterator to consume their constituent values. Line 4 you see I'm constructing an iterator, looks a little strange I'm calling this symbol.iterator which is this special value that finds a location on the string object and produces an iterator from it.

[00:02:15]
So line 4 you see them accessing the special metal location of the object, and then I'm invoking it as a function, and that gives me my iterator instance it1. Do the same thing with the world array, and I get another iterator back called it2. Now you see I can call it1.next and I get back what is referred to as an iterator result.

[00:02:39]
And an iterator results is just an object with two properties on it, one of them is the value property, the other one is the done property. Value of course is the value that is being iterated out and done is a Boolean and it tells you if there's anything more to iterate.

[00:02:56]
So when I call it1.next the first time on line 7, I get the character H out of the string. And if I call it again, I get e and then l and then l and then o. And you'll notice line 11, it still says done false. That's because the iterator protocol is that the way that you know that there's nothing else to consume is that you iterate past the end of the data source.

[00:03:19]
You get back a value undefined, and then it says done true. It never throws an error, it just gives you value, undefined, done true, and then you know it's done. And even you kept calling .next over and over and over again, from that point forward, you're just gonna keep getting back value undefined done true.

[00:03:39]
And so I can do that with a string and I can do that with an array. As a matter of fact, almost all the data structures that you work with in your JavaScript program are now iterables and you can iterate over them. This is ugly in manual, but there are some really nice ways of iterating that we'll look at in the next slide.

[00:03:57]
>> Speaker 2: I have a question.
>> Speaker 1: Yes.
>> Speaker 2: Can you go backwards?
>> Speaker 1: Sure.
>> Speaker 2: No, can you go backwards in an iterator?
>> Speaker 1: I'm sorry, [LAUGH] can you backwards in an iterator? The iterator protocol does not support going backwards, it's only a forwards thing. If you wanted to make your own custom extension on that protocol, you could of course.

[00:04:18]
Basically, have your own iterator that gives values out in reverse, and then somebody would keep calling .next, but they would be consuming something in reverse. So, like you could make something like that for an array that iterated it out in reverse. But the protocol, or the interface itself would still be .next, .next, .next, .next.

[00:04:37]
Yeah, and we'll look at making our own custom iterators here in just a moment