- The for Loop 4:52
- Create a for Loop 1 objective
- Dynamically Display HTML with a Loop 6:52
- Exit a Loop
- Terminate a Loop 1 objective
- The Refactor Challenge 3:00
- The Refactor Challenge – One Solution 3:05
- The Refactor Challenge – Duplicate Code 6:01
- Review for Loops and Exiting Loops 6 questions
- Refactor Code with a Loop 1 objective
Preview
Video Player
00:00
00:00
The for Loop
4:52The `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.
[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