1 00:00:01,305 --> 00:00:02,140 In this lecture, 2 00:00:02,140 --> 00:00:04,920 we're gonna do two interesting things. 3 00:00:04,920 --> 00:00:08,210 First, we will loop over an array backwards, 4 00:00:08,210 --> 00:00:11,170 and then second we will also create a loop 5 00:00:11,170 --> 00:00:13,240 inside another loop. 6 00:00:13,240 --> 00:00:16,003 So, let's have some more fun with arrays now. 7 00:00:17,610 --> 00:00:20,883 And so, let's get back our array again here. 8 00:00:24,210 --> 00:00:26,560 So, the Jonas' array 9 00:00:26,560 --> 00:00:29,113 and let's forget about this element here. 10 00:00:30,010 --> 00:00:33,610 And so now, as I said, in the beginning of this video, 11 00:00:33,610 --> 00:00:36,730 let's not loop over this array backwards. 12 00:00:36,730 --> 00:00:40,280 So the first element that we want to print is this one, 13 00:00:40,280 --> 00:00:44,130 then this, this, this, and finally Jonas. 14 00:00:44,130 --> 00:00:47,880 So essentially, in the last lecture we looped 15 00:00:47,880 --> 00:00:48,780 from the beginning. 16 00:00:48,780 --> 00:00:51,110 So we started with index zero, 17 00:00:51,110 --> 00:00:56,110 then one all the way to four right? 18 00:00:56,220 --> 00:00:59,260 But now, we want to start at four 19 00:00:59,260 --> 00:01:03,520 then we want to go to three and all the way to zero, 20 00:01:03,520 --> 00:01:06,210 which gonna be the last index. 21 00:01:06,210 --> 00:01:09,350 So, this one is four and this one is zero. 22 00:01:09,350 --> 00:01:12,540 And so, now we need to create the four loop according 23 00:01:12,540 --> 00:01:14,510 to this new information. 24 00:01:14,510 --> 00:01:17,623 So, basically according to this new methodology. 25 00:01:20,500 --> 00:01:22,600 So, let's start again with the counter 26 00:01:23,520 --> 00:01:25,850 and then we'll name it i again, 27 00:01:25,850 --> 00:01:30,280 but now what should be the initial value of the counter? 28 00:01:30,280 --> 00:01:33,700 And we already replied to that question kind of, 29 00:01:33,700 --> 00:01:35,460 so it should be four 30 00:01:35,460 --> 00:01:38,540 but should we just write the four here? 31 00:01:38,540 --> 00:01:40,390 No, we shouldn't, right, 32 00:01:40,390 --> 00:01:43,110 because we already learned that hard coded values 33 00:01:43,110 --> 00:01:45,840 like this are not a good idea. 34 00:01:45,840 --> 00:01:47,640 So what is four? 35 00:01:47,640 --> 00:01:51,260 Well, four is basically just the length of the array, 36 00:01:51,260 --> 00:01:53,433 which is five minus one. 37 00:01:54,510 --> 00:01:57,323 So that's exactly what we will write here. 38 00:01:58,450 --> 00:02:03,450 Jonas.length -1, then the condition 39 00:02:03,730 --> 00:02:06,940 and when do we want the loop to stop? 40 00:02:06,940 --> 00:02:10,520 Well, it should stop after the zero. 41 00:02:10,520 --> 00:02:13,320 And so, the condition we need to write remember 42 00:02:13,320 --> 00:02:14,810 is telling JavaScript 43 00:02:14,810 --> 00:02:18,140 in which condition the loop should keep running. 44 00:02:18,140 --> 00:02:21,140 And so basically, the loop should keep running as long 45 00:02:21,140 --> 00:02:24,243 as the counter is still above zero. 46 00:02:25,750 --> 00:02:29,460 So I should be greater 47 00:02:29,460 --> 00:02:32,630 or equal actually zero. 48 00:02:32,630 --> 00:02:35,190 So, let's quickly simulate that. 49 00:02:35,190 --> 00:02:38,220 So, at number four which is in the beginning, 50 00:02:38,220 --> 00:02:41,560 I is greater equal zero, right? 51 00:02:41,560 --> 00:02:43,420 So, this condition will be true 52 00:02:43,420 --> 00:02:45,860 and so the next iteration will run, 53 00:02:45,860 --> 00:02:49,890 then we need to decrease the index or the counter. 54 00:02:49,890 --> 00:02:52,520 And so, let's actually do that as well. 55 00:02:52,520 --> 00:02:54,980 And so instead of using I plus plus, 56 00:02:54,980 --> 00:02:58,320 which we used before to increment the value 57 00:02:58,320 --> 00:03:01,570 we use minus minus to decrement 58 00:03:01,570 --> 00:03:04,580 or to decrease the value by one. 59 00:03:04,580 --> 00:03:06,640 And so now we move from four, 60 00:03:06,640 --> 00:03:11,540 to three and three of course still is greater equals zero, 61 00:03:11,540 --> 00:03:13,700 then all the way to zero. 62 00:03:13,700 --> 00:03:17,890 And so, zero is still greater equals zero. 63 00:03:17,890 --> 00:03:20,320 Then the counter gets updated again, 64 00:03:20,320 --> 00:03:22,930 and it will be updated to minus one. 65 00:03:22,930 --> 00:03:27,230 And now minus one is not greater or equal zero. 66 00:03:27,230 --> 00:03:32,230 So this is false and so the loop will stop, okay. 67 00:03:32,920 --> 00:03:35,730 So, I hope that this was not hard, 68 00:03:35,730 --> 00:03:38,120 really all we have to do is to think 69 00:03:38,120 --> 00:03:42,210 when we create these three parts here of the four loop 70 00:03:42,210 --> 00:03:46,360 and I hope that you could follow my train of thought here. 71 00:03:46,360 --> 00:03:48,930 Now, anyway the rest of course is gonna work 72 00:03:48,930 --> 00:03:50,313 just exactly the same. 73 00:03:54,500 --> 00:03:57,023 So, we're getting again, the current element. 74 00:03:58,120 --> 00:04:01,130 So, let's check that very quickly 75 00:04:01,130 --> 00:04:04,640 and yes, great job it works. 76 00:04:04,640 --> 00:04:06,940 And just to really show it, 77 00:04:06,940 --> 00:04:10,790 let's also look the counter variable itself. 78 00:04:10,790 --> 00:04:15,790 So first the i sort of counter and then the array value. 79 00:04:16,730 --> 00:04:19,910 And so, indeed this works just as we intend it 80 00:04:19,910 --> 00:04:24,280 we start with number four just as we have it here, 81 00:04:24,280 --> 00:04:28,200 and then we move to three, two, one, zero. 82 00:04:28,200 --> 00:04:30,230 And if we now edit one element 83 00:04:30,230 --> 00:04:35,030 then for sure this is gonna work just the same 84 00:04:35,030 --> 00:04:39,680 because now Jonah's length is six and minus one is five 85 00:04:39,680 --> 00:04:42,263 and so it will start here at true, 86 00:04:43,920 --> 00:04:45,763 and indeed it does. 87 00:04:47,470 --> 00:04:49,400 All right, now you will probably 88 00:04:49,400 --> 00:04:51,400 not be doing this all the time 89 00:04:51,400 --> 00:04:52,730 in your own code, 90 00:04:52,730 --> 00:04:55,180 but I thought that this was a nice exercise. 91 00:04:55,180 --> 00:04:59,120 So we could again think about how to define the counter, 92 00:04:59,120 --> 00:05:02,253 the condition and the counter update. 93 00:05:04,580 --> 00:05:08,340 Okay, so that was the first part of this lecture. 94 00:05:08,340 --> 00:05:11,460 And now, I want to show you how we can create a loop 95 00:05:11,460 --> 00:05:13,810 inside of a loop. 96 00:05:13,810 --> 00:05:16,210 So, does that sound crazy? 97 00:05:16,210 --> 00:05:18,310 Well, it's not so crazy 98 00:05:19,360 --> 00:05:22,010 and it's not so difficult either. 99 00:05:22,010 --> 00:05:23,780 And to do this, let's go back 100 00:05:23,780 --> 00:05:27,690 to our gym example from the first loop lecture. 101 00:05:27,690 --> 00:05:29,840 So there, we had 10 repetitions 102 00:05:29,840 --> 00:05:33,720 for a certain weightlifting exercise, remember? 103 00:05:33,720 --> 00:05:37,870 But now let's say that we have three different exercises 104 00:05:37,870 --> 00:05:41,400 and we want to repeat each of them five times. 105 00:05:41,400 --> 00:05:42,620 So that means a total 106 00:05:42,620 --> 00:05:47,620 of 15 repetitions five for each of the three exercises. 107 00:05:47,820 --> 00:05:50,140 So to lock all these exercises, 108 00:05:50,140 --> 00:05:53,820 we will need a loop inside a loop. 109 00:05:53,820 --> 00:05:57,970 So, let's roll up our sleeves and get to work here. 110 00:05:57,970 --> 00:06:00,903 And we're gonna start with the three exercises. 111 00:06:02,600 --> 00:06:04,720 So let's create a counter, 112 00:06:04,720 --> 00:06:06,823 and I will actually call it exercise. 113 00:06:08,270 --> 00:06:13,080 So exercise and we start at one now this time again 114 00:06:13,080 --> 00:06:18,080 because we simply want to log exercise one, two and three. 115 00:06:18,530 --> 00:06:23,450 So our condition here is that the exercise should be less 116 00:06:23,450 --> 00:06:25,940 or equal three. 117 00:06:25,940 --> 00:06:28,420 And actually this would be exactly the same 118 00:06:28,420 --> 00:06:31,513 as writing exercise below four. 119 00:06:32,360 --> 00:06:34,860 So you can do whatever you prefer most, 120 00:06:34,860 --> 00:06:38,103 and I think I will actually stick with this one this time. 121 00:06:40,460 --> 00:06:44,310 And then we need to increase the exercise 122 00:06:44,310 --> 00:06:46,743 after each iteration as always. 123 00:06:49,380 --> 00:06:51,640 So now, let's look to the console 124 00:06:51,640 --> 00:06:54,323 something like this starting exercise, 125 00:06:58,590 --> 00:07:02,210 and actually here we want to include the exercise number. 126 00:07:02,210 --> 00:07:05,563 So that's instead created template literal. 127 00:07:09,290 --> 00:07:11,813 And so, here we use that counter variable. 128 00:07:14,950 --> 00:07:16,663 So, let's just check this one. 129 00:07:17,970 --> 00:07:20,200 So we have three exercises 130 00:07:20,200 --> 00:07:23,360 but we don't have any repetitions yet in there. 131 00:07:23,360 --> 00:07:24,910 And so now again, 132 00:07:24,910 --> 00:07:27,540 we need to create a loop inside a loop, 133 00:07:27,540 --> 00:07:29,767 so that in each exercise we can have 134 00:07:29,767 --> 00:07:32,390 the five repetitions that we want 135 00:07:32,390 --> 00:07:36,380 and the repetitions themselves are a loop, right? 136 00:07:36,380 --> 00:07:38,660 And so that's why we now need that loop 137 00:07:38,660 --> 00:07:41,903 inside of this loop, so let's do that. 138 00:07:43,190 --> 00:07:45,320 And this is gonna be basically the same 139 00:07:45,320 --> 00:07:46,973 as we did earlier. 140 00:07:47,990 --> 00:07:51,670 So, let's again call it a rep, start at one 141 00:07:51,670 --> 00:07:52,993 and 10 the condition. 142 00:07:53,930 --> 00:07:55,840 So, remember how I said, 143 00:07:55,840 --> 00:07:58,930 that we want five repetitions this time. 144 00:07:58,930 --> 00:08:02,520 And so, let's say we want to stay below six. 145 00:08:02,520 --> 00:08:06,130 So again, that would be exactly the same as writing less 146 00:08:06,130 --> 00:08:11,130 or equal five, but let's keep it a bit different this time 147 00:08:11,530 --> 00:08:14,400 and say below six. 148 00:08:14,400 --> 00:08:17,103 And then rep plus plus, 149 00:08:22,650 --> 00:08:26,773 and now lifting weights repetition, 150 00:08:30,580 --> 00:08:34,113 and again I forgot to make this a template literal. 151 00:08:35,790 --> 00:08:40,680 So yes, 152 00:08:40,680 --> 00:08:43,240 this should work much better. 153 00:08:43,240 --> 00:08:46,750 And now, this cute emoji here again. 154 00:08:46,750 --> 00:08:47,763 Oh, where is it? 155 00:08:54,390 --> 00:08:55,913 And let's test this now. 156 00:08:56,790 --> 00:08:59,240 So, what do you expect to see 157 00:08:59,240 --> 00:09:03,320 think about that before you load your own result 158 00:09:03,320 --> 00:09:05,273 or before I load here, the result. 159 00:09:06,580 --> 00:09:10,960 So, is this what you expected? 160 00:09:10,960 --> 00:09:13,060 Lets even increase the Sierra a little bit 161 00:09:15,210 --> 00:09:17,700 and now we see the full picture. 162 00:09:17,700 --> 00:09:21,730 All right, so we start exercise number one, 163 00:09:21,730 --> 00:09:23,370 which is what we have here 164 00:09:23,370 --> 00:09:27,010 and then inside of this iteration of exercise one, 165 00:09:27,010 --> 00:09:30,210 a new loop is created and executed. 166 00:09:30,210 --> 00:09:32,710 And so that's what then creates 167 00:09:32,710 --> 00:09:37,060 this lifting weights repetition from one to five, 168 00:09:37,060 --> 00:09:41,350 all right, then this loop here is finished, right? 169 00:09:41,350 --> 00:09:43,240 So it run all the five time 170 00:09:43,240 --> 00:09:46,130 that then this first iteration is finished. 171 00:09:46,130 --> 00:09:48,790 And so, the exercise loop, 172 00:09:48,790 --> 00:09:52,590 so this outer loop here goes to its second iteration. 173 00:09:52,590 --> 00:09:55,170 And so, we are at exercise number two 174 00:09:56,920 --> 00:10:00,070 and then this whole loop here will run again 175 00:10:00,070 --> 00:10:02,100 from one to five, 176 00:10:02,100 --> 00:10:04,859 so that's this five here, 177 00:10:04,859 --> 00:10:06,550 and then that loop again finishes. 178 00:10:06,550 --> 00:10:10,770 And then the exercise iteration finishes 179 00:10:10,770 --> 00:10:13,330 and we go to iteration number three. 180 00:10:13,330 --> 00:10:15,700 So exercises now, number three 181 00:10:15,700 --> 00:10:18,090 and turn the whole repetition loop. 182 00:10:18,090 --> 00:10:22,330 So, this inner loop here we'll run five times again. 183 00:10:22,330 --> 00:10:23,660 And with that we end up 184 00:10:23,660 --> 00:10:27,870 with a total of basically 15 repetitions 185 00:10:27,870 --> 00:10:29,760 just as I said in the beginning. 186 00:10:29,760 --> 00:10:34,670 So, three times five, okay. 187 00:10:34,670 --> 00:10:38,890 And we could even include the number of the current exercise 188 00:10:38,890 --> 00:10:41,333 in this string that we're printing here. 189 00:10:43,100 --> 00:10:46,000 So that stood out as well, exercise 190 00:10:49,020 --> 00:10:51,620 and then exercise. 191 00:10:51,620 --> 00:10:55,870 So this is the variable that we get from the outer loop. 192 00:10:55,870 --> 00:11:00,870 And so this variable here is of course available insight, 193 00:11:01,440 --> 00:11:02,970 this whole loop. 194 00:11:02,970 --> 00:11:05,540 And that does include all the inner code 195 00:11:05,540 --> 00:11:08,240 even this inner loop. 196 00:11:08,240 --> 00:11:12,030 And so that's why we can access this variable here as well. 197 00:11:12,030 --> 00:11:15,200 And so now we should see exercise one printed 198 00:11:15,200 --> 00:11:16,430 for these five, 199 00:11:16,430 --> 00:11:19,360 then exercise to printed for these five 200 00:11:19,360 --> 00:11:22,963 and exercise three for the last ones. 201 00:11:23,940 --> 00:11:26,313 And yeah, beautiful. 202 00:11:27,930 --> 00:11:32,450 All right, I think this was a very fun exercise. 203 00:11:32,450 --> 00:11:35,670 And again, even though you might not use this all the time 204 00:11:35,670 --> 00:11:39,930 in the real world I still think that this was a pretty cool 205 00:11:39,930 --> 00:11:43,970 example to show you some more power of loops. 206 00:11:43,970 --> 00:11:45,790 And now to wrap up this section, 207 00:11:45,790 --> 00:11:49,340 all there is left to learn is another type of loop, 208 00:11:49,340 --> 00:11:50,863 which is the wild loop.