Check out a free preview of the full TypeScript Fundamentals course:
The "Iterables" Lesson is part of the full, TypeScript Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:

Mike reviews and demonstrates iterables, objects that can ask for an iterator.

Get Unlimited Access Now

Transcript from the "Iterables" Lesson

[00:00:00]
>> Mike North: Iterables are objects that you can ask for an iterator. And several of the objects you're used to working with in the JavaScript world, they are already iterables. The name of the function that you use to retrieve an iterator from an iterable is symbol.iterator.
>> Mike North: And Array and Map already support this.

[00:00:27] So I want to kick out, and start working in Chrome here, just because symbols are a little hard for people to wrap their heads around. It's a simple concept, and I just wanna have something dynamic, where we can see the output right away. But this is what we're gonna end up getting, right?

[00:00:45] Where we have an array, we grab an iterator off of it, and as we pull those three items off, we'll get values, and then the last time we pull something off, we'll get an indication that we're done. We've basically, like, this array has given us all it has to give.

[00:01:03] All right, so here's my console. So if I've got an array,
>> Mike North: Like this. So we wanna invoke a function on this object to get the iterator out, and we know that we can use dot notation to access properties on objects like this, or we can use bracket notation, right?

[00:01:33] We could do this, and it means exactly the same thing. So when we have, does anyone think of reasons, one, we might want to use bracket notation? Like when dot notation might not be possible. Yes?
>> Speaker 2: If you're trying to access a key that's saved as a value of a variable.

[00:01:58]
>> Speaker 3: So like if I had bar L equals length, I could go r bracket L bracket.
>> Mike North: Absolutely, absolutely. So that would be a dynamic property key, where the name of the property we wish to ask for is a variable. Another common example would be something like this, where we have a dash and the name of the property, and that makes this, and that makes it so we have to use bracket notation to avoid this looking like arithmetic, or the subtraction of my-values to variables.

[00:02:35] So, there are certain types of values that we must use bracket notation for, in order to get stuff out. So we've got our array here, and the name of. If I were to say I'm gonna get the value, I'll do just what you said. Let prop equals. That's the name of our property.

[00:02:59] It's a legal property key. Right, we're talking about symbols here and that this, you may have properties whose keys are symbols. And if we look at this, the value of this property, it looks just like that. So all you need to know is that when we say Symbol.iterator, it's almost like the variable name and the value are the same, right?

[00:03:20] That is what makes a symbol a symbol. Like we don't get to, you can create new symbols if you want, like this. So that would be a symbol of hello. But it's just sort of a very standard. It's a string like thing, except it's not really used for dynamic data.

[00:03:45] It's for reserved special words, think of it that way. So we've got our array, and we've got our name of our property.
>> Mike North: And what we've just retrieved is an iterator.
>> Mike North: And you can see that, oops.
>> Mike North: Did I just do this wrong?
>> Mike North: Come on now.

[00:04:28]
>> Mike North: Yeah, that should be fine. Frontend masters.
>> Mike North: So that's gonna give us, this is what makes this iterable.
>> Mike North: Yeah. Sorry. I'm crazy. All right, here it is. Sorry. This is me before my first cup of coffee. It's a function that we have to invoke. We're not simply interested in pulling that function off as a value.

[00:05:11] We want to invoke the function. And now we've got our iterator, which has a next property on it. That's also a function. That's what we're getting off of it. I want to show you that this is built into JavaScript. However, we can define our own iterators. Does anyone have any questions about symbol?

[00:05:32] Or about,
>> Mike North: Is anyone unclear as to what I've just done here? I know I took us on a roundabout path, but just to recap, here's an array.
>> Mike North: And we have established that, all I'm doing is I'm grabbing a property off of this array. The name of that property is not like the property keys we're used to, where we can use dot notation.

[00:06:04] It is a symbol, and that property happens to be a function. And I'm evoking that function. So we would just say the name of this function that's on this array is the symbol iterator. And now, I've got an iterator.
>> Mike North: Okay, so, so we would say that what we've done here, is we've stated that arrays are iterable.

[00:06:37] And in the typescript world, you could almost think of this as an interface, right. When we say something is iterable, it's not that it has a special parent class. It's just that it has a particular standard structure. And the standard structure is, when we invoke this function, whose name is Symbol.iterator, we get an iterator out.

[00:07:02] And we know exactly what this iterator looks like. It has a function on it called next, and that next returns those very specific things. So it is something that we can implement on our own, as we've done here. Right, we just created an object that meets all of those criteria.

[00:07:22] And now, what we can do is use this in a new type of for loop. It's a for-of loop. So you've seen, probably, a for-in loop, which lets you iterate over objects or arrays, this lets you iterate over any iterable. And it uses this concept of an iterator behind the scenes, to get from value to value to value.

[00:07:50]
>> Mike North: So in this case, just because of how this iterator works, and because the value inside that next function there. It's just using an index, and it's incrementing each letter one by one, for basically when you go through the for loop and print something like this out. So at this point, you should be thinking, that seems like a really involved way of doing something I could have done with regular functions, and closers.

[00:08:14] And even our functional shopping cart seemed to be a little bit simpler than this, certainly easier for fellow developers to read. But it is important that we be able to define patterns like this, so that we can build some cooler things on top of them.