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