Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,270 --> 00:00:03,780 Let's now explore some more features 2 2 00:00:03,780 --> 00:00:05,260 of the for loop 3 3 00:00:05,260 --> 00:00:08,723 and also create a somewhat more useful example. 4 4 00:00:10,260 --> 00:00:12,670 And one of the most used applications 5 5 00:00:12,670 --> 00:00:16,560 of for loops is to loop through a race. 6 6 00:00:16,560 --> 00:00:21,283 So let's get back the array that we were using before. 7 7 00:00:22,670 --> 00:00:24,773 So where is that? 8 8 00:00:26,160 --> 00:00:27,280 So, I mean the one 9 9 00:00:28,220 --> 00:00:30,260 where we talked about objects. 10 10 00:00:30,260 --> 00:00:31,610 Yeah, this one. 11 11 00:00:31,610 --> 00:00:35,100 So go to this lecture about introduction to objects 12 12 00:00:35,100 --> 00:00:37,890 and then grab this Jonas array. 13 13 00:00:37,890 --> 00:00:40,620 And maybe you didn't write it back then 14 14 00:00:40,620 --> 00:00:44,163 but then you can just write it, right now. 15 15 00:00:45,480 --> 00:00:47,900 Okay, and so now we can use a for loop 16 16 00:00:47,900 --> 00:00:50,530 to loop through this array. 17 17 00:00:50,530 --> 00:00:54,230 And let's say for now that we wanted to individually 18 18 00:00:54,230 --> 00:00:57,440 log every element of the array to the console. 19 19 00:00:57,440 --> 00:00:59,030 So very simple. 20 20 00:00:59,030 --> 00:01:03,223 All we want to do is to log these five elements here. 21 21 00:01:04,290 --> 00:01:07,743 So let's write a for loop. 22 22 00:01:08,870 --> 00:01:11,920 And as always, we start with the counter. 23 23 00:01:11,920 --> 00:01:12,979 So let... 24 24 00:01:12,979 --> 00:01:16,960 And now a traditional counter variable name has been I 25 25 00:01:16,960 --> 00:01:18,530 for a long time. 26 26 00:01:18,530 --> 00:01:20,770 And so let's use that here as well. 27 27 00:01:20,770 --> 00:01:25,770 So just I, and this time we need to start it at zero. 28 28 00:01:26,210 --> 00:01:28,890 And that's because the array is zero based 29 29 00:01:28,890 --> 00:01:31,930 when it comes to reading elements out of the array. 30 30 00:01:31,930 --> 00:01:36,110 Remember, and this will make sense once we actually write 31 31 00:01:36,110 --> 00:01:38,750 the code of this loop. 32 32 00:01:38,750 --> 00:01:41,840 Let's now actually skip the condition for now. 33 33 00:01:41,840 --> 00:01:44,290 So we're gonna deal with that a little bit later. 34 34 00:01:45,210 --> 00:01:47,550 And so now updating the counter 35 35 00:01:47,550 --> 00:01:50,990 is gonna work exactly the same as before. 36 36 00:01:50,990 --> 00:01:53,800 So since we want to log all of the elements 37 37 00:01:53,800 --> 00:01:57,230 we need to update the counter variable simply by one. 38 38 00:01:57,230 --> 00:01:58,803 And so again, we use ++, okay. 39 39 00:02:01,000 --> 00:02:04,423 And now let's write or loop here itself. 40 40 00:02:05,530 --> 00:02:06,993 So console.log, 41 41 00:02:07,890 --> 00:02:10,550 and remember all we want to log to the console 42 42 00:02:10,550 --> 00:02:12,780 is each element of the array. 43 43 00:02:12,780 --> 00:02:14,370 And so without a loop 44 44 00:02:14,370 --> 00:02:17,180 we would write that like this, 45 45 00:02:17,180 --> 00:02:19,780 so Jonas zero. 46 46 00:02:19,780 --> 00:02:20,613 Right? 47 47 00:02:20,613 --> 00:02:23,083 And then let's do that outside. 48 48 00:02:23,960 --> 00:02:25,310 So we would do this 49 49 00:02:25,310 --> 00:02:29,110 this, and then all the way to 50 50 00:02:30,400 --> 00:02:31,253 number four. 51 51 00:02:33,981 --> 00:02:34,814 All right. 52 52 00:02:34,814 --> 00:02:36,590 So let's comment is out 53 53 00:02:36,590 --> 00:02:39,350 but this is helpful to see what kind of code 54 54 00:02:39,350 --> 00:02:41,090 we want to achieve. 55 55 00:02:41,090 --> 00:02:44,710 So again, we want to start at Jonas zero 56 56 00:02:44,710 --> 00:02:46,240 which is the first element. 57 57 00:02:46,240 --> 00:02:50,320 Jonas one is this one, then two, three, and four. 58 58 00:02:50,320 --> 00:02:54,570 And so that's the reason why we started the counter at zero 59 59 00:02:54,570 --> 00:02:57,200 because that's the first element that we want to get. 60 60 00:02:57,200 --> 00:02:59,410 It's Jonas zero. 61 61 00:02:59,410 --> 00:03:01,800 And so here, instead of hard coding to zero, 62 62 00:03:01,800 --> 00:03:05,280 of course, we are going to use or counter variable. 63 63 00:03:05,280 --> 00:03:06,803 So, and that's I. 64 64 00:03:07,930 --> 00:03:11,130 And now the trickiest part here, is the condition. 65 65 00:03:11,130 --> 00:03:14,150 And so that's why we left it for the end, 66 66 00:03:14,150 --> 00:03:16,860 but now we need to actually tackle it. 67 67 00:03:16,860 --> 00:03:20,233 So for how long do we want to keep this loop running? 68 68 00:03:21,090 --> 00:03:24,070 Well, it should run when I is zero. 69 69 00:03:24,070 --> 00:03:24,903 Right? 70 70 00:03:24,903 --> 00:03:29,750 It should also run when it's one two, three, and four. 71 71 00:03:29,750 --> 00:03:32,100 Because four is the last element. 72 72 00:03:32,100 --> 00:03:35,150 But when it's five, it's no longer run. 73 73 00:03:35,150 --> 00:03:35,983 Right? 74 74 00:03:35,983 --> 00:03:40,770 And that's because Jonas at five does not exist. 75 75 00:03:40,770 --> 00:03:41,913 Let's just write that, 76 76 00:03:48,590 --> 00:03:50,283 does not exist. 77 77 00:03:52,120 --> 00:03:55,470 And so that means that the I counter variable 78 78 00:03:55,470 --> 00:03:57,653 should always stay below five. 79 79 00:03:58,670 --> 00:04:01,060 So let's write that here. 80 80 00:04:01,060 --> 00:04:03,480 So I should stay 81 81 00:04:03,480 --> 00:04:05,860 below five. 82 82 00:04:05,860 --> 00:04:06,910 And so with this, 83 83 00:04:06,910 --> 00:04:10,910 as soon as the counter variable is updated to five 84 84 00:04:10,910 --> 00:04:14,373 then the next iteration of the loop will not run anymore. 85 85 00:04:15,290 --> 00:04:16,563 So let's try this. 86 86 00:04:18,080 --> 00:04:20,580 And here it's of course not Jonas 87 87 00:04:20,580 --> 00:04:22,730 it's Jonas array. 88 88 00:04:22,730 --> 00:04:25,123 So let's actually change the name up here, 89 89 00:04:26,030 --> 00:04:27,313 in the array itself. 90 90 00:04:28,630 --> 00:04:29,970 Try that again. 91 91 00:04:29,970 --> 00:04:34,760 And yeah, we get a log of each of the elements 92 92 00:04:34,760 --> 00:04:35,870 in the array. 93 93 00:04:35,870 --> 00:04:38,010 So all of the five of them. 94 94 00:04:38,010 --> 00:04:39,120 Great. 95 95 00:04:39,120 --> 00:04:42,020 But there's actually still one problem with this, 96 96 00:04:42,020 --> 00:04:45,210 which is that we hard-coded the length of the array 97 97 00:04:45,210 --> 00:04:46,263 here with five. 98 98 00:04:47,220 --> 00:04:48,563 So let's now say 99 99 00:04:48,563 --> 00:04:50,163 that we add another element, 100 100 00:04:51,020 --> 00:04:53,000 let's say just true. 101 101 00:04:53,000 --> 00:04:54,850 And so if we try this now, 102 102 00:04:54,850 --> 00:04:57,943 do you think that's true will be logged here as well? 103 103 00:04:59,720 --> 00:05:01,340 Well, it will not. 104 104 00:05:01,340 --> 00:05:04,620 Because of course we are still telling JavaScript 105 105 00:05:04,620 --> 00:05:07,220 that I should stay below five. 106 106 00:05:07,220 --> 00:05:10,990 And so it will not print the array at position number five, 107 107 00:05:10,990 --> 00:05:12,600 which does now exist. 108 108 00:05:12,600 --> 00:05:17,600 So now we do have Jonas at position five, right? 109 109 00:05:17,650 --> 00:05:19,470 And so the solution to this, 110 110 00:05:19,470 --> 00:05:21,650 is to not hard code the value here 111 111 00:05:21,650 --> 00:05:23,500 but to compute this value. 112 112 00:05:23,500 --> 00:05:27,160 So basically to get it from JavaScript itself. 113 113 00:05:27,160 --> 00:05:29,790 And how can we get this number? 114 114 00:05:29,790 --> 00:05:34,670 Well, actually this five is simply the length of the array 115 115 00:05:34,670 --> 00:05:35,640 right? 116 116 00:05:35,640 --> 00:05:39,040 Not of this one anymore, but off the original one. 117 117 00:05:39,040 --> 00:05:41,600 So this array has a length of five. 118 118 00:05:41,600 --> 00:05:44,870 And so five is exactly the number that we put here. 119 119 00:05:44,870 --> 00:05:48,630 And so we can simply replace the hard-coded value 120 120 00:05:48,630 --> 00:05:51,650 with a dynamically calculated one. 121 121 00:05:51,650 --> 00:05:55,020 and that's Jonas.length. 122 122 00:05:55,020 --> 00:05:56,375 Remember? 123 123 00:05:56,375 --> 00:05:58,270 So, 124 124 00:05:58,270 --> 00:05:59,223 let's try that. 125 125 00:06:00,200 --> 00:06:02,350 And indeed it still works. 126 126 00:06:02,350 --> 00:06:05,260 And if I now go back to adding something else 127 127 00:06:05,260 --> 00:06:06,460 like true, 128 128 00:06:06,460 --> 00:06:07,730 then Jonas.length 129 129 00:06:07,730 --> 00:06:09,570 will now be six. 130 130 00:06:09,570 --> 00:06:11,658 And that of course happens automatically. 131 131 00:06:11,658 --> 00:06:14,521 And we don't have to manually change any code 132 132 00:06:14,521 --> 00:06:15,993 in that loop. 133 133 00:06:17,230 --> 00:06:21,420 So now we did true also appears here in our luck. 134 134 00:06:21,420 --> 00:06:22,253 Great. 135 135 00:06:23,140 --> 00:06:25,130 Let's now also log something else here. 136 136 00:06:25,130 --> 00:06:27,473 Let's say the type of the variable. 137 137 00:06:28,590 --> 00:06:32,710 So type of Jonas i. 138 138 00:06:32,710 --> 00:06:35,180 And I hope that this part here makes sense. 139 139 00:06:35,180 --> 00:06:37,920 So the fact that we're using the counter variable here 140 140 00:06:37,920 --> 00:06:40,683 to retrieve all the elements of the array. 141 141 00:06:42,390 --> 00:06:45,050 So now let's say, so string, 142 142 00:06:45,050 --> 00:06:48,340 string, number, string, object. 143 143 00:06:48,340 --> 00:06:51,810 So remember how I said that an array is in fact an object 144 144 00:06:51,810 --> 00:06:53,963 and here we have the proof of that. 145 145 00:06:54,920 --> 00:06:57,873 And then finally the last one is of course a boolean. 146 146 00:06:58,880 --> 00:06:59,750 Okay. 147 147 00:06:59,750 --> 00:07:03,040 So I hope that this logic here made sense. 148 148 00:07:03,040 --> 00:07:05,090 And so this is in a nutshell, 149 149 00:07:05,090 --> 00:07:08,350 how we loop race using the for loop. 150 150 00:07:08,350 --> 00:07:11,510 Now, what we did here, was only to read values 151 151 00:07:11,510 --> 00:07:12,920 from an array. 152 152 00:07:12,920 --> 00:07:15,490 But now let's also at the same time, 153 153 00:07:15,490 --> 00:07:18,260 create a new array which will contain 154 154 00:07:18,260 --> 00:07:21,160 this type of each of the elements. 155 155 00:07:21,160 --> 00:07:23,900 So basically this, all right? 156 156 00:07:23,900 --> 00:07:25,820 So again, what I want to do now 157 157 00:07:25,820 --> 00:07:29,990 is to create a new array which will contain all the types 158 158 00:07:29,990 --> 00:07:32,210 for all these elements. 159 159 00:07:32,210 --> 00:07:35,180 And if that sounds a little bit useless, 160 160 00:07:35,180 --> 00:07:38,860 then just keep in mind that these are all just 161 161 00:07:38,860 --> 00:07:40,920 educational exercises. 162 162 00:07:40,920 --> 00:07:44,320 So I designed them to show you how these different features 163 163 00:07:44,320 --> 00:07:46,270 of the language work. 164 164 00:07:46,270 --> 00:07:50,260 So in real world, we would probably not create an array 165 165 00:07:50,260 --> 00:07:52,380 with types of variables. 166 166 00:07:52,380 --> 00:07:54,500 But this is excellent to show you, 167 167 00:07:54,500 --> 00:07:57,820 how to create a new array based on the values 168 168 00:07:57,820 --> 00:07:59,660 of one original array. 169 169 00:07:59,660 --> 00:08:01,770 So to do that we start by creating 170 170 00:08:01,770 --> 00:08:05,530 a new empty array outside of the loop. 171 171 00:08:05,530 --> 00:08:08,113 And let's do that here, after this one. 172 172 00:08:09,380 --> 00:08:11,433 So I will call this one types. 173 173 00:08:12,760 --> 00:08:16,350 And now I think this is something we didn't do before, 174 174 00:08:16,350 --> 00:08:18,980 which is to simply create an empty array. 175 175 00:08:18,980 --> 00:08:22,180 And all we have to do is to basically create an array 176 176 00:08:22,180 --> 00:08:27,160 with the usual syntax, but without any element inside of it. 177 177 00:08:27,160 --> 00:08:30,800 And so now we have to go here to the same loop 178 178 00:08:30,800 --> 00:08:33,330 because this new array types will be based 179 179 00:08:33,330 --> 00:08:34,610 on the Jonas array. 180 180 00:08:34,610 --> 00:08:36,450 So it's gonna have the same length. 181 181 00:08:36,450 --> 00:08:38,690 And so we can use the exact same loop 182 182 00:08:38,690 --> 00:08:42,143 that we used to read data from the Jonas loop 183 183 00:08:42,143 --> 00:08:45,593 also to construct this new types array. 184 184 00:08:46,810 --> 00:08:49,350 So let's say types, 185 185 00:08:49,350 --> 00:08:52,600 at position I, should be equal to 186 186 00:08:53,620 --> 00:08:57,450 type of Jonas 187 187 00:08:57,450 --> 00:08:59,780 at position I. 188 188 00:08:59,780 --> 00:09:01,400 And remember that this works 189 189 00:09:01,400 --> 00:09:04,470 because we can essentially do this. 190 190 00:09:04,470 --> 00:09:07,510 So we could do it again without the loop 191 191 00:09:07,510 --> 00:09:10,270 and say types zero 192 192 00:09:10,270 --> 00:09:13,720 is equals string. 193 193 00:09:13,720 --> 00:09:15,800 So this would work, right? 194 194 00:09:15,800 --> 00:09:18,890 And so of course it also works with the 195 195 00:09:18,890 --> 00:09:21,260 index number here dynamically. 196 196 00:09:21,260 --> 00:09:23,410 And so that's exactly what we're doing here 197 197 00:09:23,410 --> 00:09:25,940 in the exact same way as we read data 198 198 00:09:25,940 --> 00:09:27,163 from the Jonas array, 199 199 00:09:29,650 --> 00:09:30,530 right? 200 200 00:09:30,530 --> 00:09:32,430 So in iteration zero, 201 201 00:09:32,430 --> 00:09:37,430 we will have type zero equals type of Jonas zero. 202 202 00:09:37,720 --> 00:09:39,320 Then in the next iteration, 203 203 00:09:39,320 --> 00:09:41,400 we will have types one 204 204 00:09:41,400 --> 00:09:44,030 equals type of Jonas one 205 205 00:09:44,030 --> 00:09:46,683 and then two, three, four, and five. 206 206 00:09:47,840 --> 00:09:48,673 All right. 207 207 00:09:49,640 --> 00:09:52,110 So just to see if that works 208 208 00:09:52,110 --> 00:09:54,610 let's then log to the console, 209 209 00:09:54,610 --> 00:09:56,350 this newly created 210 210 00:09:56,350 --> 00:10:00,223 or to be more accurate, this newly filled array. 211 211 00:10:01,720 --> 00:10:03,760 So let's see. 212 212 00:10:03,760 --> 00:10:06,070 And indeed now we get this array 213 213 00:10:06,070 --> 00:10:09,170 which has exactly the types that we can see here as well. 214 214 00:10:09,170 --> 00:10:11,220 So string, string, number, 215 215 00:10:11,220 --> 00:10:13,550 string, object, and boolean. 216 216 00:10:13,550 --> 00:10:16,160 So these six that we also have here 217 217 00:10:16,160 --> 00:10:19,450 which means that we achieved our goal here. 218 218 00:10:19,450 --> 00:10:21,090 Now, this is just one way 219 219 00:10:21,990 --> 00:10:24,033 of filling an array. 220 220 00:10:25,300 --> 00:10:27,380 And let me write that down here, 221 221 00:10:27,380 --> 00:10:30,847 filling the types array. 222 222 00:10:30,847 --> 00:10:33,290 And here we do basically reading 223 223 00:10:35,200 --> 00:10:37,800 from Jonas array. 224 224 00:10:37,800 --> 00:10:40,410 But this is just one way of doing it. 225 225 00:10:40,410 --> 00:10:42,040 So let's comment out this one 226 226 00:10:42,040 --> 00:10:44,140 and do it in another way. 227 227 00:10:44,140 --> 00:10:46,880 And do you remember how to add elements 228 228 00:10:46,880 --> 00:10:49,420 to an array in another way? 229 229 00:10:49,420 --> 00:10:52,483 Well, we could use the push method, right? 230 230 00:10:54,040 --> 00:10:57,810 So that would be types.push. 231 231 00:10:57,810 --> 00:10:59,350 And remember that push 232 232 00:10:59,350 --> 00:11:02,600 adds a new element to the end of the array. 233 233 00:11:02,600 --> 00:11:05,460 And so here, we now need to pass in the element 234 234 00:11:05,460 --> 00:11:08,550 that we do want to add on to the array. 235 235 00:11:08,550 --> 00:11:09,740 And so that's again 236 236 00:11:09,740 --> 00:11:11,200 type of Jonas 237 237 00:11:12,180 --> 00:11:14,080 at position I. 238 238 00:11:14,080 --> 00:11:16,150 So off the current counter. 239 239 00:11:16,150 --> 00:11:17,913 And so if we try this now again, 240 240 00:11:19,810 --> 00:11:21,600 we should get to the same. 241 241 00:11:21,600 --> 00:11:24,380 And it's important that we add the new element 242 242 00:11:24,380 --> 00:11:27,550 to the end of array and not to the beginning. 243 243 00:11:27,550 --> 00:11:31,790 So we really need to use pushier and not unshift. 244 244 00:11:31,790 --> 00:11:34,130 So I think that this way of doing it here 245 245 00:11:34,130 --> 00:11:36,570 is actually a little bit cleaner. 246 246 00:11:36,570 --> 00:11:39,010 But if you prefer this first way here 247 247 00:11:39,010 --> 00:11:42,720 then of course you can just use that one as well. 248 248 00:11:42,720 --> 00:11:44,030 But what matters here, 249 249 00:11:44,030 --> 00:11:46,600 is that we really understood the logic 250 250 00:11:46,600 --> 00:11:50,480 of how to construct all the different parts of this for loop 251 251 00:11:50,480 --> 00:11:52,270 in order to loop the array. 252 252 00:11:52,270 --> 00:11:54,710 So it starts the counter being zero 253 253 00:11:54,710 --> 00:11:57,167 because that's the first element of the array. 254 254 00:11:57,167 --> 00:12:00,150 And then this condition here 255 255 00:12:00,150 --> 00:12:04,400 which specifies that the current index always needs to stay 256 256 00:12:04,400 --> 00:12:07,860 below the length of the array that we're looping through. 257 257 00:12:07,860 --> 00:12:09,930 And then in the loop itself 258 258 00:12:09,930 --> 00:12:13,860 we always get the current element using the current counter. 259 259 00:12:13,860 --> 00:12:15,400 Which is gonna go from zero 260 260 00:12:15,400 --> 00:12:18,573 to the length of the array minus one basically. 261 261 00:12:19,700 --> 00:12:20,533 All right. 262 262 00:12:21,710 --> 00:12:23,770 And to make sure we really get this 263 263 00:12:23,770 --> 00:12:27,290 let's try another, maybe more practical example. 264 264 00:12:27,290 --> 00:12:30,113 So let's go back to having an array of birth years. 265 265 00:12:31,920 --> 00:12:33,713 So 1991, 266 266 00:12:34,810 --> 00:12:35,760 2007, 267 267 00:12:35,760 --> 00:12:38,790 let's say 1969 268 268 00:12:38,790 --> 00:12:40,623 and 2020. 269 269 00:12:42,140 --> 00:12:45,230 And now what we want to do is to calculate the ages 270 270 00:12:45,230 --> 00:12:47,930 for all these four birth years here. 271 271 00:12:47,930 --> 00:12:50,850 And we want to store them in a new array. 272 272 00:12:50,850 --> 00:12:53,700 And that's a very common type of operation, 273 273 00:12:53,700 --> 00:12:56,210 which we actually already did before 274 274 00:12:56,210 --> 00:12:58,870 but without using loops. 275 275 00:12:58,870 --> 00:13:00,160 So essentially that's what we did 276 276 00:13:00,160 --> 00:13:01,883 in the tip calculator challenge. 277 277 00:13:05,610 --> 00:13:06,453 So, 278 278 00:13:08,030 --> 00:13:09,450 yeah, here. 279 279 00:13:09,450 --> 00:13:12,310 So here we had an array of three bills 280 280 00:13:12,310 --> 00:13:15,960 and then we manually calculated the tip for each of them. 281 281 00:13:15,960 --> 00:13:18,960 So manually we specified index zero, 282 282 00:13:18,960 --> 00:13:21,730 one and two, 283 283 00:13:21,730 --> 00:13:25,810 and created a new array based on these values. 284 284 00:13:25,810 --> 00:13:29,550 But in the real world, we would have used a loop to do that. 285 285 00:13:29,550 --> 00:13:31,543 And so that's what we will do now. 286 286 00:13:32,520 --> 00:13:33,353 Okay. 287 287 00:13:33,353 --> 00:13:35,983 Just with another, a bit more simple example. 288 288 00:13:37,330 --> 00:13:40,200 Years is the array which contains the birth years, 289 289 00:13:40,200 --> 00:13:42,090 and now let's create another 290 290 00:13:42,090 --> 00:13:45,683 and again, empty array, which will then hold the ages. 291 291 00:13:46,970 --> 00:13:48,420 And so what we're gonna do now 292 292 00:13:48,420 --> 00:13:52,890 is to loop through years and then fill up these ages array. 293 293 00:13:52,890 --> 00:13:55,023 So four, 294 294 00:13:55,860 --> 00:13:56,960 and then once more, 295 295 00:13:56,960 --> 00:14:00,050 let's define the counter at zero 296 296 00:14:00,050 --> 00:14:03,210 for the same reasons that we did it before. 297 297 00:14:03,210 --> 00:14:07,250 And it's not a problem that discounter variable here 298 298 00:14:07,250 --> 00:14:09,490 has exactly the same name. 299 299 00:14:09,490 --> 00:14:11,890 Then the condition is also gonna be the same. 300 300 00:14:11,890 --> 00:14:13,590 And actually the whole loop 301 301 00:14:13,590 --> 00:14:15,420 always kind of looks the same, 302 302 00:14:15,420 --> 00:14:17,680 when we loop over an array. 303 303 00:14:17,680 --> 00:14:19,040 So now here the difference 304 304 00:14:19,040 --> 00:14:22,910 is that it's of course, years.length. 305 305 00:14:22,910 --> 00:14:24,480 And then at the end, 306 306 00:14:24,480 --> 00:14:28,770 we as always increased the counter by one. 307 307 00:14:28,770 --> 00:14:31,620 And now what we need to do is to calculate the age 308 308 00:14:31,620 --> 00:14:33,200 of the current year. 309 309 00:14:33,200 --> 00:14:34,890 So that's gonna be, 310 310 00:14:34,890 --> 00:14:36,400 2037. 311 311 00:14:36,400 --> 00:14:39,700 So as always that's the year that we're currently in, 312 312 00:14:39,700 --> 00:14:43,430 let's say, and then minus the current birth here. 313 313 00:14:43,430 --> 00:14:45,143 So how do we get that? 314 314 00:14:46,090 --> 00:14:50,420 We say years, at the current loop position. 315 315 00:14:50,420 --> 00:14:51,253 Okay? 316 316 00:14:51,253 --> 00:14:52,460 So that's nothing new. 317 317 00:14:52,460 --> 00:14:55,210 I hope now at this point, okay. 318 318 00:14:55,210 --> 00:14:57,600 So we have this calculation now 319 319 00:14:57,600 --> 00:15:01,860 and now we want to add it to this new empty array. 320 320 00:15:01,860 --> 00:15:03,510 So we say we want to push it, 321 321 00:15:03,510 --> 00:15:04,707 to that array. 322 322 00:15:04,707 --> 00:15:07,970 And so we use the push method to do that. 323 323 00:15:07,970 --> 00:15:12,430 So ages.push. 324 324 00:15:12,430 --> 00:15:13,840 And so this is the value 325 325 00:15:13,840 --> 00:15:16,990 that we want to push into this empty array. 326 326 00:15:16,990 --> 00:15:18,733 And that's actually it. 327 327 00:15:20,090 --> 00:15:21,890 So let's check it out in a console 328 328 00:15:25,850 --> 00:15:26,700 and 329 329 00:15:28,440 --> 00:15:30,030 here we go. 330 330 00:15:30,030 --> 00:15:31,660 So just to confirm, 331 331 00:15:31,660 --> 00:15:36,413 2037 minus 1991 is of course 46. 332 332 00:15:37,960 --> 00:15:40,560 And that's just do it with 27 as well, 333 333 00:15:40,560 --> 00:15:42,360 2007 I mean. 334 334 00:15:42,360 --> 00:15:44,480 And so that's 30, which is this one. 335 335 00:15:44,480 --> 00:15:48,240 And so this array result, is correct indeed. 336 336 00:15:48,240 --> 00:15:51,490 So what we essentially did is this. 337 337 00:15:51,490 --> 00:15:53,810 We cannot do an operations 338 338 00:15:53,810 --> 00:15:56,370 between simple values and an array. 339 339 00:15:56,370 --> 00:15:58,430 So that I showed you earlier, right? 340 340 00:15:58,430 --> 00:16:00,980 We can not do 2037 341 341 00:16:00,980 --> 00:16:03,337 minus the years array. 342 342 00:16:03,337 --> 00:16:06,100 That will just give us not a number. 343 343 00:16:06,100 --> 00:16:08,060 And so here in this loop, 344 344 00:16:08,060 --> 00:16:10,420 we basically did it individually. 345 345 00:16:10,420 --> 00:16:13,060 So we did to calculation one by one. 346 346 00:16:13,060 --> 00:16:14,910 In each iteration of the loop 347 347 00:16:14,910 --> 00:16:17,060 we calculated 2037 348 348 00:16:17,060 --> 00:16:19,350 minus this year and then added it 349 349 00:16:19,350 --> 00:16:21,920 to the first position in the ages array. 350 350 00:16:21,920 --> 00:16:24,880 Then we did 2037 minus this 351 351 00:16:24,880 --> 00:16:27,920 and put it at the end of the ages array again. 352 352 00:16:27,920 --> 00:16:31,540 And then the same for this one and for 2020. 353 353 00:16:31,540 --> 00:16:32,420 Great. 354 354 00:16:32,420 --> 00:16:34,910 So that is a very very useful 355 355 00:16:34,910 --> 00:16:39,000 and important application of the for loop. 356 356 00:16:39,000 --> 00:16:40,060 And now to finish, 357 357 00:16:40,060 --> 00:16:42,820 let's learn about two important statements 358 358 00:16:42,820 --> 00:16:44,130 for loops. 359 359 00:16:44,130 --> 00:16:47,480 And that's the continue and to break statement. 360 360 00:16:47,480 --> 00:16:49,540 Let me just write that here, 361 361 00:16:49,540 --> 00:16:52,860 continue and break. 362 362 00:16:52,860 --> 00:16:54,663 And let's start with continue. 363 363 00:16:55,590 --> 00:17:00,110 So continue is to exit the current iteration of the loop 364 364 00:17:00,110 --> 00:17:02,150 and continue to the next one. 365 365 00:17:02,150 --> 00:17:04,800 On the other hand, break is used 366 366 00:17:04,800 --> 00:17:08,090 to completely terminate the whole loop. 367 367 00:17:08,090 --> 00:17:11,040 So let's see two quick examples for that. 368 368 00:17:11,040 --> 00:17:13,560 And let's go back to actually this loop 369 369 00:17:13,560 --> 00:17:15,470 that we had here. 370 370 00:17:15,470 --> 00:17:17,623 Where we looped this Jonas array. 371 371 00:17:18,570 --> 00:17:20,480 So I will just copy this, 372 372 00:17:20,480 --> 00:17:24,150 because we already learned how to loop through the array. 373 373 00:17:24,150 --> 00:17:25,800 And now I'm just interested in showing you 374 374 00:17:25,800 --> 00:17:28,793 how continue and to break a work. 375 375 00:17:29,780 --> 00:17:31,540 So let me delete this 376 376 00:17:31,540 --> 00:17:33,660 and this as well. 377 377 00:17:33,660 --> 00:17:36,280 And now let's say that for some reason, 378 378 00:17:36,280 --> 00:17:39,080 we only wanted to print elements to the array 379 379 00:17:39,080 --> 00:17:40,640 that are strings. 380 380 00:17:40,640 --> 00:17:44,310 And the continue statement is perfect for this. 381 381 00:17:44,310 --> 00:17:45,430 Because again, 382 382 00:17:45,430 --> 00:17:49,470 with continue we can exit the current iteration of the loop. 383 383 00:17:49,470 --> 00:17:51,943 So what we can do here, is to say, 384 384 00:17:53,160 --> 00:17:57,010 if the type of the current element 385 385 00:17:58,100 --> 00:17:59,330 so of Jonas I, 386 386 00:18:03,180 --> 00:18:04,483 is not a string, 387 387 00:18:06,940 --> 00:18:09,543 then continue. 388 388 00:18:10,580 --> 00:18:13,610 And so that's how we write the continue statement. 389 389 00:18:13,610 --> 00:18:16,640 It's really just this continue keyword. 390 390 00:18:16,640 --> 00:18:18,778 So again, what we want to do here, 391 391 00:18:18,778 --> 00:18:22,140 is to only log strings to the console. 392 392 00:18:22,140 --> 00:18:23,820 Which means that everything else, 393 393 00:18:23,820 --> 00:18:25,840 should basically be skipped. 394 394 00:18:25,840 --> 00:18:27,800 And that's what we do here. 395 395 00:18:27,800 --> 00:18:31,540 So we say, if the type of the current element, 396 396 00:18:31,540 --> 00:18:33,270 so that's this one here. 397 397 00:18:33,270 --> 00:18:35,210 So if the type of the current element 398 398 00:18:35,210 --> 00:18:38,380 is not a string then continue. 399 399 00:18:38,380 --> 00:18:39,920 Which again means, 400 400 00:18:39,920 --> 00:18:43,060 that the current iteration of the loop is exited, 401 401 00:18:43,060 --> 00:18:45,453 and then the next one starts immediately. 402 402 00:18:46,540 --> 00:18:50,590 So let's just write some other note here 403 403 00:18:50,590 --> 00:18:52,280 to the console just so we know 404 404 00:18:52,280 --> 00:18:54,250 what we're doing here, like 405 405 00:18:56,920 --> 00:18:58,490 all the strings 406 406 00:18:58,490 --> 00:19:00,480 because otherwise the output here 407 407 00:19:00,480 --> 00:19:03,433 is gonna start to look a little bit confusing. 408 408 00:19:04,800 --> 00:19:06,593 But anyway, let's test this now. 409 409 00:19:07,460 --> 00:19:10,840 And indeed, we only get strings now. 410 410 00:19:10,840 --> 00:19:12,870 So these three are strings 411 411 00:19:12,870 --> 00:19:15,070 and all the other ones are not strings. 412 412 00:19:15,070 --> 00:19:18,570 So this number, this array and this boolean, 413 413 00:19:18,570 --> 00:19:21,480 so they will now not get printed. 414 414 00:19:21,480 --> 00:19:23,760 Because we basically skipped them. 415 415 00:19:23,760 --> 00:19:25,800 For example, that eight number, 416 416 00:19:25,800 --> 00:19:27,650 which is 46 here. 417 417 00:19:27,650 --> 00:19:31,890 So the third element, does have to type number here. 418 418 00:19:31,890 --> 00:19:32,723 Right? 419 419 00:19:32,723 --> 00:19:34,030 So it's not a string. 420 420 00:19:34,030 --> 00:19:36,550 And so this year will be true 421 421 00:19:36,550 --> 00:19:39,820 because of course number is different than string. 422 422 00:19:39,820 --> 00:19:41,120 And so this is true. 423 423 00:19:41,120 --> 00:19:43,600 And so this code here, will run. 424 424 00:19:43,600 --> 00:19:45,250 And what continue will do 425 425 00:19:45,250 --> 00:19:48,380 is that it will immediately exit the current iteration. 426 426 00:19:48,380 --> 00:19:49,810 And so this line of code here, 427 427 00:19:49,810 --> 00:19:52,950 will not be executed in the current iteration. 428 428 00:19:52,950 --> 00:19:54,593 It will not even be reached. 429 429 00:19:55,440 --> 00:19:56,470 Okay. 430 430 00:19:56,470 --> 00:20:00,400 And now finally, let me just show you how break works. 431 431 00:20:00,400 --> 00:20:02,840 And remember that what break does 432 432 00:20:02,840 --> 00:20:05,610 is to completely terminate the whole loop. 433 433 00:20:05,610 --> 00:20:07,800 So not just the current iteration. 434 434 00:20:07,800 --> 00:20:11,510 So what we want to do now, is to log no other elements 435 435 00:20:11,510 --> 00:20:14,020 after we found a number. 436 436 00:20:14,020 --> 00:20:16,800 So essentially after a number is found 437 437 00:20:16,800 --> 00:20:18,800 which will be this 46 here, 438 438 00:20:18,800 --> 00:20:20,813 nothing else should be printed. 439 439 00:20:22,270 --> 00:20:23,930 So let's do that. 440 440 00:20:23,930 --> 00:20:25,680 And i will again, copy all of this. 441 441 00:20:27,820 --> 00:20:30,580 And so let's say here 442 442 00:20:31,570 --> 00:20:32,403 break 443 443 00:20:33,900 --> 00:20:35,043 with number. 444 444 00:20:36,290 --> 00:20:40,920 So let's translate a logic that we just said into the code. 445 445 00:20:40,920 --> 00:20:42,920 So as soon as a number is found, 446 446 00:20:42,920 --> 00:20:44,680 we want to break the loop. 447 447 00:20:44,680 --> 00:20:46,570 So, our if condition here should be 448 448 00:20:47,510 --> 00:20:49,640 type of Jonas I, 449 449 00:20:49,640 --> 00:20:51,100 so the current element, 450 450 00:20:51,100 --> 00:20:52,793 if it's equal to a number, 451 451 00:20:55,520 --> 00:20:58,383 so now that's number then break. 452 452 00:20:59,770 --> 00:21:00,603 Now, okay. 453 453 00:21:00,603 --> 00:21:01,973 Let's see the result here. 454 454 00:21:03,070 --> 00:21:06,510 And indeed, that's exactly what we wanted. 455 455 00:21:06,510 --> 00:21:09,060 So after the first number is found 456 456 00:21:09,060 --> 00:21:11,470 which is this 46 here, 457 457 00:21:11,470 --> 00:21:13,610 nothing else is printed. 458 458 00:21:13,610 --> 00:21:17,210 So in this iteration where the number is found 459 459 00:21:17,210 --> 00:21:19,950 not even this line of code is printed anymore 460 460 00:21:19,950 --> 00:21:22,163 and then the loop is terminated completely. 461 461 00:21:23,640 --> 00:21:24,560 All right. 462 462 00:21:24,560 --> 00:21:27,550 Now this might not sound very practical, 463 463 00:21:27,550 --> 00:21:30,330 but believe me there are some important use cases 464 464 00:21:30,330 --> 00:21:32,530 for continue and break. 465 465 00:21:32,530 --> 00:21:36,150 It's just hard to create some small and isolated 466 466 00:21:36,150 --> 00:21:40,470 code examples to show you just how useful they can be. 467 467 00:21:40,470 --> 00:21:42,480 But anyway I wanted to let you know 468 468 00:21:42,480 --> 00:21:45,200 that continue and break exist. 469 469 00:21:45,200 --> 00:21:47,870 But the most important takeaway from this lecture, 470 470 00:21:47,870 --> 00:21:49,700 is definitely to understand, 471 471 00:21:49,700 --> 00:21:51,570 how we can loop through a race 472 472 00:21:51,570 --> 00:21:53,793 using this kind of logic here. 473 473 00:21:54,820 --> 00:21:57,270 Okay, so this one here is really important 474 474 00:21:57,270 --> 00:21:59,653 that you understand this snippet of code. 38415