Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The `for` loop is a more compact variation of the while loop, with similar parts, and it's useful when you know how many times you want to repeat an action.
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hey there.
0:06
Now we'll explore a third type of
loop in JavaScript called a for loop.
0:07
At first, the for loop might look
a little bit trickier than the while and
0:11
do while loops you learned earlier.
0:15
But a for loop does the same thing,
just differently.
0:16
Like the other loops you learned about,
for loops are frequently used for actions
0:19
that need to run a particular number of
times, like 10, 20, 30, 100, or more.
0:24
The for loop is a more compact variation
of the while loop with similar parts.
0:30
And it's really useful when you know how
many times you want to repeat an action.
0:35
So let's start by comparing
a while loop to a for loop.
0:39
Say you have a while loop that outputs
the numbers 0 through 9 to the console.
0:42
You start with a variable
named counter that's declared
0:47
outside of the while statement.
0:50
At the beginning of the loop,
0:52
the JavaScript engine compares the value
in the counter variable to 10.
0:54
If the value assigned to counter is < 10,
the loop runs.
0:58
At the start, counter is set to 0.
1:02
Yes, 0 is less than 10, so the loop runs.
1:04
The loop outputs the current value
assigned to the counter variable to
1:08
the console,
then increases the value of counter by 1.
1:11
After going through the loop 10 times,
the counter value is set to 10.
1:15
The condition is false, and the loop ends.
1:19
Now let's look at the same looping
behavior written using a for loop.
1:22
Notice that it's a little more compact,
three lines of code,
1:27
as opposed to the five lines for
the while loop.
1:30
That's one of the main reasons why for
loops are more often used.
1:32
Okay, let's write a for loop.
1:37
In your workspace, or project folder,
open the file for.js.
1:39
And in index.html, update the script
tag source attribute to js/for.js.
1:44
I'll keep the while.js file open, so I can
reference it while writing the for loop.
1:52
I'll also copy the get random
number function from while.js,
1:57
and paste it inside for.js.
2:01
In this file, I'll start by typing the for
2:05
keyword, followed by a pair of
parentheses, and a set of curly brackets.
2:08
The first statement creates a loop
that consists of three expressions
2:14
that go inside the parentheses,
which are separated by semicolons.
2:18
First, there's the initial
declaration of the counter variable.
2:23
It's equivalent to the same
code used in the while loop.
2:27
Let counter = 0;.
2:30
So I'll copy it from this file, and
2:32
place it as the first expressions
inside the parentheses.
2:35
This part of the loop is evaluated, or
runs only once before the loop begins.
2:39
Next comes the condition, which matches
the same condition used in a while loop.
2:45
In this case, counter < 10.
2:50
The condition gets evaluated
before the loop runs each time,
2:57
just like in a while loop.
3:00
The last component of the for loop updates
the counter each time through the loop.
3:03
That's this part of the while loop.
3:08
And like a while loop,
this expression gets evaluated, and
3:16
the counter is updated at
the end of each loop iteration.
3:20
Earlier, you learned about
the increment operator,
3:24
which is a shorthand operator you used
to increment a number value by 1, so
3:27
you can make this even more compact,
like so.
3:31
Finally, the code block
represents the loop itself,
3:36
the code that runs each time
the condition evaluates to true.
3:40
So inside the curly brackets,
I'll add the console.log statements.
3:44
I'll save this file and
preview index.html in the browser.
3:55
Open the console, and
there are my 10 random numbers.
3:59
For loops are common.
4:06
You'll see them just about
everywhere in JavaScript.
4:08
To make them even easier to write,
4:11
most programmers use a single letter to
represent the counter variable like this.
4:13
"i is less than zero"
4:18
Keep in mind that it's best
to use a variable name
4:26
that's just a single letter with a for
loop only.
4:29
Variable names should
usually be descriptive.
4:32
But in the case where all the variable
does is act as a counter in a for
4:34
loop, it's okay.
4:38
In fact, the letters i and j are commonly
used for variable names inside of loops.
4:39
While the structure of a for
loop may look a bit strange right now,
4:44
after some practice,
you'll find that they're easier to write.
4:47
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up