WEBVTT 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.