This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.

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

Loops are a way to execute a piece of code over and over again. A “for” statement is one way to create a loop. Nina walks through the complex syntax of a for statement and then applies it to iterating over an array.

Get Unlimited Access Now

Transcript from the "JavaScript For Statements" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Nina Zakharenko: In conjunction with the if statement there's a different kind of statement. It's called a for statement. And the anatomy of this one is kind of tricky. So, the counter, which is the first expression, is going to be a variable that keeps track of what step you're on.

[00:00:22] It's separated by a semicolon from a second expression which is the counting to and this is the goal. It's how many total steps we're going to take on the statement that's inside of this for loop. The increment counter is how we're going to change our variable, our counter, to get to the goal.

[00:00:45] So we're gonna keep incrementing a counter and keep running the expression inside of this for loop that many times until we reach our stop point.
>> Nina Zakharenko: So here's a simple example. We have this variable called text, it's a string. We have a for loop here, so we start at the number 0.

[00:01:16] We continue until our variable i goes over five. That's our stopping point. And then we increment our variable i over and over. And so if we run this piece of code, what it's doing Is a pending, a blank, a space, and the number i into this text variable.

[00:01:47] And then it's printing it out. When it prints it out we'll see that number 0, 1, 2, 3, 4 were added on. So, let's do a really simple example. So here's the anatomy of a for. We start with our variable. You might see this a lot. The variable called i is generally used for a counter in programming.

[00:02:17] We're going to go until i is less than or equal to seven. And the way that we change i to get to that point, is by adding one to it with each set. I'll just print out i.
>> Speaker 2: You need to increment i, not 7.
>> Nina Zakharenko: Yes, sorry.

[00:02:40] Nice catch.
>> Nina Zakharenko: So that'll print out the number 0 through 7. When you're writing for loops, be careful that this middle condition is something that can be met. For example, if I change this to i--, this loop would go on forever because there's no stopping point. And there really is no forever in computing, so it'd probably throw up at some point and give you a big error.

[00:03:21] So, make sure that that middle condition is something that's achievable and that your counter is going up or down or doing something that's gonna help you reach your goal. The fun part about for loops is we can use them to Iterate over an array so, by calling for exact length we know how many items we have in our array and we can use a counter and go up to the end of that list, and do something, stuff in it.

[00:03:48] It doesn't matter how long the array is because we're using a dynamic variable.
>> Nina Zakharenko: So let's do this exercise.
>> Nina Zakharenko: We got our fruits. We're iterating over them. We're outputting the value to this HTML page here. We're writing <br> which is HTML for a new line. And then, we're writing what the value of the fruit is at that position in the list.

[00:04:31] Okay. So, let's do an exercise. Let's add some items to that array at the top and run the code again. I'm sorry, let's add some items using fruit.push and then write a for loop down here. And we'll just write that code again. So fruits.push whatever you want to put in there.

[00:04:57] And let's do that a few times and see how that changes our for loop.
>> Speaker 3: Does push always just add one thing or can you add, do you have to like repeat the whole push command to get a second thing on there?
>> Nina Zakharenko: You can use append I believe to another list.

[00:05:42]
>> Speaker 3: List, okay.
>> Nina Zakharenko: So.
>> Speaker 2: It's concat, not append.
>> Nina Zakharenko: Concat. Thank you. The syntax for this is always slightly different in whatever programming language you use. So it's easy to mix things up. Okay so, let's put in an extra document dot right in here to see what's in our fruits.

[00:06:27]
>> Nina Zakharenko: So we got five things in it now, let's write a for loop.
>> Nina Zakharenko: So does anyone have questions about why we're using i in here? No.
>> Nina Zakharenko: So if we run this, we'll just get this list appended at the end of the one that we printed out here, because we didn't.

[00:07:16] What's that?
>> Speaker 3: What's happened to apricot?
>> Speaker 2: So just say fruits equals.
>> Nina Zakharenko: Good catch, there we go. Snuck out of there.
>> Nina Zakharenko: Right, and the reason we're doing this is because fruits.concat does not actually modify our fruits list. It returns a new list that contains both lists.

[00:07:53] So you have to remember to set it back to your original variable here.
>> Speaker 4: I couldn't hear that, what was that?
>> Nina Zakharenko: So fruits.concat does not actually modify the original fruits list that we had. So we have to remember to set it back here because fruits.concat returns a whole new array with the values of both lists combined.

[00:08:21]
>> Speaker 4: So the array is not immutable but if you use concat, it almost acts like it is?
>> Nina Zakharenko: Not really. So let me open up the console real quick. We have a list here of names.
>> Nina Zakharenko: We have a list. Call it animals. We got kitty. So if we do names.concat(animals) It'll return a new list with both things combined.

[00:09:04] But our original list is left intact. So we could say that names-
>> Speaker 4: There's no assignment in it then.
>> Nina Zakharenko: Right. If I did names = names.concat we'll see that names now contains both things. Is everyone done with the iterate over an array exercise? Did you guys all write your for loops?