Looping Over Arrays

[00:00:00]
>> Brian Holt: I've just shown you just a bare minimum few of some of these array methods, but there are lots and lots and lots and lots of them. You should definitely check out the MDN, they're just full of them. So something that gets really useful in conjunction with arrays are loops, right?

[00:00:18]
Because what happens if we wanna do something to every single item in the array? Or we wanna log it out individually. Or maybe we're trying to add things together. Or for whatever reason, you have a list of items or an array of items that you want to process in some fashion.

[00:00:34]
So there's a couple of ways of doing that. The most common way you're gonna see is with a for loop, right? So here you see for let i = 0, and then i is less than cities.length, right? Length is gonna be how long the array is. So for this one, this will be of length 5, cuz there's five cities in there, right?

[00:01:00]
And then at the end of this, we'll do i++. And then the console.log cities, and then notice that we're using i right there, right? So i is gonna change on every single iteration, right? So it's gonna start at 0, right, cuz arrays start at 0, okay? And then the first one's gonna say, is 0 less than 5, okay?

[00:01:19]
So it does another iteration that goes through and it logs each one of them out. As you can see here, let's just put a console.log.
>> Brian Holt: Okay, so as you see there, it goes through and logs through it, everything once. Or maybe we want it to log toUpperCase.

[00:01:44]
>> Brian Holt: Right, and that allows us to process everything in the list individually. So that's the first method of doing it is with a for loop. And again, quite often what you will see how to process arrays. Any questions about that?
>> Brian Holt: Yeah?
>> Speaker 2: So if you took out the limit on the counter, what would that look like?

[00:02:07]
>> Brian Holt: So if I just i is less than-
>> Speaker 2: Yeah, you just took that out. Would that be an infinite loop?
>> Brian Holt: That would be an infinite loop, yeah. Cuz this has to have some sort of terminating condition, right?
>> Speaker 2: Yeah, even though it runs out of items on the list?

[00:02:24]
>> Brian Holt: Yeah, eventually, I really,
>> Brian Holt: All right, you're gonna make me crash my browser again. It's fine, I'm not upset.
>> [LAUGH]
>> Brian Holt: So if you wanted to get a little bit more subtle kind of log you could have here, you could have cities.push,
>> Brian Holt: thing, and now I've broken it.

[00:02:49]
So why did I break this?
>> Speaker 3: Cuz you're making it longer without end.
>> Brian Holt: Right, exactly, and so Firefox is like, you did something bad there.
>> [LAUGH]
>> Brian Holt: Stop it.
>> [LAUGH]
>> Brian Holt: Right?
>> Brian Holt: That's right broken, okay. So to explain exactly what happened there, it's looping over the array and it's asking, it's like, is cities.length, is i getting larger than cities.length?

[00:03:23]
But cities is always getting longer, right? So it's never going to end, cuz I keep pushing things onto the array. So does that answer your question?.
>> Speaker 2: Yeah.
>> Brian Holt: Cool.
>> Speaker 2: What if you just change cities.length to 10 or 8? So we know that it's longer than the length.

[00:03:38]
But then once it gets to calling the sixth element of cities, it wouldn't just crash? It would still go through an infinite loop?
>> Brian Holt: Undefined.
>> Speaker 2: Okay, so that's okay. It's just not what we want.
>> Brian Holt: Right, it's not gonna crash. But if I was trying to do cities.toUpperCase, then we have a problem.

[00:04:01]
Because you can't call toUpperCase on something that's undefined.
>> Speaker 2: But that's much preferable to an infinite loop, cuz that tells us what the problem is.
>> Brian Holt: Yep, exactly.
>> Speaker 2: Why there does it say cities[i] is undefined as opposed to cities[6] is undefined? Or I guess 5, cuz 0 through 4 worked.

[00:04:23]
>> Brian Holt: Let's see what it actually says here. This is not necessarily what it's gonna say. It actually catches that. So I don't think that's what the browser's actually gonna say. I think the browser will say that,
>> Brian Holt: It might say cities[i], because that's actually, it's printing back to the code that's incorrect.

[00:04:43]
So rather than saying cities-
>> Speaker 2: [INAUDIBLE] crashed.
>> Brian Holt: It's not going to do any sort of interpolation to tell you that this crashed in index 6. It's gonna say this bit of code crashed, right? So it's actually just printing out literally the code that crashed. But that's gonna depend on if it's Chrome, or Firefox, or Safari, how they actually end up handling that.