1
00:00:00,000 --> 00:00:06,607
[MUSIC]

2
00:00:06,607 --> 00:00:07,394
Hey there.

3
00:00:07,394 --> 00:00:11,590
Now we'll explore a third type of
loop in JavaScript called a for loop.

4
00:00:11,590 --> 00:00:15,200
At first, the for loop might look
a little bit trickier than the while and

5
00:00:15,200 --> 00:00:16,980
do while loops you learned earlier.

6
00:00:16,980 --> 00:00:19,930
But a for loop does the same thing,
just differently.

7
00:00:19,930 --> 00:00:24,883
Like the other loops you learned about,
for loops are frequently used for actions

8
00:00:24,883 --> 00:00:30,433
that need to run a particular number of
times, like 10, 20, 30, 100, or more.

9
00:00:30,433 --> 00:00:35,310
The for loop is a more compact variation
of the while loop with similar parts.

10
00:00:35,310 --> 00:00:39,463
And it's really useful when you know how
many times you want to repeat an action.

11
00:00:39,463 --> 00:00:42,920
So let's start by comparing
a while loop to a for loop.

12
00:00:42,920 --> 00:00:47,400
Say you have a while loop that outputs
the numbers 0 through 9 to the console.

13
00:00:47,400 --> 00:00:50,270
You start with a variable
named counter that's declared

14
00:00:50,270 --> 00:00:51,630
outside of the while statement.

15
00:00:52,760 --> 00:00:54,040
At the beginning of the loop,

16
00:00:54,040 --> 00:00:58,190
the JavaScript engine compares the value
in the counter variable to 10.

17
00:00:58,190 --> 00:01:02,540
If the value assigned to counter is < 10,
the loop runs.

18
00:01:02,540 --> 00:01:04,810
At the start, counter is set to 0.

19
00:01:04,810 --> 00:01:08,390
Yes, 0 is less than 10, so the loop runs.

20
00:01:08,390 --> 00:01:11,330
The loop outputs the current value
assigned to the counter variable to

21
00:01:11,330 --> 00:01:15,100
the console,
then increases the value of counter by 1.

22
00:01:15,100 --> 00:01:19,530
After going through the loop 10 times,
the counter value is set to 10.

23
00:01:19,530 --> 00:01:21,690
The condition is false, and the loop ends.

24
00:01:22,930 --> 00:01:27,230
Now let's look at the same looping
behavior written using a for loop.

25
00:01:27,230 --> 00:01:30,440
Notice that it's a little more compact,
three lines of code,

26
00:01:30,440 --> 00:01:32,940
as opposed to the five lines for
the while loop.

27
00:01:32,940 --> 00:01:36,200
That's one of the main reasons why for
loops are more often used.

28
00:01:37,990 --> 00:01:39,960
Okay, let's write a for loop.

29
00:01:39,960 --> 00:01:44,028
In your workspace, or project folder,
open the file for.js.

30
00:01:44,028 --> 00:01:52,590
And in index.html, update the script
tag source attribute to js/for.js.

31
00:01:52,590 --> 00:01:57,450
I'll keep the while.js file open, so I can
reference it while writing the for loop.

32
00:01:57,450 --> 00:02:01,710
I'll also copy the get random
number function from while.js,

33
00:02:01,710 --> 00:02:03,655
and paste it inside for.js.

34
00:02:05,440 --> 00:02:08,060
In this file, I'll start by typing the for

35
00:02:08,060 --> 00:02:12,710
keyword, followed by a pair of
parentheses, and a set of curly brackets.

36
00:02:14,230 --> 00:02:18,640
The first statement creates a loop
that consists of three expressions

37
00:02:18,640 --> 00:02:22,110
that go inside the parentheses,
which are separated by semicolons.

38
00:02:23,150 --> 00:02:27,050
First, there's the initial
declaration of the counter variable.

39
00:02:27,050 --> 00:02:30,210
It's equivalent to the same
code used in the while loop.

40
00:02:30,210 --> 00:02:32,430
Let counter = 0;.

41
00:02:32,430 --> 00:02:35,370
So I'll copy it from this file, and

42
00:02:35,370 --> 00:02:39,460
place it as the first expressions
inside the parentheses.

43
00:02:39,460 --> 00:02:43,660
This part of the loop is evaluated, or
runs only once before the loop begins.

44
00:02:45,200 --> 00:02:50,119
Next comes the condition, which matches
the same condition used in a while loop.

45
00:02:50,119 --> 00:02:52,801
In this case, counter < 10.

46
00:02:57,268 --> 00:03:00,939
The condition gets evaluated
before the loop runs each time,

47
00:03:00,939 --> 00:03:02,500
just like in a while loop.

48
00:03:03,940 --> 00:03:08,900
The last component of the for loop updates
the counter each time through the loop.

49
00:03:08,900 --> 00:03:10,710
That's this part of the while loop.

50
00:03:16,662 --> 00:03:20,526
And like a while loop,
this expression gets evaluated, and

51
00:03:20,526 --> 00:03:24,920
the counter is updated at
the end of each loop iteration.

52
00:03:24,920 --> 00:03:27,655
Earlier, you learned about
the increment operator,

53
00:03:27,655 --> 00:03:31,402
which is a shorthand operator you used
to increment a number value by 1, so

54
00:03:31,402 --> 00:03:33,735
you can make this even more compact,
like so.

55
00:03:36,625 --> 00:03:40,246
Finally, the code block
represents the loop itself,

56
00:03:40,246 --> 00:03:44,900
the code that runs each time
the condition evaluates to true.

57
00:03:44,900 --> 00:03:49,347
So inside the curly brackets,
I'll add the console.log statements.

58
00:03:55,194 --> 00:03:59,560
I'll save this file and
preview index.html in the browser.

59
00:03:59,560 --> 00:04:03,034
Open the console, and
there are my 10 random numbers.

60
00:04:06,702 --> 00:04:08,100
For loops are common.

61
00:04:08,100 --> 00:04:11,200
You'll see them just about
everywhere in JavaScript.

62
00:04:11,200 --> 00:04:13,390
To make them even easier to write,

63
00:04:13,390 --> 00:04:18,440
most programmers use a single letter to
represent the counter variable like this.

64
00:04:18,440 --> 00:04:25,450
"i is less than zero"

65
00:04:26,840 --> 00:04:29,170
Keep in mind that it's best
to use a variable name

66
00:04:29,170 --> 00:04:32,470
that's just a single letter with a for
loop only.

67
00:04:32,470 --> 00:04:34,780
Variable names should
usually be descriptive.

68
00:04:34,780 --> 00:04:38,280
But in the case where all the variable
does is act as a counter in a for

69
00:04:38,280 --> 00:04:39,500
loop, it's okay.

70
00:04:39,500 --> 00:04:44,810
In fact, the letters i and j are commonly
used for variable names inside of loops.

71
00:04:44,810 --> 00:04:47,920
While the structure of a for
loop may look a bit strange right now,

72
00:04:47,920 --> 00:04:50,280
after some practice,
you'll find that they're easier to write.