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