Loops

[00:00:00]
>> Kyle Simpson: It is often gonna be the case that you have several different operations that you need to do multiple, multiple times. And that's where we get loops. Loops are the way that we repeat something over and over and over again. So here, let's say that I had an array called students.

[00:00:17]
All I've done there on line one is just leave out what values that I might have put in it. And by the way, if you haven't seen that syntax with the little /* and */ thing, that's just a comment. That's why it's grayed out. That's just a little inline comment.

[00:00:31]
And all I'm signaling to you is there's a bunch of values there that I didn't have space on the slides to type in, but they could have been numbers, strings, who knows? Okay, so that's an array that has some set of values in it. And what we wanna do is say hi to them.

[00:00:45]
So let's say that all of the values in this array might have been the strings that were all of your student names like Matt and Sarah, and all the rest of them, they all would have been listed in their individually okay. So if we were to say for, which is what we're doing on line three, we're basically indicating, hey, I'm gonna repeat something a bunch of times.

[00:01:08]
And there's two different ways of doing a repetition with the four loop that we're seeing here, one on line three, one on line seven. So we'll take each one of them split and focus on them. The line three block of code, line three, four, and five that is saying I want to do something where I'm gonna count how many times I do it.

[00:01:29]
So we do let i, let is just another way of creating a variable similar to var, but it makes it smaller block of our code. In this case, only inside of that curly brace paragraph if you will. But it's the same kind of concept as making an i, and we're initially gonna start it at 0.

[00:01:48]
And then notice on the very far right-hand side, we've got an i++. That i++ says, remember, that we wanna update it by one, we wanna increment it by one each time. And how do we know when to stop the loop, because we don't wanna let the loop run forever.

[00:02:03]
How do we know when to stop the loop? It's the stuff in the middle. You'll notice that there's a clause and these are separated by, see the semicolons. They're separated by semicolons, the thing in the middle is what we call a test clause. And it's identical in its behavior to what we put in an if statement.

[00:02:20]
So it's yet another way of making a decision. Here the decision is, should I keep the loop going or should I stop it? And we're gonna re-evaluate, we're gonna relook at that expression every single time we do a loop. So we're gonna just keep repeating and repeating. That's kinda like if your kid was jumping jump rope, and they're just gonna keep jumping, and jumping, and jumping.

[00:02:39]
And at some point, they're gonna get tired or whatever. I mean, I can do four or five jump rope cycles before I get tired. But they're gonna keep going and keep doing, until they get tired, and then they're gonna stop. And it's the same thing here, we're gonna loop, and loop, and loop until we have decided that it's time to stop.

[00:02:56]
How do we decide, here? Well, it's if our little counter that started at 0, if it has gone through all of the students. We've looked at students.length and maybe that was 15 cuz there's 15 of you here. Well, it's going to go through all of those students and then when it's done then it says stop the loop.

[00:03:14]
And for each time that we do the loop, we're gonna call this function greetStudent just to say hi. So hi, Matt, hi, Sarah. We're gonna do each one one at a time. And the way we get out those values from the array to tell it who to greet is that students with the square brackets of i.

[00:03:33]
That looks exactly like when we did square brackets of one, but now we're telling it specifically which position to get based upon that little i variable that's going to be counting from 0 up to, in this case, 14. If we went from 0 to 14, that is 15 items or 15 iterations, 15 times that we've done the loop.

[00:03:56]
Now, line seven is a slightly different kind of loop. It's a for loop that is going to go over a list of values. So you notice I have this let student. That's gonna get assigned automatically by this for of loop, it's gonna get assigned each value out of the array.

[00:04:13]
So I don't need to go access it by a position. It's just gonna automatically tell me give me all of the values that are in this students array. There's a very technical term for this. This is called an iterator that it's going through a value source like an array and just getting all of those values out.

[00:04:30]
But these are two very common loop forms that you'll find when you're seeing JavaScript programming. They're not the only kind of loops though. There are while loops, for example. A while loop is similar to the for loop, except you'll notice that we don't set anything up like an initial value.

[00:04:46]
And we don't increment anything. We just have a single clause there, a single expression, (students.length > 0) And it's just evaluating either the true or false. And the while loop says keep going while it evaluates the true. So if they were a thousand of you in this room, this would be a really crowded room.

[00:05:06]
But if there were a thousand of you in this room, we'd just keep going a thousand times. From 0 up to 999. Well, actually, we're not counting anymore, since there's not a for loop. What you'll notice here is that we're checking to make sure that students.length still has items in it.

[00:05:23]
That's why we're saying greater than 0. So what's happening here is actually kinda sneaky. On line four, we are actually removing students from the list of students array. We're pulling them out of this list. That's what the .pop is doing. And that's a method that we can do on arrays that just takes a value out and then it's no longer in the array anymore.

[00:05:47]
So we're saying give me one value out of the array, and then greet that student. So hi, Matt, and then give me another value out of the array, hi, Susan, hi, Sarah. We just grab each one of these values out of the array. And by removing the element from the array, we've made it smaller and smaller and smaller.

[00:06:04]
At some point, it's not gonna have any more students. And its length is gonna be 0. And then (students.length > 0) that's gonna give us false. And that's when the while loop says, okay, it's time to stop. So that's a general, very brief overview of how you loop things, how you repeat things like process through a list of students.

[00:06:27]
All right, let's try out a loop and see how this works. We've got a list of students here. And we've got a while loop that's going to loop over them and print them out. I switched it around a little bit just so that we can run it on environment.

[00:06:39]
When I click run here, you'll notice that we've printed Susan, Sarah, and Matt. That went in reverse order because pop is taking from the end. But there's a different method that we could've called on the array, and it's shift, which will take it off the front. So when I run it again, now we're gonna see, Hello, Matt!, Hello, Sarah!, and Hello, Susan!.