Check out a free preview of the full Introduction to JavaScript course
The "Loops" Lesson is part of the full, Introduction to JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Brian demonstrates how to implement a 'while' loop.
Transcript from the "Loops" Lesson
[00:00:00]
>> Brian Holt: Next thing we're going to do is, we're going to make, we're going to get into talking about loops. So let's say, I want to, I have this variable called let friendsAtYourParty, and initially, since no one has showed up to your party, that number's going to be zero.
[00:00:23]
>> Brian Holt: But over time, your friends start showing up, so you are gonna say friendsAtYourParty equals friendsAtYourParty plus one.
>> Brian Holt: So this might be a little bit confusing, defining friends in your party in terms of itself. But you can think of it this way, that it is taking the previous value of friendsAtYourParty, adding 1 to it, and reassigning friendsAtYourParty to be that, right?
[00:00:50]
So in this particular case, friendsAtYourParty was zero, okay? So this is, you can think of it as 0+1. And now friendsAtYourParty, I just set console.log(friendsAtYourParty), and refresh here, it's gonna be 1, right. That make sense? Cuz you’re taking friendsAtYourParty, 0, plus 1 and you are reassigning that to friendsAtYourParty.
[00:01:16]
So in other words, the right side of the equal signs happens first.
>> Brian Holt: So, it does the math here, and it takes whatever that result of that is, and assigns that to friendsAtYourParty.
>> Brian Holt: Okay? What happens if I copy and paste this and do it again?
>> Brian Holt: Now what's friendsAtYourParty gonna be?
[00:01:40]
>> Speaker 2: Be two?
>> Brian Holt: It's going to be two. You can see there. What happens if we do this and I do it a bunch of times?
>> Speaker 2: Adding one every time.
>> Brian Holt: This is great programming, right here. You should program exactly like this.
>> Brian Holt: Five, six, seven, eight, nine, let's go for around ten, okay.
[00:02:07]
So,
>> Brian Holt: this is obviously great idea and I'm the best programmer ever.
>> Brian Holt: Wouldn't it be better if there was an easier way to do this?
>> Brian Holt: There is, okay? [LAUGH]
>> Group: [LAUGH]
>> Brian Holt: Spoiler alert. There is. So let's show you a way to do that. So I'm gonna show you what's called a loop.
[00:02:37]
So I'm gonna say while friendsAtYourParty is less than 10, this works exactly like an if statement, right? So instead of having if here, I'm going to say while, and basically say like keep executing what is ever between these curly braces until this becomes true. So while this is false, do this over and over and over again until it's true.
[00:03:07]
>> Brian Holt: So I'm gonna say friendsAtYourParty equal friendsAtYourParty+1. Console.log, friendsAtYourParty, I already had that.
>> Brian Holt: So what I had before and what I have now, functionally, it works exactly the same. So those 10 lines of adding one to friendsAtYourParty, functionally, this works exactly the same way. In fact, if we say this and refresh it, you can see here, it's still 10.
[00:03:42]
So, while this is false, it's going to keep doing that. And eventually, friendsAtYourParty is going to be greater than 10. And then, it's not going to execute again.
>> Brian Holt: To kind of drive that home, I'm just gonna put a console log in here, of friendsAtYourParty. What's this going to do?
[00:04:06]
>> Speaker 4: Keep stating each number until is done.
>> Brian Holt: That's exactly right. So it starts at zero, right? It makes sense. Then it's going to do its first iteration. Which is why we get zero, it's going to run this line and it's gonna go back up here and ask the question again.
[00:04:26]
Hey, is friends at your party, is one less than ten? Or is one greater than ten? It's gonna say no, it's not, cool, I'm gonna run it again. Runs it again, logs it out here, so you get one here, adds one to friends at your party plus one.
[00:04:41]
>> Brian Holt: Okay, comes back up here, and says, hey, is 2 greater than 10? Nope, and so it keeps doing that over and over and over again. And it's gonna say, is 10 less than 10? And it's not, right? Because 10 is equal to 10, right? And at that point, it says cool, I'm done with this loop, knocks you out of it, and you continue on your merry way.
[00:05:06]
So this is the first of a couple different kinds of loops I'm going to show you how to do.
>> Brian Holt: I mean, these are hard concepts, right, they're a bit mind-bending that you're thinking about re-executing the same lines of code. But think about, how many times do you think line four gets executed?
[00:05:23]
It gets executed 10 times, right. And that's because it's going through this wild loop until it eventually breaks out of it. Now, for fun, let's crash the browser, because that's always fun to do. Let's just say that I forgot to put the plus one here. Do not do this, because it's going to crash my browser.
[00:05:43]
Okay, so if I say here, while friendsAtYourParty equals friendsAtYourParty, so it's just going to keep reassigning itself. When will this ever be true? It will never be true, so I'm going to refresh my browser. Can you see how many times this is executing?
>> Brian Holt: It's just going to keep going.
[00:06:05]
So this, as you might imagine, is called an infinite loop. It's never gonna stop. I'm gonna have to kill the tab.
>> Brian Holt: This is why Apple's on one Infinite Loop, right? That's the joke there. Okay.
>> Speaker 5: What happens if it gets up to that maximum integer, nine quadrillion, does that have anything to do with?
[00:06:30]
>> Brian Holt: Eventually Firefox is going to say, something's up here, and it's gonna it's going to give you like the sick tab, like, this tab is not being responsive. I don't know what the heuristic is to decide when that is, but at some point it says, you're probably pretty bad at programming.
[00:06:45]
[LAUGH]
>> Brian Holt: So let's kill that tab.
>> Brian Holt: Gosh, gotta change it first, or it's gonna do it again. Good job, Brian.
>> Brian Holt: So if you ever see your computer just like lock up like that and become like pretty much totally unresponsive, it's a pretty good culprit that you might have done an infinite loop.
[00:07:25]
>> Brian Holt: In fact, I'm going to show you on CodePen how to mitigate that, because someone's going to do it. Okay, so, now everything looks good. Don't do infinite loops. It's bad.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops