Working with loops
Video: Working with loopsVery quickly we will find ourselves writing code that we want to have happen multiple times. Whether that's grabbing every paragraph in a page so we can change the background color of it, hiding everything in a menuing system, we will realize there's code we want repeated. Well, rather than write it out multiple times, I'd rather write it once and be able to say, "Repeat this five times," or "Repeat this 5,000 times," or "Just keep on repeating till I tell you otherwise," perhaps go through every single form field on the web page or process every link on a web page in some way, and this is what we do when we are creating loops.
Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
Working with loops
Very quickly we will find ourselves writing code that we want to have happen multiple times. Whether that's grabbing every paragraph in a page so we can change the background color of it, hiding everything in a menuing system, we will realize there's code we want repeated. Well, rather than write it out multiple times, I'd rather write it once and be able to say, "Repeat this five times," or "Repeat this 5,000 times," or "Just keep on repeating till I tell you otherwise," perhaps go through every single form field on the web page or process every link on a web page in some way, and this is what we do when we are creating loops.
You will also hear this referred to as iteration. The main issue with any loop is not when to loop--looping is easy--it's when to stop. If we need to loop 200 times, who is keeping track? If we need to loop until we are told to stop, where is the code to figure out how to stop? But let's first figure out the most basic kind of loop. Well, we've seen if statements before, and this is all I have here. If this condition is true in the parentheses, we will execute the code inside the curly braces.
Now if all I do here is replace the if with the word while, we have a loop. It could be a one line in this code block, there could be 100 lines in this code block; whatever is in the block gets done every time the loop goes around. So we start to run this code. We will create a variable called a, set it equal to 1. We will come down to this while part. I will check the condition, which in this case is a < 10. Yes, that's true. I'll jump into the body of the block, execute any lines of code that are there.
We will hit the end. We will hit the closing brace, and that will jump as back up to the while statement again, where we will ask the same question, is a < 10? Well, yes it is. It's still 1, in which case we'll continue on processing. What we've done here is create a loop. We have actually created an infinite loop, which isn't all that pleasant. It's a bad thing. This would never end. a is always going to be less than 10 because we never change it. So a very common thing that we need to do in most loops is make sure that whatever we are doing to keep track of the loop is being incremented.
So this time I've got an a++ at the end of the body of the loop. So with the of the iteration in place, we will start to increment a every time we go around the loop, and we will keep on going. And at some point, what's going to happen is a will be incremented to 10. We will come back to the while. This will evaluate as false, and then what we'll just do is we will jump out of the loop. We will jump right to the end, and we will continue processing whatever code happens afterwards. Now there is a variant of the while loop called the do while loop.
What this does is keeps the same basic format, but we actually move the condition to the end. So instead of while a is less than 10 being at the start of the block, it's actually at the end of the block, and because of that, we actually need a semicolon at the end of the do while. Now the big difference with this is if you have a do while, the block will always be executed, at least once, even if we started off by setting the variable a equal to 100. And our condition here is asking while a is less than 10, we are going to execute the do block once before we even check the condition.
So it will happen at least once. To let you know, while loops are much more common than these do while loop, and the code I have written over the years I guess that I write at least 100 whiles for every do. In most loops it's expected to check the condition before entering the loop, and it's more readable that way too. Now in many loops a pattern emerges. If I look at a while loop here, I could have a lot of stuff going on in this loop, but I always have to have several pieces in place, regardless of what I am doing.
For a start, I need to have something that keeps track of where I am in the loop, so very typically, before we hit the while loop, we will create an index variable or a counter variable. In this case we will call it i--i is a very common name for an index. So we set up the index, or the counter. We then have to have a place that checks the condition, how do we know whether to keep going through the loop or not, and then in most cases we have to increment the index at the end. So regardless of what we're doing, we need these three pieces in place.
Set up the index, check the condition, increment the index, and this is so common that there is even a shorthand way of doing this, a thing that brings all these together, the for loop. With this, you actually bring those of three pieces together inside the parentheses. They are all there at the top. So regardless of what's in your loop, again it doesn't really matter. Whatever is between the braces will be executed, whether it's simple or complex, but the loop itself has three pieces.
We set up the index, so in this case var i=1. Then there is semicolon. Then we check the condition, i is less than 10, and then, even though it's right at the top, this is the incrementer. This happens at the end of every loop. Now we don't have to go up by 1. You could go up by 4 or 17 or 150 every time if you wanted. So this is very readable because everything about the loop is right there at the top. You don't have to look outside the loop for the index, nor scan inside the loop for the increment.
So the for loop is a very common way of doing this. Now, next up is a couple of words you'll occasionally run into, not as much as the whiles and the fors, but it's worthwhile knowing about them, a word called break. Break is a word that will jump us out of the loop. So let's say we start running our code and we hit this loop. We hit it for the first time through. We set up the index equal to 1. We run the check. Is that less than 5000? Yes, it is. We start to move through the code. We will hit this if segment, for example, and it will say is i=101? No, it isn't.
So we will skip past that code block and continue on, hit the end of the loop, go back up, check the condition again, yes, i is still less than 5000, continue on. Now, at some point what's going to happen is i will be 101. We will hit break. As soon as we hit break, we are basically manually saying we are done. We jump completely out of the loop, and we continue on, regardless of what the condition was at the top, regardless of where our counter was. If we say break, we are done with the loop.
And continue is along the same lines but not quite as drastic. Let's say in this loop, however I've got it set up, I've got some pieces of code. We are doing some stuff. We are checking some options. We are doing a second set of stuff. Well, as we move through the code, if I check this if statement and my counter divided by 5 leaves a remainder of 0, I'll hit that continue; but if it isn't, I will just jump straight ahead and keep going on the second part of the loop. Now at some point again we will jump back.
We will check it, we will start processing, but if ever at any point I actually hit the word continue, that doesn't mean jump out of the loop; it means jump back up and check the condition again. Don't continue any further with this iteration, just this one. We are not done with the entire loop, but we are done with this time around. So we jump right back up, check the condition again, and then start to process. So continue moves us back up to the top. Break moves us out beyond the bottom of the loop.
Now, you won't need continue or break in most loops, but you will see them from time to time, and you need to know what they mean.