In this video, we are going to talk about another way of Looping, called the While loop. So first, we'll look at a For loop. You've seen this before, we have our initialization, our condition, and our iteration. And so, if I Copy this, jump over to my browser and pop it in, this is what we get. Looping, over this variable, just incrementing it each time, and we're stopping when we get to ten. So a While loop can be used to write exactly the same thing in a little bit different way.
Here's how it works, first I set up my initial variable, again it's I, and now here's the actual While loop. So its the word while with the parenthesis and inside that While loop is the condition under which it will stop and that's it. Then in the curly braces, is what to do each time the loop happens. So what we're doing in this While loop is just writing to the console the current counter. And then saying that this will go until we hit ten. And then we increment the counter variable.
So, if I copy this and paste it over into my browser, you can see we get exactly the same thing. So, this might beg the question, why would we use a While loop when we could use a For loop, or vice versa. So, the primary reason you might use a While loop, other than just maybe you like to write things in a certain way. Is when you don't know how many times you're going to need to loop over something. You don't have a paticular object over which you're going to iterate a certain number of times. You don't have a particular counter where you know the endpoint. So, here's an example of that, I'm going to select all this, and Paste in a new block of code.
So, here I have an array. It's called My array and it's just full of booleans. Now, of course, you know, I just made this so I know what's in it. But there will be many, many times as I've said before, in your programs where you won't necessarily know at any particular time during a program's execution, what the contents of a given variable might be. So, let's pretend that I don't know what's in this thing. I have on My Item variable here, and here's my While loop. So my condition is as long as My Item is not false, do stuff. And that stuff is, first, I'm logging into the console, the state of my array, how long it is.
And then it will loop until we pop out a false value. And so here is where we pop out the value. So, remember, we're starting out with my item beingno, just nothing. And then we check this condition, is it not equal to false? The first time we go, because it's no, it is. So, we write this line out and then we pop off an item from the end of my array. And then the next time we go through, my item will be whatever this last item was. So, the next time we'll be checking is true equal to false, it is not.
So, this condition is satisfied and we'll loop again. Do the same thing, and we'll keep knocking off items until we find the one we want and then we'll stop. So, if we did this with a For loop, based on how long the array is, we'd still get the false value. But we'd go until we exhausted the whole thing. That's why we might use a While loop. So let's take this block of code, Copy it, switch over to the browser, and run it. So when we start out, my array has six items, one, two, three, four, five, six, and the loop will go until we pop a false.
So, we then pop an item off and check it again. The first time we do that, my item is true. And so my array ends up with five items because we've popped one off. Then we pop another one, loop again, that's also true. So at that point, we're going to enter the loop one more time, say how many items are in the array, and then pop off one more. And at that point we get our false, so when we come back here the loop breaks. So this is really good to deal with situations where you don't know the contents of whatever the thing is that you're going to loop over. And you have a known condition where you're sure you'll be able to break at some point. Here's the danger with While loops, really with any loop, but I think it's a particular danger with While loops, is that it's easy to create what is called an infinite loop.
That is, one that never breaks. Here's a really contrived example of an infinite loop. Clear this, and now I'll Paste in my loop. So I've got a counter variable. And now I have While, true. So the While loop will continue to execute as long as the expression in the parenthesis, evaluates to true. If I just put true in there, it's going to just keep going, until I explicitly tell it to stop. Now as it happens, there is a way you can tell a While loop or indeed any loop, or any block, to stop, and that is by using Break.
So the Break statement which we've seen in switch before is used to break out of any block. So right now if I do this, I have counter set to one, while true. We're logging the counter to the console, then incrementing it, and then we're breaking. So this will stop after only one cycle through, here we go. If I were to take this break statement out, this loop is going to go nuts, and just keep going and keep going, forever. Just printing out numbers until it can't print out any numbers anymore. Odds are, you're going to run out of memory, or maybe your browser will say, hey, your script is running away, would you like to abort it. Generally speaking, that's what you'll see.
But thankfully with modern computers we don't have to worry so much about infinite loops taking down the entire system. Back in the old days we use to have to worry about that, a single crash could wipe out your whole machine. These days the worst that you could expect to happen is it wiping out your browser. But its still something you want to watch out for because its certainly a pain to debug. Okay there's one more formulation of the While loop that I'd like to show you. Let me switch back over to Sublime text and grab this code again. Switch back. Paste it in, okay.
Let's say that this variable that I'm using in my condition actually starts out in the value of the condition. So, if it starts out as false, and I'm actually looking for false in my While loop, and then I execute this code, nothing happens. This condition is already satisfied, so the block inside is never executed. If this is something that you don't want. If you want to make sure that the block inside is executed at least once no matter what the condition is, you need to use, instead of a regular While loop, a Do-while loop. So how does that work? Let's get this code back. And now what I need to do is get rid of this while and the condition, and replace it with the word do.
And now I can stick my while and my condition here after the final curly brace, and add my semicolon. Now, regardless of the initial state of this variable, this code will get executed, at least once, and in this case the item will get popped off of my array. And then and only then will the condition be checked and at that point this condition will be satisfied and the loop will go as normal. So let's see how that works, there we go. So if there's a situation when you're writing a While loop and you want to make sure that everything in the curly braces is executed at least once.
- Enabling Firebug and web inspectors
- Using a text editor
- Declaring and assigning a variable
- Booleans and the quest for truth
- Working with objects and arrays
- Using operators and control structures
- Iterating with loops
- Objects, references, and functions
- Understanding variable scope
Skill Level Beginner
Q: In "How to enable Firebug and web inspectors," at the Chrome Canary part, the author mentions going to the View menu, and then Developer. My Canary has no menu bar. The author uses a Mac, whereas I have Windows. How do I get to the same place?
A: Click the menu button at the top right of Chrome, select More Tools, and then choose Developer Tools.