1
00:00:02,050 --> 00:00:04,200
Now, to explore those loops,

2
00:00:04,200 --> 00:00:09,200
I'll add a new file loops.js in our project here

3
00:00:09,480 --> 00:00:11,690
and replace demo.js

4
00:00:11,690 --> 00:00:16,400
with loops.js in index.html.

5
00:00:16,400 --> 00:00:18,970
So, again, we can execute some code here,

6
00:00:18,970 --> 00:00:21,420
and then see the result in the console

7
00:00:21,420 --> 00:00:24,950
or on the screen, depending on what we need.

8
00:00:24,950 --> 00:00:29,340
Now, I'll start with the console and the regular for loop.

9
00:00:29,340 --> 00:00:32,923
So not for-off or for-in, but just the for loop.

10
00:00:33,840 --> 00:00:36,810
You write this loop like that.

11
00:00:36,810 --> 00:00:41,690
You start with the for keyword, then parentheses,

12
00:00:41,690 --> 00:00:45,080
and we'll put some code that determines how long the loop

13
00:00:45,080 --> 00:00:47,570
will run into those parentheses.

14
00:00:47,570 --> 00:00:49,510
And then curly braces.

15
00:00:49,510 --> 00:00:51,610
And between those curly braces,

16
00:00:51,610 --> 00:00:55,370
just as we had it with the if statement and functions,

17
00:00:55,370 --> 00:00:59,400
we put the code that, in this case, should be executed,

18
00:00:59,400 --> 00:01:01,623
as long as the loop is running.

19
00:01:03,030 --> 00:01:04,510
Now, here, between those brackets,

20
00:01:04,510 --> 00:01:07,440
we have to write some code that defines

21
00:01:07,440 --> 00:01:10,040
how long that loop is running.

22
00:01:10,040 --> 00:01:15,040
And, with a for loop, the execution of that loop code

23
00:01:15,130 --> 00:01:17,530
depends on some variable.

24
00:01:17,530 --> 00:01:20,540
Some helper variable, you could say,

25
00:01:20,540 --> 00:01:22,923
that is defined for this loop.

26
00:01:23,830 --> 00:01:26,860
For that, we write let, and that's important,

27
00:01:26,860 --> 00:01:29,780
it must be let not const here,

28
00:01:29,780 --> 00:01:32,370
let i, typically.

29
00:01:32,370 --> 00:01:34,620
i stands for iteration.

30
00:01:34,620 --> 00:01:35,650
The name is up to you,

31
00:01:35,650 --> 00:01:38,280
and it can also be longer than one character,

32
00:01:38,280 --> 00:01:40,810
but i is a very common variable name

33
00:01:40,810 --> 00:01:44,320
for this for loop variable.

34
00:01:44,320 --> 00:01:48,080
And then, after let i, you add a semicolon.

35
00:01:48,080 --> 00:01:50,700
However, you can and typically do assign

36
00:01:50,700 --> 00:01:54,640
an initial value here, and that very often is zero,

37
00:01:54,640 --> 00:01:56,383
but it can be anything.

38
00:01:57,630 --> 00:01:59,970
Then, after the semicolon,

39
00:01:59,970 --> 00:02:02,470
still between those parentheses,

40
00:02:02,470 --> 00:02:05,800
you write your looping condition.

41
00:02:05,800 --> 00:02:08,820
So some condition that defines how long

42
00:02:08,820 --> 00:02:11,470
that loop should keep on running.

43
00:02:11,470 --> 00:02:14,210
And that could be that you want to keep looping

44
00:02:14,210 --> 00:02:17,083
as long as i is smaller than 10.

45
00:02:18,210 --> 00:02:19,960
So here, in this comparison,

46
00:02:19,960 --> 00:02:23,110
you'd typically use this helper variable

47
00:02:23,110 --> 00:02:25,690
which you defined as a first step.

48
00:02:25,690 --> 00:02:28,020
Now, we add another semicolon,

49
00:02:28,020 --> 00:02:31,910
and now we define how i should change

50
00:02:31,910 --> 00:02:34,260
in every loop iteration.

51
00:02:34,260 --> 00:02:36,220
And very often here

52
00:02:36,220 --> 00:02:38,930
we will increment it by one.

53
00:02:38,930 --> 00:02:41,360
So we will add one to it.

54
00:02:41,360 --> 00:02:44,420
And, in JavaScript, there is a shortcut for this,

55
00:02:44,420 --> 00:02:47,230
which you can also use outside of loops,

56
00:02:47,230 --> 00:02:49,997
and that's i++.

57
00:02:49,997 --> 00:02:54,180
++ is a special operator which is equal to

58
00:02:55,570 --> 00:02:57,120
this:

59
00:02:57,120 --> 00:03:01,830
So it's equal to reassigning i to a new value

60
00:03:01,830 --> 00:03:04,793
where i is the old value plus one.

61
00:03:05,650 --> 00:03:09,810
That will add one to i and store this back into i,

62
00:03:09,810 --> 00:03:14,193
and this is simply a shortcut notation for it.

63
00:03:15,050 --> 00:03:18,360
You also have a similar shorthand for decrementing i

64
00:03:18,360 --> 00:03:22,370
with i-- that would be the same as writing

65
00:03:22,370 --> 00:03:25,180
i = i - 1.

66
00:03:25,180 --> 00:03:27,430
But again, here, we need to i + 1,

67
00:03:27,430 --> 00:03:30,423
and therefore, again, I will use this ++ shortcut.

68
00:03:31,590 --> 00:03:35,628
With that, i will be incremented by one

69
00:03:35,628 --> 00:03:37,810
after every loop iteration.

70
00:03:37,810 --> 00:03:40,810
And that's important, after the iteration.

71
00:03:40,810 --> 00:03:44,120
So after the execution of this loop code,

72
00:03:44,120 --> 00:03:47,430
and this loop code will be re-executed

73
00:03:47,430 --> 00:03:50,170
as long as i is smaller than 10.

74
00:03:50,170 --> 00:03:51,280
So, with this code,

75
00:03:51,280 --> 00:03:55,280
we would write a for loop that executes 10 times.

76
00:03:55,280 --> 00:03:56,950
Because we start at zero,

77
00:03:56,950 --> 00:03:59,420
add one to it after every execution,

78
00:03:59,420 --> 00:04:03,810
and keep on executing as long as it's smaller than 10

79
00:04:03,810 --> 00:04:07,053
Not smaller or equal, but just smaller.

80
00:04:08,330 --> 00:04:11,070
However, you can, of course, tweak this however you want.

81
00:04:11,070 --> 00:04:14,540
You could also make this smaller or equal,

82
00:04:14,540 --> 00:04:17,089
or maybe change i

83
00:04:17,089 --> 00:04:21,350
such that it's actually i + 2 in every iteration.

84
00:04:21,350 --> 00:04:24,020
In that case, of course, you would loop less times

85
00:04:24,020 --> 00:04:27,730
because you add more to i after every iteration.

86
00:04:27,730 --> 00:04:30,020
But here I'll stick to i one one,

87
00:04:30,020 --> 00:04:32,930
and I will console.log i here

88
00:04:32,930 --> 00:04:36,000
so that we see how i, this helper variable,

89
00:04:36,000 --> 00:04:39,223
changes during all those iterations.

90
00:04:40,180 --> 00:04:42,390
As a side note, i is a variable,

91
00:04:42,390 --> 00:04:46,180
which you can only use inside of this looping code.

92
00:04:46,180 --> 00:04:48,150
Not outside of it.

93
00:04:48,150 --> 00:04:51,950
If I would try to console.log i here,

94
00:04:51,950 --> 00:04:53,280
outside of this loop,

95
00:04:53,280 --> 00:04:55,603
you will see that it's not getting logged.

96
00:04:56,490 --> 00:04:57,360
But speaking of that,

97
00:04:57,360 --> 00:04:59,400
let's save everything and go back.

98
00:04:59,400 --> 00:05:02,880
And you'll see I get an uncaught reference error here.

99
00:05:02,880 --> 00:05:06,140
That's coming from me trying to log i down there,

100
00:05:06,140 --> 00:05:07,443
so I'll get rid of that.

101
00:05:08,320 --> 00:05:11,520
But if I save this again, we see that other than that,

102
00:05:11,520 --> 00:05:15,040
we have i from 0 to 9 being logged.

103
00:05:15,040 --> 00:05:19,813
So the loop executed 10 times, and i changed accordingly.

104
00:05:20,710 --> 00:05:23,480
We don't see i equal to 10 here

105
00:05:23,480 --> 00:05:25,360
because for i equal to 10,

106
00:05:25,360 --> 00:05:29,420
we don't make it into this loop with this condition.

107
00:05:29,420 --> 00:05:33,030
But, again, as mentioned, you could change this condition.

108
00:05:33,030 --> 00:05:36,410
So when could this kind of loop be helpful?

109
00:05:36,410 --> 00:05:39,900
It is helpful whenever you know that you have some code

110
00:05:39,900 --> 00:05:43,330
that should be executed a certain amount of times.

111
00:05:43,330 --> 00:05:45,960
For example, if you're building an online game

112
00:05:45,960 --> 00:05:50,260
in the browser where the user can roll two dices,

113
00:05:50,260 --> 00:05:52,530
and therefore you know that you wanna generate

114
00:05:52,530 --> 00:05:56,550
a random number between 1 and 6 two times,

115
00:05:56,550 --> 00:06:00,150
then you could write such a loop to execute

116
00:06:00,150 --> 00:06:04,300
this random number generation code two times.

117
00:06:04,300 --> 00:06:07,400
For the moment, I'll keep it at this example here though.

118
00:06:07,400 --> 00:06:10,140
And I'll move on to the next kind of loop which we have

119
00:06:10,140 --> 00:06:13,440
so that we see all these different loops here in theory

120
00:06:13,440 --> 00:06:17,260
and in action before we then see what we can do with them

121
00:06:17,260 --> 00:06:20,083
when it comes to more realistic examples.