Iterable Objects

[00:00:00]
>> All right, lift off. Let the confusion begin. Okay, we have been talking about iteration in JavaScript, and we know a couple of ways to iterate in JavaScript from before. We've done some dot mapping on arrays. We learned recently we can only do it on arrays and things that ultimately have an array somewhere up the chain.

[00:00:26]
We've seen the for of loop. Any other iteration flavors that folks would like to share they use? I heard a couple earlier. Other ways to iterate over stuff in JavaScript? There's a few.
>> .filter()?
>> Well, okay, so .filter(), similar to map, is iterating over things. It's just kind of doing a different operation, but that's also an array friend.

[00:00:57]
>> .forEach()?
>> So .forEach() is another one which you might have noticed actually does work on things like HTML collections, I think. Let's double-check that. Children, well, there's just one thing in it, okay, but let's try [LAUGH] document.children.forEach, not a function, okay. In any case, forEach does prop up on a lot of objects, but it is not something we can always count on.

[00:01:34]
And there are other similarly iterative methods that specific objects and their descendants down the prototype chain might implement. So there's really as many different methods that iterate over stuff as you might want. And things like for of have come in more recently as a more kind of standardized way that we're able to iterate over things.

[00:02:05]
So that is a pretty relatively, not super new, but relatively new development in JavaScript that allows us to not only I call this method, like .map() or .forEach() on objects which implement this method or have a prototype that implements this method or blah, blah, blah. But for of is designed to work on any object, whatsoever, that is iterable.

[00:02:45]
Okay, didn't I just talk in circles? So what's an object that's iterable if not an object that has certain things? Well, it is an object that has a certain property, as everything is in JavaScript, we have objects and they have properties and that's pretty much the end of the story.

[00:03:01]
Although, not really, cuz we have decades of humans trying to deal with that. But anyway, the definition of an iterable in JavaScript now, since ES6, which I believe is like 2015, is an object iterable if it has an iterator, an @@iterator method. Which, like, what is that? We don't even have that character much except in strings.

[00:03:32]
The way we access that iterator thing is as a symbol. So there is this concept of symbols, the symbol, capital S symbol, will give you certain of these special properties, like symbol.iterator. That property existing doesn't quite make an object iterable. That property has to return or evaluate to, point to, the correct type of function, which is a function that takes no arguments and returns an iterator object, Cool, we're just going up the chain of vocabulary like it's a prototype chain.

[00:04:30]
Okay, so then we need to talk about what is an iterator then. How do I know what function I need to write? If I wanna make an object iterable, what do I need to do? You need to return an iterator from the function that is the value of symbol iterator, okay.

[00:04:46]
So the iterator definition then is basically any object that has a .next(), which is a method, meaning it points to a function, and that function returns objects with a done property and a value property. And done is a Boolean, which shockingly indicates whether iteration is done or not.

[00:05:15]
And value is the latest value to have been iterated. At this point the English language is starting to break down with JavaScript, but it's my version of it. But the idea is that an iterator, you can call .next() on, and when you call .next() on an iterator, you get back an object that tells you whether the iterator is done and what value it has just spit out.

[00:05:50]
And so by repetitively calling .next(), you can get each successive value out of the iterator.