Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,070 --> 00:00:01,903
All right.
2
2
00:00:01,903 --> 00:00:04,710
So we learned all about the for loop
3
3
00:00:04,710 --> 00:00:08,030
and even created a loop inside a loop,
4
4
00:00:08,030 --> 00:00:10,919
but there is another type of loop in JavaScript
5
5
00:00:10,919 --> 00:00:13,350
and that's the while loop.
6
6
00:00:13,350 --> 00:00:15,263
So let's explore that one now.
7
7
00:00:16,770 --> 00:00:19,790
And to understand how the while loop works
8
8
00:00:19,790 --> 00:00:23,220
and the difference between the for and the while loop,
9
9
00:00:23,220 --> 00:00:28,220
let's actually go back to our first for loop lecture
10
10
00:00:28,320 --> 00:00:32,503
and get back the code of this weightlifting exercise.
11
11
00:00:34,150 --> 00:00:38,640
So just copy this and we will keep it for comparison
12
12
00:00:38,640 --> 00:00:39,473
basically.
13
13
00:00:41,130 --> 00:00:45,340
So let's put it back to 10 here as well,
14
14
00:00:45,340 --> 00:00:50,190
and so let's now do the same thing with a while loop.
15
15
00:00:50,190 --> 00:00:53,210
So implementing the same with a while loop,
16
16
00:00:53,210 --> 00:00:55,840
we still need the same components.
17
17
00:00:55,840 --> 00:00:59,893
So we still need a counter so that we can then actually
18
18
00:00:59,893 --> 00:01:03,520
print the current value to the console,
19
19
00:01:03,520 --> 00:01:06,730
we still need a condition so that we know when to stop
20
20
00:01:06,730 --> 00:01:09,863
and we still need to increase the counter somehow.
21
21
00:01:10,810 --> 00:01:11,690
Now in the while loop,
22
22
00:01:11,690 --> 00:01:14,960
it works a bit differently because for the while loop,
23
23
00:01:14,960 --> 00:01:17,343
we can only specify a condition.
24
24
00:01:19,340 --> 00:01:22,850
So while, and then just a condition
25
25
00:01:22,850 --> 00:01:25,003
is the only thing that we can specify here.
26
26
00:01:26,480 --> 00:01:30,630
So that's gonna be exactly the same as this one.
27
27
00:01:30,630 --> 00:01:33,870
So we want to keep the loop running while repetitions
28
28
00:01:33,870 --> 00:01:35,760
is less or equal 10.
29
29
00:01:35,760 --> 00:01:40,190
And that's actually why this loop is called while.
30
30
00:01:40,190 --> 00:01:42,720
So again, it's called the while loop
31
31
00:01:42,720 --> 00:01:46,733
because it will run while this condition is true.
32
32
00:01:48,110 --> 00:01:48,943
Alright.
33
33
00:01:48,943 --> 00:01:51,640
But now we need to kind of manually,
34
34
00:01:51,640 --> 00:01:54,669
so more explicitly define the other two components
35
35
00:01:54,669 --> 00:01:56,640
of the for loop.
36
36
00:01:56,640 --> 00:02:01,640
So the repetitions and the increasing of the counter.
37
37
00:02:02,538 --> 00:02:05,633
And so we need to do that basically outside.
38
38
00:02:06,670 --> 00:02:11,587
So we start at the beginning with rep equal one,
39
39
00:02:12,600 --> 00:02:14,320
then we have the condition,
40
40
00:02:14,320 --> 00:02:17,170
then let's put the code that we want to execute
41
41
00:02:18,350 --> 00:02:20,580
and then at the end of the iteration,
42
42
00:02:20,580 --> 00:02:23,040
we will then increase the counter.
43
43
00:02:23,040 --> 00:02:24,870
And so let's just do that.
44
44
00:02:24,870 --> 00:02:27,588
So at the end of the iteration is basically the end
45
45
00:02:27,588 --> 00:02:31,603
of this code block, and so let's do that there,
46
46
00:02:33,780 --> 00:02:35,290
and that's it.
47
47
00:02:35,290 --> 00:02:38,960
And so now we should get the exact same result twice,
48
48
00:02:38,960 --> 00:02:41,220
once coming from this for loop
49
49
00:02:41,220 --> 00:02:43,623
and once coming from this while loop.
50
50
00:02:46,160 --> 00:02:50,670
And yeah, so 1 to 10, and then again, 1 to 10
51
51
00:02:51,680 --> 00:02:55,373
coming from the while loop, just write that here,
52
52
00:02:58,610 --> 00:03:00,950
just to make 100% sure.
53
53
00:03:00,950 --> 00:03:02,033
Yeah.
54
54
00:03:02,033 --> 00:03:03,020
And indeed the second set here
55
55
00:03:03,020 --> 00:03:05,870
is coming from the while loop.
56
56
00:03:05,870 --> 00:03:08,770
So this all means that the while loop
57
57
00:03:08,770 --> 00:03:11,770
is more versatile than the for loop,
58
58
00:03:11,770 --> 00:03:13,510
which means that it can be used
59
59
00:03:13,510 --> 00:03:17,240
in a larger variety of situations.
60
60
00:03:17,240 --> 00:03:21,210
And that's because it does not really need a counter.
61
61
00:03:21,210 --> 00:03:23,740
So you put the counter here because we need it
62
62
00:03:23,740 --> 00:03:25,710
for this specific use case.
63
63
00:03:25,710 --> 00:03:29,190
But all the while loop really needs is the condition
64
64
00:03:29,190 --> 00:03:32,900
which needs to stay true for it to keep running.
65
65
00:03:32,900 --> 00:03:35,630
And that condition can be any condition,
66
66
00:03:35,630 --> 00:03:38,950
it doesn't have to be related to any counter at all.
67
67
00:03:38,950 --> 00:03:41,570
And sometimes that's exactly what we need
68
68
00:03:41,570 --> 00:03:43,470
to solve a certain problem.
69
69
00:03:43,470 --> 00:03:45,670
So a problem without any counter,
70
70
00:03:45,670 --> 00:03:49,020
so without a number that is increasing.
71
71
00:03:49,020 --> 00:03:52,623
And so let's create such an example here.
72
72
00:03:53,900 --> 00:03:57,400
So I will start by taking off this for loop,
73
73
00:03:57,400 --> 00:03:59,680
we no longer need that one
74
74
00:03:59,680 --> 00:04:02,170
and now we will do a simple example
75
75
00:04:02,170 --> 00:04:05,100
that does not depend on a counter,
76
76
00:04:05,100 --> 00:04:10,023
but instead it will depend on a random variable, okay.
77
77
00:04:10,023 --> 00:04:14,180
So what we're gonna do is to basically roll a dice
78
78
00:04:14,180 --> 00:04:18,140
and then keep rolling the dice until we roll a six.
79
79
00:04:18,140 --> 00:04:21,240
And then when we roll a six, we stop.
80
80
00:04:21,240 --> 00:04:24,850
So essentially we will want to keep running the loop
81
81
00:04:24,850 --> 00:04:28,730
while the rolled dice is different from six.
82
82
00:04:28,730 --> 00:04:30,390
And so in this case,
83
83
00:04:30,390 --> 00:04:32,830
we do actually not know beforehand
84
84
00:04:32,830 --> 00:04:35,620
how many times the loop should run.
85
85
00:04:35,620 --> 00:04:38,330
And so we don't need a counter variable
86
86
00:04:38,330 --> 00:04:42,450
and that's exactly the use case of a while loop.
87
87
00:04:42,450 --> 00:04:45,600
So let's start by creating that random number.
88
88
00:04:45,600 --> 00:04:50,290
And so the roll of a dice is a number between one and six,
89
89
00:04:50,290 --> 00:04:52,400
the way that we implement this
90
90
00:04:52,400 --> 00:04:55,670
does not matter at this point, okay.
91
91
00:04:55,670 --> 00:04:59,830
We will learn more about random numbers at a later point,
92
92
00:04:59,830 --> 00:05:00,720
and so for now,
93
93
00:05:00,720 --> 00:05:04,573
just basically just type what I am writing here.
94
94
00:05:05,780 --> 00:05:08,253
So we're using Math.random,
95
95
00:05:09,430 --> 00:05:12,870
and this will create a number between zero and one,
96
96
00:05:12,870 --> 00:05:16,380
then we multiply that by a six,
97
97
00:05:16,380 --> 00:05:18,393
but this is gonna be a decimal number.
98
98
00:05:19,340 --> 00:05:21,250
Let me just show it out to you quickly,
99
99
00:05:21,250 --> 00:05:25,083
because I think this is still interesting for you.
100
100
00:05:28,300 --> 00:05:30,800
So you see that it's a decimal number,
101
101
00:05:30,800 --> 00:05:35,510
and so now we need to get rid of this decimal part.
102
102
00:05:35,510 --> 00:05:39,543
And so that we do using Math.trunc,
103
103
00:05:42,860 --> 00:05:46,320
and so this will give us a number between zero and five
104
104
00:05:46,320 --> 00:05:50,060
and then we add one and get one to six.
105
105
00:05:50,060 --> 00:05:52,850
So again, don't worry about the implementation of this
106
106
00:05:52,850 --> 00:05:57,580
at this point, we will do this again later.
107
107
00:05:57,580 --> 00:06:00,890
But what matters here is that as we reload the page,
108
108
00:06:00,890 --> 00:06:04,520
we get a random number here that is different every time.
109
109
00:06:04,520 --> 00:06:08,070
And so it will be different for you of course,
110
110
00:06:08,070 --> 00:06:10,270
so different from what you see in the video
111
111
00:06:10,270 --> 00:06:13,010
as you keep reloading your own page.
112
112
00:06:13,010 --> 00:06:13,843
Okay.
113
113
00:06:13,843 --> 00:06:16,893
And so now let's do what I explained earlier.
114
114
00:06:18,250 --> 00:06:20,890
So again, we want to keep running the loop
115
115
00:06:20,890 --> 00:06:22,900
until we roll a six.
116
116
00:06:22,900 --> 00:06:27,900
So until this dice variable here holds the value of six.
117
117
00:06:28,230 --> 00:06:32,883
And so the condition of the loop is now gonna be,
118
118
00:06:34,010 --> 00:06:38,423
dice different from six.
119
119
00:06:39,340 --> 00:06:42,843
And as soon as the value is six, it will stop.
120
120
00:06:44,860 --> 00:06:48,623
And let's lock the value to the console here.
121
121
00:06:49,840 --> 00:06:54,077
So, 'You rolled a $ dice',
122
122
00:06:55,300 --> 00:06:58,500
and so that's get rid of this one here
123
123
00:06:58,500 --> 00:07:00,730
and now let's log it to the console,
124
124
00:07:00,730 --> 00:07:03,500
but keep in mind that actually right now
125
125
00:07:03,500 --> 00:07:06,700
we are only creating one dice value.
126
126
00:07:06,700 --> 00:07:10,060
So at this point a loop doesn't make a lot of sense,
127
127
00:07:10,060 --> 00:07:12,810
and so actually let's keep working on this
128
128
00:07:12,810 --> 00:07:13,953
before we test it.
129
129
00:07:14,820 --> 00:07:18,600
So again, we are only creating one random number
130
130
00:07:18,600 --> 00:07:21,590
between one and six here, right?
131
131
00:07:21,590 --> 00:07:26,100
And if that's different than six, this loop here will run.
132
132
00:07:26,100 --> 00:07:29,011
But right now the loop would then run forever,
133
133
00:07:29,011 --> 00:07:31,440
which I'm not going to show you here now
134
134
00:07:31,440 --> 00:07:33,770
because that would crash the browser.
135
135
00:07:33,770 --> 00:07:36,350
So this would be called an infinite loop
136
136
00:07:36,350 --> 00:07:38,360
and we don't want that.
137
137
00:07:38,360 --> 00:07:42,900
So what we will do is to keep creating new dice values.
138
138
00:07:42,900 --> 00:07:46,040
And so we are gonna reassign this value
139
139
00:07:46,040 --> 00:07:48,640
at the end of each iteration.
140
140
00:07:48,640 --> 00:07:51,903
And so now we're ready to test the result here.
141
141
00:07:53,850 --> 00:07:58,170
Whoa, you see we got a lot of dice rolls here.
142
142
00:07:58,170 --> 00:08:03,113
Let me actually also comment out just this console.log here,
143
143
00:08:07,550 --> 00:08:11,590
and so of course your result will be different from mine,
144
144
00:08:11,590 --> 00:08:14,690
because we are using different random numbers.
145
145
00:08:14,690 --> 00:08:17,920
But anyway, let's analyze what happened here.
146
146
00:08:17,920 --> 00:08:20,510
So we start with some random dice number
147
147
00:08:20,510 --> 00:08:25,030
and then here we check if that dice is different from six.
148
148
00:08:25,030 --> 00:08:27,290
And apparently it was different,
149
149
00:08:27,290 --> 00:08:30,250
and so then we entered the loop, which then logged,
150
150
00:08:30,250 --> 00:08:32,310
'You rolled a 2'.
151
151
00:08:32,310 --> 00:08:35,620
So my random number was first a two.
152
152
00:08:35,620 --> 00:08:39,250
Then in the next line we created a new random number
153
153
00:08:39,250 --> 00:08:41,150
and then the loop run again.
154
154
00:08:41,150 --> 00:08:43,770
So again, this condition was tested.
155
155
00:08:43,770 --> 00:08:48,280
So is the dice different from six, and apparently it was,
156
156
00:08:48,280 --> 00:08:50,520
and so we entered the loop again.
157
157
00:08:50,520 --> 00:08:53,890
And so it printed, 'You rolled a 1'.
158
158
00:08:53,890 --> 00:08:56,010
And then the next dice was a five,
159
159
00:08:56,010 --> 00:08:58,560
and then the next one was a four.
160
160
00:08:58,560 --> 00:09:00,293
But then apparently the next dice
161
161
00:09:00,293 --> 00:09:02,873
that was rolled here was a six.
162
162
00:09:03,710 --> 00:09:06,630
So at the end of this iteration here,
163
163
00:09:06,630 --> 00:09:09,500
this dice value was a six.
164
164
00:09:09,500 --> 00:09:11,720
And so then in the next iteration,
165
165
00:09:11,720 --> 00:09:14,940
dice was actually equal six.
166
166
00:09:14,940 --> 00:09:17,590
And so then the condition is no longer true
167
167
00:09:17,590 --> 00:09:19,023
and the loop stopped.
168
168
00:09:20,010 --> 00:09:24,100
And let me actually write one more line of code here
169
169
00:09:24,100 --> 00:09:29,100
in which we can say, if dice is 6 then log,
170
170
00:09:32,970 --> 00:09:35,760
'Loop is about to end'.
171
171
00:09:36,600 --> 00:09:39,780
And so this way we can know when a six happened,
172
172
00:09:39,780 --> 00:09:42,710
and so the very first thing that should ever happen here
173
173
00:09:42,710 --> 00:09:46,260
in this output is this, right?
174
174
00:09:46,260 --> 00:09:48,790
Because then when the dice was six,
175
175
00:09:48,790 --> 00:09:50,883
the next iteration will no longer run.
176
176
00:09:52,260 --> 00:09:57,260
So let's do that, and indeed, so we get one, five, for, one,
177
177
00:09:57,770 --> 00:10:01,400
but no six and then, 'Loop is about to end',
178
178
00:10:01,400 --> 00:10:05,560
and so the dice was six, and so this condition was true,
179
179
00:10:05,560 --> 00:10:08,400
and so we saw this log to the console
180
180
00:10:08,400 --> 00:10:13,030
and then in the next iteration, again six equals six
181
181
00:10:13,030 --> 00:10:14,653
and so the loop finished.
182
182
00:10:15,750 --> 00:10:20,750
Let's try some more times, and of course it works.
183
183
00:10:20,860 --> 00:10:24,490
Oh, and now we got a situation where the first dice ever
184
184
00:10:24,490 --> 00:10:28,180
was a six, and so the loop never even started.
185
185
00:10:28,180 --> 00:10:31,540
And this was the situation I was waiting for here.
186
186
00:10:31,540 --> 00:10:35,140
So when dice is six right away in the beginning,
187
187
00:10:35,140 --> 00:10:39,430
then of course this loop will have exactly zero iterations,
188
188
00:10:39,430 --> 00:10:42,140
it will never start, okay.
189
189
00:10:42,140 --> 00:10:45,450
And so the conclusion of this is that the while loop
190
190
00:10:45,450 --> 00:10:49,980
does really not have to depend on any counter variable.
191
191
00:10:49,980 --> 00:10:53,690
So whenever you do need a loop without a counter,
192
192
00:10:53,690 --> 00:10:56,080
you can reach for the while loop.
193
193
00:10:56,080 --> 00:10:59,510
So basically that happens whenever you do not know
194
194
00:10:59,510 --> 00:11:03,280
beforehand how many iterations the loop will have.
195
195
00:11:03,280 --> 00:11:05,310
So in that situation the while loop
196
196
00:11:05,310 --> 00:11:07,650
is the right tool for the job.
197
197
00:11:07,650 --> 00:11:09,453
And that's exactly what we had here.
198
198
00:11:10,310 --> 00:11:12,860
So we had no way of knowing how many times
199
199
00:11:12,860 --> 00:11:16,730
we would roll a dice that's different from six.
200
200
00:11:16,730 --> 00:11:17,960
Now, on the other hand,
201
201
00:11:17,960 --> 00:11:21,120
when we do know how many times the loop will run,
202
202
00:11:21,120 --> 00:11:24,310
that means that we're gonna actually need a counter.
203
203
00:11:24,310 --> 00:11:27,130
For example, when we want to loop over an array,
204
204
00:11:27,130 --> 00:11:30,520
we already know how many elements that array has,
205
205
00:11:30,520 --> 00:11:33,700
and so we know how many iterations we will need.
206
206
00:11:33,700 --> 00:11:36,933
And therefore the for loop is usually the right choice
207
207
00:11:36,933 --> 00:11:38,924
to loop over an array.
208
208
00:11:38,924 --> 00:11:40,390
All right.
209
209
00:11:40,390 --> 00:11:41,223
And with this,
210
210
00:11:41,223 --> 00:11:44,140 line:15%
we kind of finished the JavaScript fundamentals.
211
211
00:11:44,140 --> 00:11:47,100
All there's left to do now is for you to complete
212
212
00:11:47,100 --> 00:11:50,163
the final coding challenge of this section.
18694
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.