Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,380 --> 00:00:04,370
When we talked about the if else statement,
2
00:00:04,370 --> 00:00:07,620
I mentioned that it's a control structure,
3
00:00:07,620 --> 00:00:12,380
and also that there are more control structures, right?
4
00:00:12,380 --> 00:00:16,500
Well, one of the other control structures are loop.
5
00:00:16,500 --> 00:00:19,460
And so loops are our final big topic
6
00:00:19,460 --> 00:00:21,883
in this JavaScript fundamentals section.
7
00:00:23,450 --> 00:00:26,520
So, loops are a fundamental aspect
8
00:00:26,520 --> 00:00:28,550
of every programming language,
9
00:00:28,550 --> 00:00:30,270
because they basically allow us
10
00:00:30,270 --> 00:00:33,070
to automate repetitive tasks.
11
00:00:33,070 --> 00:00:37,430
So, tasks that we have to perform over and over again.
12
00:00:37,430 --> 00:00:41,000
And here, I like to use the analogy of a gym.
13
00:00:41,000 --> 00:00:44,160
So when you go to a gym, you might, for example,
14
00:00:44,160 --> 00:00:46,320
lift weights, right?
15
00:00:46,320 --> 00:00:49,400
And let's say that you do 10 repetitions
16
00:00:49,400 --> 00:00:52,150
of a certain weight lifting exercise.
17
00:00:52,150 --> 00:00:55,893
So we could represent that, by doing something like this.
18
00:00:59,480 --> 00:01:04,480
So, lifting weights repetition one,
19
00:01:10,770 --> 00:01:14,943
and then, some more emojis here.
20
00:01:19,220 --> 00:01:21,683
Okay, so repetition one.
21
00:01:22,860 --> 00:01:25,740
And remember, we want 10 repetitions.
22
00:01:25,740 --> 00:01:30,740
So we would have to paste this code here 10 times,
23
00:01:30,900 --> 00:01:35,080
and I don't know, even if this are 10 times or not.
24
00:01:35,080 --> 00:01:39,240
But anyway, you can start to guess that this is probably
25
00:01:39,240 --> 00:01:42,790
not a best practice, just imagine
26
00:01:42,790 --> 00:01:46,700
that we had 30 repetitions instead of just 10.
27
00:01:46,700 --> 00:01:50,020
And then if we wanted to, for example, change some word
28
00:01:50,020 --> 00:01:52,900
here in the string, then we would have to change
29
00:01:52,900 --> 00:01:54,930
that in all of them.
30
00:01:54,930 --> 00:01:56,710
So, this really violates
31
00:01:56,710 --> 00:02:00,210
the don't repeat yourself principle, right?
32
00:02:00,210 --> 00:02:01,690
Because we're basically repeating
33
00:02:01,690 --> 00:02:05,010
the same code here 10 times, and all we're changing
34
00:02:05,010 --> 00:02:06,693
is just this number.
35
00:02:08,790 --> 00:02:12,420
So instead of doing all this, we can now create a loop,
36
00:02:12,420 --> 00:02:15,730
and then put one of these lines of code in there.
37
00:02:15,730 --> 00:02:19,040
And the loop will then run that code over and over again,
38
00:02:19,040 --> 00:02:21,430
until we tell it to stop.
39
00:02:21,430 --> 00:02:25,150
And so let's implement a so called for loop now.
40
00:02:25,150 --> 00:02:27,840
And that's a loop, which has a counter.
41
00:02:27,840 --> 00:02:30,520
So, let's do that.
42
00:02:30,520 --> 00:02:34,260
And we simply write for and open parenthesis.
43
00:02:34,260 --> 00:02:36,980
So a little bit like the if statement.
44
00:02:36,980 --> 00:02:38,860
And this is a for statement.
45
00:02:38,860 --> 00:02:41,070
And so it looks similar.
46
00:02:41,070 --> 00:02:43,940
Now, the loop statement has three parts.
47
00:02:43,940 --> 00:02:48,030
The first part is the initial value of a counter.
48
00:02:48,030 --> 00:02:50,990
And in the case of this current example, the counter is
49
00:02:50,990 --> 00:02:54,140
the value that will start here at number one,
50
00:02:54,140 --> 00:02:57,110
and go all the way to number 10.
51
00:02:57,110 --> 00:03:01,170
So let's call this counter rep, which stands for repetition.
52
00:03:01,170 --> 00:03:05,623
And so here, we literally create a variable called rep.
53
00:03:07,420 --> 00:03:10,950
And we started at one, because well,
54
00:03:10,950 --> 00:03:12,773
that's our first repetition.
55
00:03:13,620 --> 00:03:16,890
Okay, and here, we need to use a let variable because
56
00:03:16,890 --> 00:03:20,253
this counter will later be updated by the for loop.
57
00:03:21,860 --> 00:03:25,120
So that's the first part of the for statement,
58
00:03:25,120 --> 00:03:28,750
then we use semicolon and go to the second part.
59
00:03:28,750 --> 00:03:31,300
And the second part, is a logical condition
60
00:03:31,300 --> 00:03:35,410
that is evaluated before each iteration of the loop.
61
00:03:35,410 --> 00:03:40,070
So before each time, that the code in the loop is executed.
62
00:03:40,070 --> 00:03:42,610
So let me just write it here first,
63
00:03:42,610 --> 00:03:45,510
and then this will make more sense.
64
00:03:45,510 --> 00:03:49,670
So our condition will be rep needs to stay below
65
00:03:49,670 --> 00:03:51,943
or equal 10.
66
00:03:52,780 --> 00:03:56,260
So again, this condition that we just described here,
67
00:03:56,260 --> 00:03:59,840
will be evaluated before each iteration of the loop.
68
00:03:59,840 --> 00:04:02,020
Now, if the condition is true,
69
00:04:02,020 --> 00:04:04,700
then the next loop iteration will run.
70
00:04:04,700 --> 00:04:08,810
But as soon as this condition is false, then the loop stops.
71
00:04:08,810 --> 00:04:12,070
And so no more code will then be executed.
72
00:04:12,070 --> 00:04:14,530
So basically, the loop will keep running
73
00:04:14,530 --> 00:04:17,220
while this condition stays true.
74
00:04:17,220 --> 00:04:19,320
And this is really important to realize.
75
00:04:19,320 --> 00:04:22,480
And let me actually write that down here for you.
76
00:04:22,480 --> 00:04:27,480
So for loop keeps running, while condition is true.
77
00:04:33,010 --> 00:04:35,180
So this is the kind of notes that I hope
78
00:04:35,180 --> 00:04:37,410
that you are taking throughout the course.
79
00:04:37,410 --> 00:04:38,750
But this one is really important
80
00:04:38,750 --> 00:04:41,410
and so, I wanted to write it down.
81
00:04:41,410 --> 00:04:45,300
Okay, and so now, I hope it makes sense that we have
82
00:04:45,300 --> 00:04:48,570
this condition, because in each iteration of the loop,
83
00:04:48,570 --> 00:04:51,090
the rep counter will get increased.
84
00:04:51,090 --> 00:04:53,950
And so at a certain point it will reach 10.
85
00:04:53,950 --> 00:04:56,390
And with 10 just condition is still true.
86
00:04:56,390 --> 00:04:59,560
So 10 is still less or equal than 10.
87
00:04:59,560 --> 00:05:02,380
But then, after that it will be 11.
88
00:05:02,380 --> 00:05:06,560
And so then repetition is no longer, less or equal 11.
89
00:05:06,560 --> 00:05:08,450
And then the loop will stop.
90
00:05:08,450 --> 00:05:10,690
And at that point, we will have printed
91
00:05:10,690 --> 00:05:13,343
these 10 strings, basically.
92
00:05:14,950 --> 00:05:17,500
So let's continue writing this so that in the end,
93
00:05:17,500 --> 00:05:19,730
we actually make that work.
94
00:05:19,730 --> 00:05:22,243
So, speaking of increasing the counter,
95
00:05:22,243 --> 00:05:25,900
that is actually the third part of the for statement.
96
00:05:25,900 --> 00:05:28,860
So, another semicolon here.
97
00:05:28,860 --> 00:05:30,660
And now here, we actually update
98
00:05:30,660 --> 00:05:33,170
the counter after each iteration.
99
00:05:33,170 --> 00:05:35,570
So that's necessary, because right now,
100
00:05:35,570 --> 00:05:39,000
the counter would just stay at one forever.
101
00:05:39,000 --> 00:05:42,400
And so this condition here would never be false.
102
00:05:42,400 --> 00:05:45,780
And so what we do here, is to now increase the counter
103
00:05:45,780 --> 00:05:48,290
by one after each iteration.
104
00:05:48,290 --> 00:05:53,290
So, we can say rep equal rep plus one.
105
00:05:55,120 --> 00:05:57,063
But does this look familiar to you.
106
00:05:58,650 --> 00:06:02,530
So, basically increasing the value by just one.
107
00:06:02,530 --> 00:06:04,300
Remember that in the last section,
108
00:06:04,300 --> 00:06:06,780
we actually learned about a special operator,
109
00:06:06,780 --> 00:06:10,250
which does just this, but in a much simpler way.
110
00:06:10,250 --> 00:06:14,120
So instead of writing rep equal rep plus one,
111
00:06:14,120 --> 00:06:18,660
we can simply write, rep plus plus.
112
00:06:18,660 --> 00:06:22,760
And so this will take the rep value, and increase it by one.
113
00:06:22,760 --> 00:06:26,510
Alright, and now all we have to do, is to write the code
114
00:06:26,510 --> 00:06:28,980
that we want to be repeated.
115
00:06:28,980 --> 00:06:31,663
And so let's copy this string here.
116
00:06:35,230 --> 00:06:38,990
Okay, and let's say one, and then it will print
117
00:06:38,990 --> 00:06:41,330
this string 10 times.
118
00:06:41,330 --> 00:06:42,540
So let's start with that.
119
00:06:42,540 --> 00:06:44,650
And then afterwards, I will show you
120
00:06:44,650 --> 00:06:47,950
how we can actually update this number here.
121
00:06:47,950 --> 00:06:50,710
But for now, let's try this out.
122
00:06:50,710 --> 00:06:53,350
And actually let's comment this code out,
123
00:06:53,350 --> 00:06:55,250
so that it doesn't get in our way.
124
00:06:55,250 --> 00:06:57,653
So, comment slash for that.
125
00:06:59,580 --> 00:07:00,913
And let's go.
126
00:07:02,300 --> 00:07:07,300
And indeed, we see that the string was printed 10 times,
127
00:07:07,800 --> 00:07:10,360
that's what this 10 here stands for.
128
00:07:10,360 --> 00:07:14,010
So the dev tools will not print the same string 10 times,
129
00:07:14,010 --> 00:07:16,620
it will simply put this 10 here.
130
00:07:16,620 --> 00:07:20,523
But what matters, is that this logic here actually worked.
131
00:07:21,990 --> 00:07:25,490
So now, let's actually use this counter variable
132
00:07:25,490 --> 00:07:28,810
that we created here, to actually increase the number
133
00:07:28,810 --> 00:07:30,883
in the string that we're printing out.
134
00:07:31,810 --> 00:07:34,160
So, how do you think we will do that?
135
00:07:34,160 --> 00:07:37,610
Well, it's actually simple, all we have to do is to replace
136
00:07:37,610 --> 00:07:41,810
this number here, with the current value of the counter,
137
00:07:41,810 --> 00:07:44,380
because this variable that we defined here,
138
00:07:44,380 --> 00:07:47,950
so this rep variable, it's just a normal variable.
139
00:07:47,950 --> 00:07:51,193
And it's gonna be available here inside of this code block.
140
00:07:53,090 --> 00:07:56,010
So, let's transform this to a template string,
141
00:07:56,010 --> 00:07:59,663
so that we can then insert that variable, into the string.
142
00:08:02,200 --> 00:08:05,070
So, we get rid of the hard coded value.
143
00:08:05,070 --> 00:08:08,373
And now we basically dynamically built the string.
144
00:08:09,230 --> 00:08:14,230
And so here, all we need to do is to put the rep variable.
145
00:08:14,320 --> 00:08:19,320
And now we get exactly what we wrote here manually
146
00:08:19,910 --> 00:08:22,720
in the beginning, alright?
147
00:08:22,720 --> 00:08:24,200
So that works.
148
00:08:24,200 --> 00:08:27,723
And so let's recap exactly what we did here.
149
00:08:28,950 --> 00:08:32,060
So, we wanted to look our string here.
150
00:08:32,060 --> 00:08:35,500
So a string like this 10 times, but of course,
151
00:08:35,500 --> 00:08:38,590
it could be any other repetitive operation.
152
00:08:38,590 --> 00:08:41,300
Again, we're just using console dot log here,
153
00:08:41,300 --> 00:08:45,280
so that we can see the result in the developer console.
154
00:08:45,280 --> 00:08:47,690
Anyway, in order to solve this problem
155
00:08:47,690 --> 00:08:51,530
of not having to repeat the same code over and over again,
156
00:08:51,530 --> 00:08:53,580
we use a for loop.
157
00:08:53,580 --> 00:08:58,040
And so, we initialized the counter of the loop at one.
158
00:08:58,040 --> 00:09:01,490
So right here, we created this new rep variable.
159
00:09:01,490 --> 00:09:04,960
And rep again, stands for repetition, but it could be any
160
00:09:04,960 --> 00:09:07,350
other variable name, of course.
161
00:09:07,350 --> 00:09:11,050
And so we started at one, because well we wanted to start
162
00:09:11,050 --> 00:09:12,760
at repetition number one.
163
00:09:12,760 --> 00:09:16,223
But, we could also start of course, at repetition five.
164
00:09:17,500 --> 00:09:20,090
So let's see how that looks like.
165
00:09:20,090 --> 00:09:23,820
And then, as you might have expected, the first repetition
166
00:09:23,820 --> 00:09:27,000
that's printed is the number five, okay.
167
00:09:27,000 --> 00:09:29,710
But let's put it back to one now.
168
00:09:29,710 --> 00:09:33,610
So after each iteration of the loop, we then increase
169
00:09:33,610 --> 00:09:37,690
this counter value, by exactly one, and this happens
170
00:09:37,690 --> 00:09:40,090
by the end of the iteration.
171
00:09:40,090 --> 00:09:44,020
So in the first iteration, this string here is locked to
172
00:09:44,020 --> 00:09:46,700
the console with the current repetition,
173
00:09:46,700 --> 00:09:50,670
which stands at one, so this here will be replaced by one
174
00:09:50,670 --> 00:09:55,160
and then afterwards, the rep counter will be updated to two.
175
00:09:55,160 --> 00:09:57,950
Then in the next iteration, this same string here
176
00:09:57,950 --> 00:10:01,063
is printed, but now with rep at number two,
177
00:10:01,980 --> 00:10:05,700
then rep is updated from two to three, and so on
178
00:10:05,700 --> 00:10:06,960
and so forth.
179
00:10:06,960 --> 00:10:10,300
And this loops keep running, while the rep variable
180
00:10:10,300 --> 00:10:12,750
is less or equal 10.
181
00:10:12,750 --> 00:10:16,900
So basically, while this condition here is true, and that's
182
00:10:16,900 --> 00:10:20,070
how we achieve exactly 10 repetitions.
183
00:10:20,070 --> 00:10:24,960
So, what the loop does, is to verify before each repetition,
184
00:10:24,960 --> 00:10:29,330
if all condition here still holds true, and only if it does,
185
00:10:29,330 --> 00:10:30,940
it will keep running the loop.
186
00:10:30,940 --> 00:10:33,530
So it will execute the next iteration.
187
00:10:33,530 --> 00:10:36,150
And so it will execute this block of code here
188
00:10:36,150 --> 00:10:37,800
one more time.
189
00:10:37,800 --> 00:10:40,620
And of course we could change it to something else.
190
00:10:40,620 --> 00:10:42,700
Let's put it at 30.
191
00:10:42,700 --> 00:10:47,700
And then, we should get, indeed 30 repetitions
192
00:10:48,190 --> 00:10:53,190
of the same string, where only this counter here is changed.
193
00:10:53,340 --> 00:10:57,110
Alright, and in a nutshell, that's how the for loop
194
00:10:57,110 --> 00:10:59,040
works in JavaScript.
195
00:10:59,040 --> 00:11:02,190
In the next few videos, we will see some more useful
196
00:11:02,190 --> 00:11:04,710
applications of the for loop.
197
00:11:04,710 --> 00:11:06,983
And also talk about another type of loop
198
00:11:06,983 --> 00:11:08,993
that we have in JavaScript.
15267
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.