WEBVTT 1 00:00:01.180 --> 00:00:04.380 In this lecture we will loop over an array 2 00:00:04.380 --> 00:00:07.030 using the forEach method. 3 00:00:07.030 --> 00:00:08.670 Now we had already learned 4 00:00:08.670 --> 00:00:12.600 how to loop over an array using the for of loop, 5 00:00:12.600 --> 00:00:16.763 but the forEach method is really fundamentally different. 6 00:00:18.090 --> 00:00:20.470 And from now on we will start working 7 00:00:20.470 --> 00:00:22.670 with our bank account data, 8 00:00:22.670 --> 00:00:25.253 but still in a very simplified way. 9 00:00:26.870 --> 00:00:31.480 So let me get this data here into the present lecture 10 00:00:31.480 --> 00:00:34.080 so that we can see what we're actually working with. 11 00:00:34.930 --> 00:00:37.300 So let me comment it out from here 12 00:00:39.540 --> 00:00:40.663 and just move it here. 13 00:00:41.860 --> 00:00:44.170 So let's say that we wanted to loop 14 00:00:44.170 --> 00:00:46.370 over this movement's array, 15 00:00:46.370 --> 00:00:47.980 in order to print a message 16 00:00:47.980 --> 00:00:51.003 for each movement in this bank account. 17 00:00:52.140 --> 00:00:56.180 So these positive values here are basically deposits 18 00:00:56.180 --> 00:00:59.050 and the negative values are withdrawals. 19 00:00:59.050 --> 00:01:01.800 And so we can print something to the console 20 00:01:01.800 --> 00:01:06.800 saying whether the user deposited or withdrew some money, 21 00:01:07.000 --> 00:01:11.363 and let's actually start by doing this using a for of loop, 22 00:01:12.410 --> 00:01:14.300 just so that we can then compare 23 00:01:14.300 --> 00:01:16.583 the forEach loop to this one. 24 00:01:17.610 --> 00:01:22.320 So let's create a variable movement of movements 25 00:01:24.050 --> 00:01:26.650 and then we will log something to the console 26 00:01:26.650 --> 00:01:28.893 according to the movement value. 27 00:01:30.190 --> 00:01:35.190 So basically if the current movement is greater than zero 28 00:01:36.250 --> 00:01:41.250 then log to the console, you deposited, 29 00:01:42.640 --> 00:01:46.880 and then the movement and else 30 00:01:50.880 --> 00:01:52.950 you withdrew 31 00:01:55.770 --> 00:01:59.240 and then the movement again. 32 00:01:59.240 --> 00:02:03.070 And actually we can use a nice maths function here 33 00:02:03.070 --> 00:02:06.140 which is to take the absolute value, 34 00:02:06.140 --> 00:02:09.120 so basically removing the sign. 35 00:02:09.120 --> 00:02:11.010 So let's see, 36 00:02:11.010 --> 00:02:12.830 and yeah. 37 00:02:12.830 --> 00:02:14.320 That looks nice. 38 00:02:14.320 --> 00:02:18.680 So of course this solution here works perfect, 39 00:02:18.680 --> 00:02:22.310 but now let's finally learn how to use the forEach method 40 00:02:22.310 --> 00:02:24.880 to achieve the exact same thing 41 00:02:24.880 --> 00:02:27.823 but in my opinion in an easier way. 42 00:02:28.720 --> 00:02:31.790 So to loop over the movements array 43 00:02:31.790 --> 00:02:33.130 we use forEach, 44 00:02:35.080 --> 00:02:38.380 and that's with a capital E, don't forget that. 45 00:02:38.380 --> 00:02:40.410 And then the forEach method 46 00:02:40.410 --> 00:02:43.683 actually requires a callback function here. 47 00:02:44.830 --> 00:02:48.570 So forEach is technically a higher order function 48 00:02:48.570 --> 00:02:51.340 as we learned in the last section, 49 00:02:51.340 --> 00:02:53.880 which requires a callback function 50 00:02:53.880 --> 00:02:56.790 in order to tell it what to do. 51 00:02:56.790 --> 00:02:59.150 So it's the forEach method here 52 00:02:59.150 --> 00:03:01.860 that will call this callback function. 53 00:03:01.860 --> 00:03:05.240 We are not calling it ourselves as always. 54 00:03:05.240 --> 00:03:09.360 And that's of course important to keep in mind once again, 55 00:03:09.360 --> 00:03:12.558 But when exactly will forEach actually 56 00:03:12.558 --> 00:03:14.956 call this callback function. 57 00:03:14.956 --> 00:03:19.414 Well what the forEach method does is to loop over the array, 58 00:03:19.414 --> 00:03:22.588 and in each iteration it will execute 59 00:03:22.588 --> 00:03:24.836 this callback function here. 60 00:03:24.836 --> 00:03:28.558 Also as the forEach method calls this callback function 61 00:03:28.558 --> 00:03:32.410 in each iteration it will pass in the current element 62 00:03:32.410 --> 00:03:35.020 of the array as an argument, 63 00:03:35.020 --> 00:03:37.500 and we can specify that here 64 00:03:37.500 --> 00:03:40.870 and let's call that again movement. 65 00:03:40.870 --> 00:03:45.030 So again, each time this callback here is called, 66 00:03:45.030 --> 00:03:46.550 so in each iteration, 67 00:03:46.550 --> 00:03:51.060 it will receive the current element of the array 68 00:03:51.060 --> 00:03:52.570 as an argument. 69 00:03:52.570 --> 00:03:56.300 And here we can of course give this any name that we want, 70 00:03:56.300 --> 00:03:57.760 but I'm just calling it movement 71 00:03:57.760 --> 00:04:00.003 because that's what we did up here. 72 00:04:01.130 --> 00:04:04.180 And so now we can do exactly the same thing 73 00:04:04.180 --> 00:04:06.990 here in this callback function. 74 00:04:06.990 --> 00:04:07.923 Give it a save, 75 00:04:09.130 --> 00:04:13.080 and indeed we now get the same result twice, 76 00:04:13.080 --> 00:04:14.033 so, 77 00:04:14.960 --> 00:04:16.270 let me just 78 00:04:16.270 --> 00:04:18.313 add like a separator here. 79 00:04:19.597 --> 00:04:20.430 ForEach. 80 00:04:23.360 --> 00:04:24.920 And so, yeah. 81 00:04:24.920 --> 00:04:27.050 Indeed we get the same result 82 00:04:27.050 --> 00:04:30.010 and also get ourselves more space 83 00:04:30.010 --> 00:04:31.640 and yeah 84 00:04:31.640 --> 00:04:35.363 so that's essentially how the forEach method works. 85 00:04:37.040 --> 00:04:40.720 So basically behind the scenes, in iteration zero, 86 00:04:40.720 --> 00:04:43.670 it will call this function here 87 00:04:43.670 --> 00:04:46.763 so an anonymous function in this case without a name, 88 00:04:48.360 --> 00:04:49.883 let's just call it function, 89 00:04:52.780 --> 00:04:56.820 and it's gonna call it with the value of 200 90 00:04:56.820 --> 00:04:59.280 then in the next iteration it will call it 91 00:05:00.470 --> 00:05:03.000 with the value of 450 92 00:05:04.330 --> 00:05:07.843 then with the value of 400, right. 93 00:05:09.450 --> 00:05:11.110 And so on and so forth. 94 00:05:11.110 --> 00:05:14.470 Until it reaches the end of the array. 95 00:05:14.470 --> 00:05:16.950 And this part of the forEach function 96 00:05:16.950 --> 00:05:19.890 passing in the current element of the array, 97 00:05:19.890 --> 00:05:22.030 here like this, this and this 98 00:05:22.930 --> 00:05:26.210 is especially important to understand. 99 00:05:26.210 --> 00:05:29.940 So basically this is exactly the concept that I explained 100 00:05:29.940 --> 00:05:31.400 In the last section 101 00:05:31.400 --> 00:05:34.180 when I said that we use a callback function 102 00:05:34.180 --> 00:05:36.820 to tell another higher order function 103 00:05:36.820 --> 00:05:39.130 exactly what it should do, 104 00:05:39.130 --> 00:05:42.018 and so in this case we tell forEach 105 00:05:42.018 --> 00:05:44.640 that in each iteration 106 00:05:44.640 --> 00:05:48.890 it should log one of these two strings here to the console 107 00:05:48.890 --> 00:05:51.630 So we give the forEach method instructions 108 00:05:51.630 --> 00:05:53.920 by giving it a callback function 109 00:05:53.920 --> 00:05:58.100 which contains these instructions, alright. 110 00:05:58.100 --> 00:06:00.260 And I really know and understand 111 00:06:00.260 --> 00:06:04.150 that this is quite a hard concept to wrap your head around. 112 00:06:04.150 --> 00:06:07.635 But if you just continue using this from now on 113 00:06:07.635 --> 00:06:12.635 then eventually it will start to make sense, believe me. 114 00:06:12.950 --> 00:06:16.060 Now anyway, which of the two version 115 00:06:16.060 --> 00:06:18.280 do you think is cleaner 116 00:06:18.280 --> 00:06:21.283 and easier to write and easier to read. 117 00:06:22.180 --> 00:06:24.600 Well I think that we can both agree 118 00:06:24.600 --> 00:06:28.020 that it is the forEach method, right. 119 00:06:28.020 --> 00:06:30.230 And maybe you don't agree with that 120 00:06:30.230 --> 00:06:32.110 and of course that's okay, 121 00:06:32.110 --> 00:06:33.580 as I keep mentioning 122 00:06:33.580 --> 00:06:37.920 it's always good to develop your own style of programming. 123 00:06:37.920 --> 00:06:40.370 But using the forEach method here 124 00:06:40.370 --> 00:06:44.050 and especially understanding the logic behind it here 125 00:06:44.050 --> 00:06:45.580 with the callback function, 126 00:06:45.580 --> 00:06:48.720 is still really important for all the other methods 127 00:06:48.720 --> 00:06:51.200 that we're gonna learn later. 128 00:06:51.200 --> 00:06:53.680 Anyways let's now learn some more stuff 129 00:06:53.680 --> 00:06:55.370 about the forEach method, 130 00:06:55.370 --> 00:06:57.820 because we are not done yet. 131 00:06:57.820 --> 00:07:00.590 So what if we actually needed access 132 00:07:00.590 --> 00:07:02.720 to a counter variable here. 133 00:07:02.720 --> 00:07:05.860 So just like we can access the current index 134 00:07:05.860 --> 00:07:09.290 off the array here in the for of loop. 135 00:07:09.290 --> 00:07:12.023 So remember how we did that with for of, 136 00:07:13.300 --> 00:07:15.313 let's just rewrite this part. 137 00:07:16.580 --> 00:07:20.620 So in this case we loop over 138 00:07:21.530 --> 00:07:24.390 movements dot entries, 139 00:07:24.390 --> 00:07:25.223 remember? 140 00:07:26.520 --> 00:07:31.300 So entries is in fact just another array method 141 00:07:31.300 --> 00:07:33.770 and it returns an array of arrays, 142 00:07:33.770 --> 00:07:36.950 remember, which in the first position 143 00:07:36.950 --> 00:07:39.010 contains the current index 144 00:07:39.010 --> 00:07:40.493 and then the value itself. 145 00:07:43.410 --> 00:07:44.810 And so this is how we access 146 00:07:44.810 --> 00:07:48.210 the counter variable in the for of loop. 147 00:07:48.210 --> 00:07:52.220 And then here in our string we could use that to say 148 00:07:53.100 --> 00:07:53.933 for example, 149 00:07:53.933 --> 00:07:56.110 movement and then the number of the movement. 150 00:08:00.320 --> 00:08:01.730 So that's the counter 151 00:08:01.730 --> 00:08:06.730 which starts at zero, and so we just add one to that 152 00:08:12.410 --> 00:08:13.260 and so 153 00:08:14.410 --> 00:08:16.200 well something went wrong 154 00:08:18.400 --> 00:08:21.210 so that's in line 121, 155 00:08:21.210 --> 00:08:22.703 so unexpected token. 156 00:08:23.540 --> 00:08:26.403 That's because we didn't open it here again, 157 00:08:27.840 --> 00:08:29.733 so we were missing this part here. 158 00:08:30.880 --> 00:08:33.040 And now this looks a lot nicer, 159 00:08:33.040 --> 00:08:35.490 with the number of the movements here. 160 00:08:35.490 --> 00:08:40.050 And so let's now do the same in the forEach method here. 161 00:08:40.050 --> 00:08:42.550 And here, fortunately, it's a lot easier 162 00:08:42.550 --> 00:08:45.890 to get access to the current index. 163 00:08:45.890 --> 00:08:49.580 So to understand how it works we need to remember once more 164 00:08:49.580 --> 00:08:51.620 that it is the forEach method 165 00:08:51.620 --> 00:08:55.150 who calls this callback function in each iteration. 166 00:08:55.150 --> 00:08:56.920 And as it calls this function 167 00:08:56.920 --> 00:09:00.600 it also passes in the current element of the array, 168 00:09:00.600 --> 00:09:03.860 but actually that's not all it passes in 169 00:09:03.860 --> 00:09:07.320 in fact forEach passes in the current element, 170 00:09:07.320 --> 00:09:11.880 the index and the entire array that we are looping. 171 00:09:11.880 --> 00:09:15.170 And so therefore we can specify them here 172 00:09:15.170 --> 00:09:16.333 in our parameter list. 173 00:09:17.470 --> 00:09:21.333 So let's say index and array, 174 00:09:22.220 --> 00:09:27.000 now of course we can just use one, like we have been doing, 175 00:09:27.000 --> 00:09:28.900 or we can just use two, 176 00:09:28.900 --> 00:09:31.480 or we can use all three together. 177 00:09:31.480 --> 00:09:34.690 And as always the names here do not matter at all, 178 00:09:34.690 --> 00:09:37.830 but what does matter is the order. 179 00:09:37.830 --> 00:09:40.350 So the first parameter always needs to be 180 00:09:40.350 --> 00:09:41.620 the current element, 181 00:09:41.620 --> 00:09:44.680 the second parameter always the current index 182 00:09:44.680 --> 00:09:47.743 and the third one always the entire array 183 00:09:47.743 --> 00:09:50.040 that we are looping over. 184 00:09:50.040 --> 00:09:53.140 Because that's the order in which the arguments, 185 00:09:53.140 --> 00:09:57.393 so the actual values, are passed into our callback function. 186 00:09:58.680 --> 00:09:59.960 Okay. 187 00:09:59.960 --> 00:10:02.500 So now let's just copy this here, 188 00:10:02.500 --> 00:10:06.160 so we can do the same here. 189 00:10:06.160 --> 00:10:09.400 Give it a save, and oh. 190 00:10:09.400 --> 00:10:13.150 Here we called it index and not I. 191 00:10:13.150 --> 00:10:16.563 And in fact in the real world we actually use 192 00:10:16.563 --> 00:10:18.113 shorter names. 193 00:10:19.160 --> 00:10:21.370 So let's just call this one I, 194 00:10:21.370 --> 00:10:23.060 this one R, 195 00:10:23.060 --> 00:10:26.320 and this one here mov. 196 00:10:26.320 --> 00:10:29.920 Which is just a shorter abbreviation of movement. 197 00:10:29.920 --> 00:10:31.870 And so this is quite a common pattern 198 00:10:32.720 --> 00:10:34.443 to just abbreviate a little bit. 199 00:10:35.570 --> 00:10:38.983 So let's replace these three here with mov, 200 00:10:40.580 --> 00:10:42.040 give it a save. 201 00:10:42.040 --> 00:10:44.600 And now it does look the same 202 00:10:44.600 --> 00:10:47.690 as with the for of method. 203 00:10:47.690 --> 00:10:48.870 But I hope you can see 204 00:10:48.870 --> 00:10:51.828 that it's a lot easier to get the current index 205 00:10:51.828 --> 00:10:53.750 here in forEach. 206 00:10:54.910 --> 00:10:58.860 Just notice that the order of the parameters is different 207 00:10:58.860 --> 00:11:01.030 in both these scenarios. 208 00:11:01.030 --> 00:11:05.190 So in forEach the first value here is the current element 209 00:11:05.190 --> 00:11:07.300 and the second one is the index. 210 00:11:07.300 --> 00:11:11.550 While when we use here the entries in the for off loop 211 00:11:11.550 --> 00:11:13.920 then the first element is the index 212 00:11:13.920 --> 00:11:17.380 and the second value is the current array element. 213 00:11:17.380 --> 00:11:21.540 So just don't forget that here in this case. 214 00:11:21.540 --> 00:11:25.823 So always first the current element and then the index. 215 00:11:26.720 --> 00:11:27.710 Okay. 216 00:11:27.710 --> 00:11:30.170 And this is how we loop over arrays 217 00:11:30.170 --> 00:11:32.270 with the forEach method. 218 00:11:32.270 --> 00:11:34.910 Now when should you use forEach 219 00:11:34.910 --> 00:11:37.520 and when should you use the for of loop. 220 00:11:37.520 --> 00:11:39.770 Well one fundamental difference 221 00:11:39.770 --> 00:11:43.401 between the two of them is that you cannot break out 222 00:11:43.401 --> 00:11:45.380 of a forEach loop. 223 00:11:45.380 --> 00:11:47.860 So the continue and break statements 224 00:11:47.860 --> 00:11:51.490 do not work in a forEach loop at all. 225 00:11:51.490 --> 00:11:56.440 So instead, forEach will always loop over the entire array 226 00:11:56.440 --> 00:12:00.230 and there is nothing that you can do about it. 227 00:12:00.230 --> 00:12:03.290 So if you really need to break out of a loop 228 00:12:03.290 --> 00:12:06.380 then you have to keep using the for of loop, 229 00:12:06.380 --> 00:12:07.500 but other than that 230 00:12:07.500 --> 00:12:10.470 it really comes down to your personal preference. 231 00:12:10.470 --> 00:12:13.990 Just like so many other things in JavaScript. 232 00:12:13.990 --> 00:12:16.540 So every programming language always has 233 00:12:16.540 --> 00:12:19.258 many different ways or different tools 234 00:12:19.258 --> 00:12:21.620 to achieve the same thing. 235 00:12:21.620 --> 00:12:23.370 And specially as more things 236 00:12:23.370 --> 00:12:25.630 keep getting added to the language 237 00:12:25.630 --> 00:12:29.060 there will always be more options to achieve the same result 238 00:12:29.900 --> 00:12:34.500 All right, and with this we wrap up this lecture. 239 00:12:34.500 --> 00:12:37.882 SO in my opinion this is a really brilliant 240 00:12:37.882 --> 00:12:39.774 and powerful mechanism, 241 00:12:39.774 --> 00:12:43.250 but I know that it's also rather complex 242 00:12:43.250 --> 00:12:46.490 to wrap your head around this, isn't it? 243 00:12:46.490 --> 00:12:48.960 And it actually took quite some time for me 244 00:12:48.960 --> 00:12:53.700 to fully understand this myself, back in the day. 245 00:12:53.700 --> 00:12:57.490 So please don't become frustrated with this, 246 00:12:57.490 --> 00:13:00.640 it will all become obvious with the practice. 247 00:13:00.640 --> 00:13:04.910 So just keep using this and then you will be fine. 248 00:13:04.910 --> 00:13:07.940 Once you do understand exactly how this works 249 00:13:07.940 --> 00:13:11.500 so specially this mechanism of the callback 250 00:13:11.500 --> 00:13:15.500 and of the passing arguments into this callback here 251 00:13:15.500 --> 00:13:18.760 so once you understand this fundamental mechanism 252 00:13:18.760 --> 00:13:21.160 then working with all other array methods 253 00:13:21.160 --> 00:13:24.200 in this section will become really easy. 254 00:13:24.200 --> 00:13:27.650 Because most of them follow the exact same principle 255 00:13:27.650 --> 00:13:31.950 of the callback function that we just explored here. 256 00:13:31.950 --> 00:13:36.180 So please review this lecture carefully, and yeah. 257 00:13:36.180 --> 00:13:37.370 If you really understand 258 00:13:37.370 --> 00:13:39.363 the role of the callback function here 259 00:13:39.363 --> 00:13:42.630 then just move on to the next video. 260 00:13:42.630 --> 00:13:43.513 See you there.