This course has been updated! We now recommend you take the JavaScript: The Recent Parts course.
Transcript from the "Iterators" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kyle Simpson: So what exactly is an iterator? First of all, how many of you know what an iterator is, either from JavaScript or maybe from some other language, you know what iterators are? Okay, for the benefit of those that are listening in, if you don't know what an iterator is, it's a patterned way of stepping through a set of data on some data source.
[00:00:22] So easiest way to illustrate that might be if you had a database query that you made and it might have a whole bunch of different rows from the database query that are coming back but you only want to consume those rows one at a time. So you'd have an iterator attached to the result object and you would say .next.
[00:00:42] That's a method call on your iterator and it would give you one more row and then later whenever you're ready you'd call .next again and you get another row and another row and another row. You keep calling the .next until you'd consumed all the data. So it's just a simple interface for stepping through data.
[00:00:58] That's what an iterator is. We talked about this earlier but just to reinforce to remind you. Certain values in JavaScript are now automatically come shipped with an iterator. The array, 1, 2, 3 come shipped with it, an iterator at the location symbol dot iterator which automatically will give you one value at a time in the order that the values appear in the array.
[00:01:26] So we could make an iterator and consume it manually. We could say iterator = arr[Symbol.iterator]. This thing is a function and when we call it, it produces an iterator instance, okay? Now we can call .next on it. We could say it.next. In which case we're gonna get back what's called an iterator result.
[00:01:54] An iterator result is an object with two properties on it. One of them is the value property. One of them is the done property. Value has the value. Done is a boolean that tells us if there's any more values to consume. So here we get back an object that said value what?
[00:02:12] Value 1, done: false. If I said it.next again, I'd get back what?
>> Kyle Simpson: Come on y'all need to drink some more coffee. If I said it.next a third time I get what? I'd get value 3. Now here's something interesting. It's still gonna say done: false. And you're gonna wonder why does it say that.
[00:02:46] I'll show you why in just a moment. Hang, stupid autocomplete is going crazy over here. When I call it a fourth time, I'm gonna get back value undefined, done: true.
>> Kyle Simpson: Okay? So what's going on here? Well, if we had returned done: true on this one, certain forms of iteration over this dataset would have thrown away the value 3, which would be super annoying.
[00:03:22] So the way you know that there's no more values to get is you keep calling the .next until you get a done: true and then you know I got nothing else to do. So I don't have to worry about anything, I can just quit, okay? So you can imagine, you could set yourself up with a pretty simple while loop or four loop to iterate over a values iterator.
[00:03:41] Everybody with me? But who wants to do iterators manually? This sucks, so JavaScript added a new loop type for us. The for of loop. You know about for loops. You know about for in loops. Now we have a for of loop. I can say for v of arr.
[00:04:04] I just have to give it an iterable. That is something that can make an iterator. And now they will automatically call the .next under the covers, pull out the value and it will keep looping until it gets a done false.
>> Kyle Simpson: So if I grab that code and we try to over here in the browser.
[00:04:25] Now we print out 1, 2, 3 separately.
>> Kyle Simpson: So that's super useful that the for of loop can loop over any iterator, any iterable, okay? What about this?
>> Kyle Simpson: Remember strings are interables? We can loop over them character by character.
>> Kyle Simpson: H-E-L-L-O, okay?
>> Kyle Simpson: So several of the built in JavaScript values that you're used to dealing with are already iterables meaning they ship with a default iterator that does something useful.
[00:05:16] Notably, objects do not ship with a default iterator meaning objects by default, plain old simple objects by default, are not iterables. You could make your own which is what we're gonna do here in just a minute. But by default I can't just say for var v of obj and have it work cuz you're gonna come back and tell me I don't have an iterator to work with, okay?
[00:05:38] There's a bunch of historical reasons why they didn't ship those with iterators. May work about the same as we'd expect at a later time. Yes?
>> Speaker 2: Question, Alice is asking, wouldn't a for in loop work the same?
>> Kyle Simpson: It does not. So for in loops.
>> Kyle Simpson: Have a different signature.
[00:06:05] They don't look at the value, they look at the key.
>> Kyle Simpson: So if I run, if I comment that out for a minute.
>> Kyle Simpson: If I ran the for in loop. We get 0, 1, 2, 3, 4, okay? Now you're thinking yourself. Well that's super simple you just do str[k].
[00:06:34] They're still not going to be equivalent because the for in loop does not use the internal iterator which means you could customize the iterator and the for in loop is still gonna loop only over own properties. It's not actually asking the data structure for its own iterator. You can make an iterator that decided to give you values in different orders.
[00:06:58] The foreign loop is gonna use its built innumerable ordering across the own properties.
>> Kyle Simpson: Besides, who wants to say string of k, when I can just say for var of? That's so much nicer, right? Because most of the time, it's the value we care about. Not the key that we care about.
[00:07:22]
>> Kyle Simpson: All right, it's not just the for of loop that this is cool with. You also might remember earlier that I told you the dot dot dot operator works on iterables. What it does is the dot dot dot operator under the covers does the for of the essentially.
[00:07:38] So the string if I say, array ...str, what I'm doing is getting an iterable that's attached to the data source string. And I'm looping over each one of those values pulling each one of them out and adding them into this array, okay? ...string by itself is not an array.
[00:08:00] It's really easy to get confused. It is not an array. It is a consumption of an iterator. And a consumption of an iterator has to have someplace to go. There's only two places that consumptions of iterators can go inside array literals or inside of function argument call lists.
[00:08:19] So that's why those are the only two places that we can say something like ...arr, okay? [COUGH] We can do some really interesting things with this trick. And also combining in some of our destructuring from earlier. What if you wanted to know just the first two characters in some string?
[00:08:51] You can say.
>> Kyle Simpson: So now string is gonna be treated as an array and pull off the x and the y. You could make it super obvious if you wanted to do that.
>> Kyle Simpson: Okay? We could do.
>> Kyle Simpson: Gather the rest of them up into an array. So now rest is gonna be an array that has the characters LLO as individual values in it.