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.