What do you want to learn?
Skip to main content
by Susan Simkins
Start CourseBookmarkAdd to Channel
Table of contents
Introduction and Project Overview
Introduction and Project Overview
In this lesson we'll learn about loops or another form of control flow. In our last lesson we talked about another form of control flow or switch statements, but now I want to take a look at a different kind of control flow and what's called a loop. And these are some of the most useful pieces of codes. They are incredibly common and they're very very helpful and allow us to do some really neat things. So let's go ahead and take a look at these. And what a loop does is it actually loops through a block of code until an original condition is no longer true. And just like with anything it's hard to understand without seeing it, so let's go ahead and take a look. So I'm going to go ahead and hover over this little button here so we can kind of preview this syntax. And what this is doing is we have another keyword just like with a lot of our common types of syntax. And this one uses four and then we have three things we need to specify in parenthesis. And you can see they're separated by semicolons. So we have three little pieces here. And those three pieces are an initial expression. So we're going to initialize our loop here by telling it where we want to start. So we're going to start with a value. In this case, we have 0, and then in our second piece we're going to specify the conditions. So our code is going to run while this condition is always true. So we're starting at 0 and while i, our variable is < 11, it's going to continue to run everything inside of this block. A block being anything inside of curly brackets, that's referred to as a block of code. And then our final piece here for our loop is an update to the initial value, because if we don't have this eventually evaluate to false then we're going to create what's called an infinite loop, and we'll take a look at that in just a couple minutes. And then of course, we put any code we want to run in our loop inside of that block. So let's go ahead and create our own and we're going to create just a very common kind of loop that's going to loop through and print a range of numbers. So we want to use that for keyword. So I'm going to say for, and then we need our parenthesis. I'll go ahead and press a space here so we have a little bit of room. And we want to initialize our loop, which you saw here it says, i = 0. This is what's going to create what's called a global variable, which we'll learn about in our next volume. But for now just know that you might see this syntax, but we want to use the var keyword because this is creating a variable essentially. So we're going to say var i = 0. So we'll start our loop at 0. And then let's say we want to print the numbers 1-10, we're going to say while i, lowercase i, is < 11, which you might think 10, but we'll take a look at this in just a second to see why we need to do 11, while i is < 11, we're going to increment i. This little ++ is a shortcut here. i ++ just means we're going to add 1 to that value. So we're going to say, i ++, so just a little new piece of handy syntax there. And then we'll add our block inside here. So while this is happening let's log what i is to the console so we can see what it's actually doing to all these little values here in our initial code. So we're going to say console.log, oops I forgot my period, console.log, which is going to print it to our Console down here so we don't have to push alert every time, that can get kind of old. So add our semicolon and let's go ahead and run this and take a look and see what is happening. So I'm going to go ahead and pull up our Console here and clear all this reflow stuff, which is happening every time we have a change on our page. You can see we get some information. So we're going to clear that, and now let's go ahead and Run our loop. So you can see we have 0-10 printing to our Console. So what this is doing is it's starting at 0, and then it's going to log 0 to our Console. And then after through once then it's going to come in here and now it's going to add 1. So it's going to check here. It's going to say, is it still < 11? If so increment it and log it to the Console. So we get 1, then it takes 1 and does exactly the same thing. So it has the effect of counting all of these numbers out. So you can see if we have said, i is < 10, which is kind of a common mistake here, it's going to end at 9. Or if you want to say < or =, you can say <=. So whenever operators here, our logical operators, and if we Run this we get the exact same thing. So it's just whatever is easiest for you. You can say < 11 or < or = 10. Whatever seems most logical for you since you're the one writing your code. So what happens if we don't have a condition that makes our loop fall? So let's go ahead and take a look and see what happens if we were to have this run forever, because if it's never false it's just going to continue running. So I'm going to say, for var i = 0, while i is >= 0. Let's increment i. So since it's starting at 0 it's always going to be > or = since it's just going keep incrementing it. So if we Run this you can see we have nothing happening. And now we get our little --- our little time guy, hourglass, and you can see that we have an Unresponsive script warning. So what we've done is we're creating an infinite loop and we're going to crash our browser when it runs out of memory. You can see we keep on, it's trying, it's really struggling to keep on running this. So we can just say, Stop script, and it will stop our script. So that's why we always want to make sure that when we're writing this we want to be really careful and check through this and make sure it will evaluate to false, because while it can be fun to crash our browser, we don't really want to do that. So, now that we've taken a look at for loops, in our next lesson we're going to get more practice using loops by revisiting FizzBuzz our exercise from Volume 1.
Additional Practice with Functions
Looping Over an Array
Plan Then Create
Volume 2 Assignment
Susan is a web design author for Pluralsight. Growing up, Susan was both a passionate artist as well as a computer tech aficionado. When she discovered the world of web development, she found that...
Released4 Dec 2014