Check out a free preview of the full Introduction to JavaScript Programming course:
The "Loops" Lesson is part of the full, Introduction to JavaScript Programming course featured in this preview video. Here's what you'd learn in this lesson:

Loops like “for”, “while”, and “do-while” continue to execute a block of code while a condition is true. Kyle starts by demonstrating a “for” loop which uses an iterator to control how many times the loop runs. He then talks about while loops and how the break statement can be used to halt a loops execution.

Get Free Access Now

Transcript from the "Loops" Lesson

[00:00:00]
>> Kyle Simpson: Conditionals are how you make decisions in programs, and they're incredibly important. They show up in more places than just the if statement. The if statement is the most common place that you see a conditional. But there's other places that conditionals are used. For example, I mentioned earlier loops, like the while loop.

[00:00:18] The while loop tests this as a conditional, the same way an if statement does. And it tests it every time, it's gonna keep repeating itself until the thing tests false. So, this brings us now into a discussion of loops. And here's one of those places where when I describe to you what a loop does, it may be slightly conceptually different than what you've thought of before.

[00:00:45] So, a lot of people intuit that a loop does something, like if I say while a is greater than ten. A lot of people interpret this as saying, that it is while the thing is. I'm going to try to figure out how to say this, when the thing becomes false, stop doing it.

[00:01:14] Or another way of looking at it is, while the thing is true, keep doing it. And those two conceptual As, that's two different sides of the same coin, the end result is the same. But the way you think about it can actually be different, depending on the different loop forms that you try.

[00:01:31] So, there's a loop form called the for loop. And this is a highly compressed loop, and I'm gonna show you the version, it's a highly compressed syntax form. I'm gonna show you the three parts to how the for loop works. But then I'm going to show you conceptually how the for loop works.

[00:01:49] So this for loop, I can have a thing like a = 5. That first clause, this first expression, is what we call the initialization expression. The second clause in a four loop, is what we call the conditional expression, or the test expression. So a<10, every time I run the loop I'm gonna do that conditional.

[00:02:21] And if that conditional is still true, I'm gonna keep going, and if it's no longer true, I'm gonna stop. The third and final clause in a four loop declaration, is what we call the update clause. So I say [COUGH] I can say something like a = a + 1, which is to say increment it by 1 each time.

[00:02:47] A lot of people shorten a = a + 1 to this short hand operator the ++ operator. It's gonna accomplish the same goal here, it's gonna update a or it's gonna increment a by 1 each time. I'll leave it in the more verbose form, just so we don't lose track.

[00:03:05] So, if I make that for loop, let's think about what it's gonna do. It's gonna start a at the value 5, and each time the loop finishes, it's gonna update a by 1. And if a is still less than 10, it's gonna do the loop again, and again, and again.

[00:03:24]
>> Kyle Simpson: So if the statement inside of here was a console.log statement, try that, try putting that into your browser, into your console.
>> Kyle Simpson: You'll notice that I printed up the value 5, the value 6, the value 7, the value 8 and the value 9, but I didn't print out the value 10.

[00:03:53] And the reason I didn't is that when a got to 10, that is, after this loop iteration, I updated the a value by adding 1 to it. And when I did that, a became 10, is 10 less than 10? Clearly no, so that's when we stopped the loop.

[00:04:18]
>> Kyle Simpson: Try to let that set in for a moment. Essentially, we were waiting for something to tell us when to stop the loop, and the thing that told us when to stop the loop, is when A got too big.
>> Speaker 2: You said that a equals a plus 1 is the like the update.

[00:04:37]
>> Kyle Simpson: It's called the update clause, mm-hm.
>> Speaker 2: Okay, what are the other two called?
>> Kyle Simpson: The first one is called the initialization clause. The second one is called the test clause or the conditional clause, and the third one is called the update clause. In for loops, all three of clause are optional, that is you can have all three.

[00:05:01] Or any combination of two of them, or just one of them, or none of them. In other words, you could write although it would be silly, you could write four and then put a block on it. And leave those clauses out, you wouldn't do any initialization. You wouldn't do any testing and you wouldn't do any updating, but it'd still run.

[00:05:30] In this case, this is a loop that's gonna run forever, why is it gonna run forever?
>> Kyle Simpson: This is the major conceptual observation I wanna make out of this section. Why would this-
>> Speaker 3: Because the condition will never be met.
>> Kyle Simpson: It's because a conditional would never fail.

[00:05:47] That's why, okay? So this loop is not running because a conditional always stays true. It's running forever, because there's never a conditional that fails. Let me say that again, this loop would run forever, but it doesn't run forever, because a conditional is always true. For example, if my test was the value true.

[00:06:13] This one's gonna run forever because the condition's always, always, always, true.
>> Kyle Simpson: This one, there is no condition.
>> Kyle Simpson: And it's still gonna run forever, so why does it run forever? Conceptually the reason it runs forever is cuz there's no conditional that fails that tells it to stop running.

[00:06:36] This is different than how almost all developers that I come across, think about what a loop really means. So what I want to illustrate is that this loop compared to this loop, the difference is that we filled in a clause here that can fail. It doesn't have to fail.

[00:06:57] What would happen if I said a = 6? With this loop run forever?
>> Speaker 4: Yes.
>> Kyle Simpson: Of course. It would run forever because the first time we would run it, we would set it to six, and we'd print out six. And then we'd add one to it, and then we would say, is seven less than ten?

[00:07:22] Of course it is, so we'd run the loop again which sets a back to six, and we'd print six again. Update it to seven, seven's less than ten. And we'd just keep going forever and ever, so this loop would run forever. Because there's no way for this to ever fail.

[00:07:36]
>> Kyle Simpson: We're forcibly making it so that thing can't fail, so that loop that I've written there. If we're trying to think about the conceptual of what a loop means, I think it's more appropriate not to say, a loop runs while something is true. I think it's more appropriate to say, a loop runs until something is false, until something stops it from running.

[00:07:59] Its natural state is to go forever until something tells it, stop going. And the way I could write that is with a while loop.
>> Kyle Simpson: A while true loop, would that loop run forever?
>> Kyle Simpson: Unless something stopped it, that loop would run forever right? There are ways to stop a loop, which we're gonna show here in a moment.

[00:08:23] But let's conceptually think about how to make this loop that's on top, using only a while loop. So we need an initialization clause, so we could do that at the beginning. We could say a = 5. Then we need a test clause to let us know when to stop.

[00:08:43] So one way of writing that test clause, is to invert the A less than 10. I can say if negation of A less than 10, which looks really weird and complicated. So I could say, if a > 10, actually a negation is > or = to 10. Does everybody see why that is my condition, that would let me know it's time to stop?

[00:09:18]
>> Kyle Simpson: So how do I stop a loop? The break statement.
>> Kyle Simpson: So I'm gonna test to see whether or not I should stop the loop. And if I do wanna stop the loop, I call break, which stops it immediately. If I don't wanna stop the loop, what do I do next?

[00:09:41] Let's take out that a = 6 part, because we don't want that there. What do we do next? We console.log,
>> Kyle Simpson: a. And what's the very last thing that we do?
>> Kyle Simpson: a = a + 1, we do the update clause.
>> Kyle Simpson: This conceptually is how a for loop actually works, and it's actually how all loops work.

[00:10:14] They run until something tells them to stop running, now, I am not endorsing writing your loops like that. That loop is more complicated to understand, if you already understand how loops work. The only thing that I'm doing here, is to illustrate to you the concept that a loop runs, until something stops it from running.

[00:10:38] There's lots of ways to make a loop stop running. You can throw an error, you can break, you can call continue to an outside label. There's lots of ways to stop a loop from running, but however you stop a loop from running, that's the same thing as the test failing.

[00:11:00]
>> Speaker 3: Can a person put a semicolon on the end of the incremental?
>> Kyle Simpson: You're not supposed to.
>> Speaker 3: Okay.
>> Kyle Simpson: It's not allowed. [COUGH] So, once you learn the concept of what it looks like on lines 5 through 12. Now writing the for loop in a more compact fashion is much more attractive.

[00:11:23] I think the reason, the thing that I'm trying to get across here, is that a lot of people skip to writing these loops with for loop syntax, without understanding how it actually works. And then you run into off by one errors, and all kinds of other things like that.

[00:11:36] So I think it's better to start by thinking about the concepts as expressed here. Because they illustrate what to do with the for loop. What do we do first? We say a = 5. What do we do next? We start running, and we're going to keep going forever, so that's the wild truth.

[00:11:54] What do we do next? We check to see if this is false, which is another way of inverting it. We can say a greater-than-or-equal to 10. If it's false, we stop, we don't do the loop. It it's true, we keep going. We do the loop body, and finally after the loop is successfully process through, then we update.