WEBVTT 1 00:00:01.190 --> 00:00:02.630 So up until now, 2 00:00:02.630 --> 00:00:05.020 we have been using the map filter 3 00:00:05.020 --> 00:00:08.520 and reduce methods kind of in isolation. 4 00:00:08.520 --> 00:00:11.740 However, we can take this one step further 5 00:00:11.740 --> 00:00:15.203 by chaining all these methods one after another. 6 00:00:16.840 --> 00:00:19.940 For example, let's say that we wanted to take 7 00:00:19.940 --> 00:00:22.720 all the movement deposits then convert them 8 00:00:22.720 --> 00:00:27.070 from euros to dollars and finally add them all up, 9 00:00:27.070 --> 00:00:30.340 so that we know exactly how much was deposited 10 00:00:30.340 --> 00:00:33.220 into the account in US dollars. 11 00:00:33.220 --> 00:00:34.570 Okay. 12 00:00:34.570 --> 00:00:35.760 Now we could of course, 13 00:00:35.760 --> 00:00:38.360 do each of these operations individually 14 00:00:38.360 --> 00:00:41.560 and store each result in a new variable. 15 00:00:41.560 --> 00:00:45.060 However, we can also do it all in one go. 16 00:00:45.060 --> 00:00:46.683 So let's do that. 17 00:00:48.700 --> 00:00:51.793 And I will start here with the filter method. 18 00:00:53.200 --> 00:00:58.200 So as I said, we want to take all of the deposits. 19 00:00:58.240 --> 00:01:01.019 So we get the movement here 20 00:01:01.019 --> 00:01:06.019 and then we filter only for movements that are positive. 21 00:01:06.100 --> 00:01:08.990 And so only these are the deposits. 22 00:01:08.990 --> 00:01:10.930 And so the result of this 23 00:01:10.930 --> 00:01:14.070 operation here will be in your array. 24 00:01:14.070 --> 00:01:19.070 And so now we can call map on that array. 25 00:01:19.090 --> 00:01:21.630 So here again, we then get a movement 26 00:01:23.180 --> 00:01:27.330 and now we can convert that movement to US dollars. 27 00:01:27.330 --> 00:01:31.883 So we can do that with that variable that we used before. 28 00:01:32.840 --> 00:01:34.143 Let's see where that is. 29 00:01:36.610 --> 00:01:37.967 So Euro to USD. 30 00:01:43.646 --> 00:01:45.230 So, 31 00:01:45.230 --> 00:01:48.917 movements times Euro to USD. 32 00:01:50.070 --> 00:01:52.050 And so with this we converted 33 00:01:52.050 --> 00:01:55.630 all of the deposits to US dollars, 34 00:01:55.630 --> 00:01:58.110 but now we can take this even further 35 00:01:58.110 --> 00:02:02.060 and on this result, we can also call a reduce. 36 00:02:02.060 --> 00:02:06.880 And of course we could also call more filters or more maps, 37 00:02:06.880 --> 00:02:09.210 but now let's just do a reduce here. 38 00:02:09.210 --> 00:02:12.970 And so basically add all of these values together. 39 00:02:12.970 --> 00:02:15.540 And so we already know how that works. 40 00:02:15.540 --> 00:02:18.703 So accumulator and then the current movement, 41 00:02:19.670 --> 00:02:22.630 and we just need to return accumulator 42 00:02:23.580 --> 00:02:26.190 plus the current movement. 43 00:02:26.190 --> 00:02:30.083 So that's movement and zero. 44 00:02:31.050 --> 00:02:35.480 And so now let's store all of this into total 45 00:02:36.800 --> 00:02:39.993 deposits in US dollar. 46 00:02:42.000 --> 00:02:43.100 Okay. 47 00:02:43.100 --> 00:02:44.940 So you see that we did three data 48 00:02:44.940 --> 00:02:47.483 transformations here all in one go. 49 00:02:48.810 --> 00:02:52.100 So let's log it to the console to see that we 50 00:02:52.100 --> 00:02:53.883 actually get a result here. 51 00:02:54.770 --> 00:02:56.940 And yeah, we do. 52 00:02:56.940 --> 00:02:59.030 So this is the deposits that we did 53 00:02:59.030 --> 00:03:02.440 into our account in US dollars. 54 00:03:02.440 --> 00:03:04.530 And as I mentioned we could of course 55 00:03:04.530 --> 00:03:07.150 chain many other methods here as well, 56 00:03:07.150 --> 00:03:10.510 as long as they return new arrays. 57 00:03:10.510 --> 00:03:13.020 So filter returns a new array. 58 00:03:13.020 --> 00:03:15.857 So we could have added something else here 59 00:03:15.857 --> 00:03:19.160 or the same goes for map, but reduce, 60 00:03:19.160 --> 00:03:22.060 for example, will return a value. 61 00:03:22.060 --> 00:03:24.110 So only this number in this case. 62 00:03:24.110 --> 00:03:27.440 And so of course here we could now not have chained 63 00:03:27.440 --> 00:03:29.870 a map or a filter after this. 64 00:03:29.870 --> 00:03:33.160 So we can only chain a method after another one, 65 00:03:33.160 --> 00:03:36.170 if the first one returns an array. 66 00:03:36.170 --> 00:03:38.220 So you can imagine all of this 67 00:03:38.220 --> 00:03:42.190 as a sort of pipeline that processes our data. 68 00:03:42.190 --> 00:03:45.700 So we put data in at the beginning, which is here, 69 00:03:45.700 --> 00:03:48.660 and then it goes through all these steps. 70 00:03:48.660 --> 00:03:49.493 So in this case, 71 00:03:49.493 --> 00:03:53.340 these three steps here and then in the end our input data 72 00:03:53.340 --> 00:03:57.023 comes out processed on the other side of the pipeline. 73 00:03:57.890 --> 00:04:00.510 So let's just write this here 74 00:04:02.220 --> 00:04:05.883 because I think this is a nice analogy, right? 75 00:04:06.850 --> 00:04:10.240 Now, when we chain all these methods together here, 76 00:04:10.240 --> 00:04:12.811 it can be a little bit hard to debug 77 00:04:12.811 --> 00:04:16.530 if one of the results is not what we expect. 78 00:04:16.530 --> 00:04:17.363 For example, 79 00:04:17.363 --> 00:04:21.210 if this result here would be something really weird, 80 00:04:21.210 --> 00:04:24.430 we wouldn't really know from which step of this pipeline 81 00:04:24.430 --> 00:04:26.700 it would come from, right? 82 00:04:26.700 --> 00:04:27.610 And to solve this, 83 00:04:27.610 --> 00:04:30.150 it would be good to check out the array 84 00:04:30.150 --> 00:04:32.330 in each of these different steps. 85 00:04:32.330 --> 00:04:35.286 So let's say we did a mistake here 86 00:04:35.286 --> 00:04:38.260 and we wrote it like this. 87 00:04:38.260 --> 00:04:41.070 And so our result would come out negative 88 00:04:41.070 --> 00:04:42.890 and that would be strange. 89 00:04:42.890 --> 00:04:45.850 So in this case, it will probably be nice to know 90 00:04:45.850 --> 00:04:49.032 the result of this filter operation. 91 00:04:49.032 --> 00:04:54.032 And so we can do that by using the array parameter 92 00:04:54.120 --> 00:04:57.560 that we get access to in this callback function. 93 00:04:57.560 --> 00:04:58.540 Remember? 94 00:04:58.540 --> 00:05:01.560 So we have the current element, the index, 95 00:05:01.560 --> 00:05:04.230 and the entire array. 96 00:05:04.230 --> 00:05:07.423 And actually let's duplicate this here first. 97 00:05:11.140 --> 00:05:14.443 Okay and set this back to what it was. 98 00:05:18.050 --> 00:05:19.610 Okay. 99 00:05:19.610 --> 00:05:22.550 So that's now locked to the console, this array. 100 00:05:22.550 --> 00:05:24.570 And so now we need these curly braces 101 00:05:24.570 --> 00:05:27.380 because we will have a code block 102 00:05:28.720 --> 00:05:32.563 and we need to actually return our calculation here. 103 00:05:33.870 --> 00:05:35.880 But anyway, we can now take a look 104 00:05:35.880 --> 00:05:38.090 at the whole current array that 105 00:05:38.090 --> 00:05:41.360 this map method here is being called on. 106 00:05:41.360 --> 00:05:43.000 So let's take a look. 107 00:05:43.000 --> 00:05:45.000 And so indeed, it is this array 108 00:05:45.000 --> 00:05:47.363 of the three negative movements. 109 00:05:49.050 --> 00:05:51.713 So let's log the movements here one more time. 110 00:05:54.400 --> 00:05:56.240 So you see that indeed 111 00:05:56.240 --> 00:05:58.880 we get to these three negative movements now. 112 00:05:58.880 --> 00:06:02.400 And so that is the result of this filter here. 113 00:06:02.400 --> 00:06:03.470 And so again, 114 00:06:03.470 --> 00:06:07.110 if we want to see that result of only this operation, 115 00:06:07.110 --> 00:06:08.947 we can check out the current array 116 00:06:08.947 --> 00:06:13.880 and the next array method that has chained on that filter. 117 00:06:13.880 --> 00:06:16.310 And so in this case, it's the map. 118 00:06:16.310 --> 00:06:19.080 And so this is one of the great use cases 119 00:06:19.080 --> 00:06:21.880 of having access to this current array. 120 00:06:21.880 --> 00:06:23.880 Because as you see, of course, 121 00:06:23.880 --> 00:06:27.710 this array has to be the result of the previous operation. 122 00:06:27.710 --> 00:06:29.000 So of this filter. 123 00:06:29.000 --> 00:06:31.360 It is not this initial movement array 124 00:06:32.482 --> 00:06:35.460 because that's not what we called the map method on, 125 00:06:35.460 --> 00:06:36.293 right? 126 00:06:36.293 --> 00:06:37.820 The map method was called on 127 00:06:37.820 --> 00:06:40.710 the result of movements, that filter, 128 00:06:40.710 --> 00:06:44.023 and therefore that is the value here of this array. 129 00:06:44.900 --> 00:06:46.450 That makes sense? 130 00:06:46.450 --> 00:06:49.580 Now it was of course logged here three times 131 00:06:49.580 --> 00:06:53.820 because this callback function here is called three times. 132 00:06:53.820 --> 00:06:56.663 So once for each of these three values. 133 00:06:57.790 --> 00:07:02.430 Okay, so let's put it back to what it was 134 00:07:02.430 --> 00:07:05.020 and now we get to correct array. 135 00:07:05.020 --> 00:07:06.770 This one is now printed five times 136 00:07:06.770 --> 00:07:09.563 because there are five values in the array. 137 00:07:10.960 --> 00:07:14.130 Let's just turn this one off here as well. 138 00:07:14.130 --> 00:07:17.030 And so this was just to show you that we can 139 00:07:17.030 --> 00:07:21.340 inspect the current array at any stage of the pipeline 140 00:07:21.340 --> 00:07:24.513 using the third parameter of the callback function. 141 00:07:25.360 --> 00:07:26.240 All right. 142 00:07:26.240 --> 00:07:29.130 And so now that we know how this chaining works 143 00:07:29.130 --> 00:07:31.503 we can go back to our application here. 144 00:07:33.301 --> 00:07:34.570 Let's give us some more space 145 00:07:34.570 --> 00:07:38.850 and we can now calculate these statistics down here. 146 00:07:38.850 --> 00:07:41.270 So that's all of the deposits. 147 00:07:41.270 --> 00:07:43.400 So incomes here basically. 148 00:07:43.400 --> 00:07:45.240 Then we have the outcomes. 149 00:07:45.240 --> 00:07:47.750 So that's the sum of all the withdrawals 150 00:07:47.750 --> 00:07:51.971 and then also an interest that the bank might pay us. 151 00:07:51.971 --> 00:07:56.033 And so let's go back up here to the application. 152 00:07:57.700 --> 00:08:00.752 And so we already have display movements, 153 00:08:00.752 --> 00:08:02.730 calcDisplayBalance. 154 00:08:02.730 --> 00:08:06.350 And now here I will create another 155 00:08:06.350 --> 00:08:09.337 function called calcDisplaySummary. 156 00:08:16.840 --> 00:08:19.150 And just as our previous function here 157 00:08:19.150 --> 00:08:21.660 to calculate the balance 158 00:08:21.660 --> 00:08:24.783 this one also receives the movements data. 159 00:08:26.190 --> 00:08:28.297 And so we will also call it 160 00:08:28.297 --> 00:08:31.093 with the account one dot movements. 161 00:08:34.559 --> 00:08:38.210 And once again, we will then later change this 162 00:08:38.210 --> 00:08:41.053 to the user that is logging into the application. 163 00:08:43.580 --> 00:08:46.833 Okay, so let's start by calculating the incomes. 164 00:08:47.720 --> 00:08:49.713 So that's this first value here. 165 00:08:51.360 --> 00:08:54.313 And so that's all the movements. 166 00:08:55.641 --> 00:09:00.020 And then we filter them for only the positive ones. 167 00:09:00.020 --> 00:09:03.133 And so this is now exactly what we did before. 168 00:09:05.140 --> 00:09:07.150 So greater than zero. 169 00:09:07.150 --> 00:09:11.340 And now onto this one, we simply chain another reduce 170 00:09:13.170 --> 00:09:15.610 because now we want to add all these 171 00:09:15.610 --> 00:09:17.720 positive numbers together. 172 00:09:17.720 --> 00:09:19.743 So there's no mapping involved here. 173 00:09:22.430 --> 00:09:25.303 It's just filtering and then adding together. 174 00:09:28.690 --> 00:09:31.820 Give it a safe and now we can put it here 175 00:09:31.820 --> 00:09:36.573 inside of this label, so this HTML element. 176 00:09:38.300 --> 00:09:41.183 So it's always a good idea to check out the name of it. 177 00:09:43.210 --> 00:09:47.613 So this one is called summary value in. 178 00:09:49.953 --> 00:09:53.870 So as before I already have that here, 179 00:09:53.870 --> 00:09:57.320 so it's this one and it's called labelSumIn. 180 00:09:57.320 --> 00:10:00.533 We will also then need labelSumOut and labelSumInterest. 181 00:10:02.260 --> 00:10:04.883 So keep these in mind for a bit later. 182 00:10:06.320 --> 00:10:08.350 So here we have 183 00:10:09.889 --> 00:10:10.722 labelSumIn 184 00:10:11.860 --> 00:10:14.573 and then our old text content property. 185 00:10:17.360 --> 00:10:20.240 So incomes and then the Euro sign. 186 00:10:20.240 --> 00:10:22.370 And now I know how it works. 187 00:10:22.370 --> 00:10:24.880 At least on Mac, you can use the emoji picker 188 00:10:25.900 --> 00:10:29.220 and then you just search for a Euro like this. 189 00:10:29.220 --> 00:10:30.590 And here you go. 190 00:10:30.590 --> 00:10:34.230 And I'm sure there is something similar on Windows as well. 191 00:10:34.230 --> 00:10:35.730 Let me actually copy it and put it 192 00:10:35.730 --> 00:10:38.740 also here instead of this Euro, 193 00:10:38.740 --> 00:10:41.873 and to same also here in this movement. 194 00:10:43.400 --> 00:10:45.780 So here where we display all the movements 195 00:10:45.780 --> 00:10:49.523 so that the Euro sign also appears here on all these. 196 00:10:51.450 --> 00:10:54.590 Okay, this should now already be working. 197 00:10:54.590 --> 00:10:59.123 So let's give it a safe, but nothing happened here. 198 00:11:01.110 --> 00:11:05.023 That's because I am calling the wrong function here. 199 00:11:05.920 --> 00:11:07.750 So this has gotta be summary. 200 00:11:07.750 --> 00:11:11.313 So I was calling calcDisplayBalance for a second time. 201 00:11:12.610 --> 00:11:16.113 Now it works, so that's 5,000 Euros. 202 00:11:17.440 --> 00:11:20.160 And you see that also now here we have the Euro sign 203 00:11:20.160 --> 00:11:22.870 which makes it look a little bit more 204 00:11:22.870 --> 00:11:25.053 like a bank application, right? 205 00:11:26.070 --> 00:11:29.480 And now do the same for the outgoing money. 206 00:11:29.480 --> 00:11:34.480 So we're going to calculate a variable called out. 207 00:11:35.100 --> 00:11:36.990 And now I want to leave this one here again 208 00:11:36.990 --> 00:11:38.670 as a challenge for you. 209 00:11:38.670 --> 00:11:40.300 So that's a very simple one. 210 00:11:40.300 --> 00:11:42.600 Just don't look at the rest of the code 211 00:11:42.600 --> 00:11:45.250 and I'm sure you can do this one without any problem. 212 00:11:49.030 --> 00:11:53.453 So that's just movements dot filter. 213 00:11:55.050 --> 00:11:58.163 And so now it's basically just the opposite. 214 00:11:59.240 --> 00:12:01.193 So the negative movements. 215 00:12:12.040 --> 00:12:14.023 Okay, and then labelSumOut, 216 00:12:18.900 --> 00:12:19.903 set to out, 217 00:12:22.215 --> 00:12:24.303 and data did not work. 218 00:12:25.190 --> 00:12:26.643 I see we have an error here. 219 00:12:27.700 --> 00:12:30.583 And so assignment to constant variable. 220 00:12:31.930 --> 00:12:33.030 Oh, I see. 221 00:12:33.030 --> 00:12:37.410 We are forgetting here the text content property. 222 00:12:37.410 --> 00:12:41.750 Maybe you saw that coming and now it works here beautifully. 223 00:12:41.750 --> 00:12:46.449 Okay, now I just want to get rid of this minus sign here. 224 00:12:46.449 --> 00:12:49.360 We already know that the money is going out, 225 00:12:49.360 --> 00:12:53.210 so there's no need for the negative sign. 226 00:12:53.210 --> 00:12:56.190 So let's just take the absolute value here. 227 00:12:56.190 --> 00:12:58.170 So we did that before. 228 00:12:58.170 --> 00:13:03.170 So math dot abs and this is going to remove the sign. 229 00:13:06.430 --> 00:13:07.573 Yeah, beautiful. 230 00:13:08.420 --> 00:13:10.260 Now finally, the interest here. 231 00:13:10.260 --> 00:13:15.240 And so let's say that this bank pays out an interest 232 00:13:15.240 --> 00:13:18.910 each time that there is a deposit to the bank account. 233 00:13:18.910 --> 00:13:23.910 And that interest is 1.2% of the deposited amount. 234 00:13:24.050 --> 00:13:28.183 Unfortunately in the real world, it's nothing like that. 235 00:13:28.183 --> 00:13:31.000 But here in our fictional bank, 236 00:13:31.000 --> 00:13:36.000 we can do whatever rules we want, right? 237 00:13:36.000 --> 00:13:40.190 So as I said, the interest is paid on each deposit. 238 00:13:40.190 --> 00:13:43.240 So first we need to get these deposits. 239 00:13:43.240 --> 00:13:45.200 And so that's this filter here. 240 00:13:45.200 --> 00:13:46.223 Let me just copy it. 241 00:13:48.557 --> 00:13:49.390 Okay. 242 00:13:49.390 --> 00:13:54.390 And so now on each of these deposits, we will receive 1.2%. 243 00:13:54.432 --> 00:13:56.550 So what do we do here? 244 00:13:56.550 --> 00:13:58.500 Well, we're going to create a new array 245 00:13:58.500 --> 00:14:01.270 which contains all of these interests. 246 00:14:01.270 --> 00:14:04.333 And then in the end we can just add them together. 247 00:14:05.550 --> 00:14:07.973 And so map is the way to go here. 248 00:14:10.060 --> 00:14:12.320 So we take the current movement 249 00:14:12.320 --> 00:14:15.120 and we could even call this array a deposit. 250 00:14:15.120 --> 00:14:16.601 Let's do that. 251 00:14:16.601 --> 00:14:19.650 We know that this has to be a deposit. 252 00:14:19.650 --> 00:14:23.290 And so let's call it that to make it a bit more explicit. 253 00:14:23.290 --> 00:14:26.433 We could do the same here, but that's not necessary. 254 00:14:27.320 --> 00:14:28.603 So we get 1.2%. 255 00:14:29.840 --> 00:14:34.840 So we multiply this by 1.2 divided by 100. 256 00:14:36.470 --> 00:14:39.300 So that's how you calculate percentages. 257 00:14:39.300 --> 00:14:41.573 And then finally we just edit all together. 258 00:14:43.870 --> 00:14:46.913 So let's just take this one here, chain it here, 259 00:14:48.609 --> 00:14:50.210 and now each of the current elements 260 00:14:50.210 --> 00:14:52.290 is no longer a movement. 261 00:14:52.290 --> 00:14:56.493 So let me just call it here an interest, so int. 262 00:15:01.150 --> 00:15:06.150 All right, and now let's also just copy this one here. 263 00:15:11.890 --> 00:15:12.840 So labelSumInterest 264 00:15:14.612 --> 00:15:18.195 and then here of course it is the interest. 265 00:15:19.635 --> 00:15:24.635 And you see we got six Euros and 24 cents of interest. 266 00:15:24.710 --> 00:15:27.140 Great, but now let's say that the bank 267 00:15:27.140 --> 00:15:29.320 introduces a new rule. 268 00:15:29.320 --> 00:15:31.610 So now the bank only pays an interest 269 00:15:31.610 --> 00:15:35.060 if that interest is at least one Euro 270 00:15:35.060 --> 00:15:37.190 or whatever other currency. 271 00:15:37.190 --> 00:15:40.720 So where do we put that in our calculation? 272 00:15:40.720 --> 00:15:44.890 So again, only if one interest is at least one 273 00:15:44.890 --> 00:15:48.162 only then it will be added here to this total. 274 00:15:48.162 --> 00:15:51.670 And so this sounds like it's gotta be somewhere 275 00:15:51.670 --> 00:15:54.499 between this place where we actually 276 00:15:54.499 --> 00:15:56.350 calculate the individual interests 277 00:15:56.350 --> 00:15:59.572 and here where we then add them together. 278 00:15:59.572 --> 00:16:03.370 So let's add a new method here in the chain 279 00:16:03.370 --> 00:16:05.780 between the map and the reduce. 280 00:16:05.780 --> 00:16:07.860 And it is going to be a filter 281 00:16:08.940 --> 00:16:11.340 because we basically want to exclude 282 00:16:11.340 --> 00:16:14.590 the interests that are below one. 283 00:16:14.590 --> 00:16:17.680 So this one here is an array of interests. 284 00:16:17.680 --> 00:16:20.250 And actually let's take a look also 285 00:16:20.250 --> 00:16:22.450 at the current array here. 286 00:16:22.450 --> 00:16:26.600 So interests then I, which we're not going to need, 287 00:16:26.600 --> 00:16:27.863 and the whole array. 288 00:16:29.518 --> 00:16:33.110 And so let's log to the console the whole array, 289 00:16:33.110 --> 00:16:35.250 just to see what's happening. 290 00:16:35.250 --> 00:16:38.280 But anyway, what we will have to do here 291 00:16:38.280 --> 00:16:42.927 is to filter the results of culling these interests here 292 00:16:42.927 --> 00:16:46.750 for values that are at least one. 293 00:16:46.750 --> 00:16:50.580 So interests greater or equal one. 294 00:16:50.580 --> 00:16:52.800 And only these interests will make it 295 00:16:52.800 --> 00:16:54.410 into the final calculation. 296 00:16:54.410 --> 00:16:57.120 So into the next step here of the pipeline, 297 00:16:57.120 --> 00:16:58.743 which is this reduce. 298 00:17:00.950 --> 00:17:03.700 So you see that the interest now decreased a little bit 299 00:17:07.700 --> 00:17:09.690 and that's because indeed 300 00:17:09.690 --> 00:17:12.220 here in this array of interests, 301 00:17:12.220 --> 00:17:15.040 we have one value that is below one. 302 00:17:15.040 --> 00:17:19.580 So this 0.84, and therefore it will get filtered out 303 00:17:19.580 --> 00:17:24.340 in this new step that we added here to the processing. 304 00:17:24.340 --> 00:17:26.500 And so then the final interest 305 00:17:26.500 --> 00:17:28.780 that's going to be paid by the bank 306 00:17:28.780 --> 00:17:32.520 is only these other four values added together. 307 00:17:32.520 --> 00:17:35.600 So these three plus this one, 308 00:17:35.600 --> 00:17:37.663 but this one here has been excluded. 309 00:17:39.056 --> 00:17:42.239 All right, that makes sense? 310 00:17:42.239 --> 00:17:44.160 So anyway, 311 00:17:44.160 --> 00:17:49.030 this was another great part here of our bankers application. 312 00:17:49.030 --> 00:17:52.760 So with this, we now also completed this part here. 313 00:17:52.760 --> 00:17:56.550 And hopefully you can start to really appreciate 314 00:17:56.550 --> 00:18:00.310 the huge advantage that working with these array methods 315 00:18:00.310 --> 00:18:04.432 gives us over simply working with more traditional loops. 316 00:18:04.432 --> 00:18:06.780 And now just to finish this lecture, 317 00:18:06.780 --> 00:18:10.970 let me just give you a couple of remarks about chaining. 318 00:18:10.970 --> 00:18:14.160 So first we should not overuse chaining, 319 00:18:14.160 --> 00:18:16.080 so we should try to optimize it 320 00:18:16.080 --> 00:18:19.810 because chaining tons of methods one after the other 321 00:18:19.810 --> 00:18:22.310 can cause a real performance issues 322 00:18:22.310 --> 00:18:25.130 if we have really huge arrays. 323 00:18:25.130 --> 00:18:27.990 So if we have a huge chain of methods, 324 00:18:27.990 --> 00:18:29.900 chained one after the other, 325 00:18:29.900 --> 00:18:33.070 we should try to compress all the functionality 326 00:18:33.070 --> 00:18:37.030 that they do into as little methods as possible. 327 00:18:37.030 --> 00:18:39.430 For example, sometimes we create way more 328 00:18:39.430 --> 00:18:42.050 map methods then we actually need, 329 00:18:42.050 --> 00:18:45.900 where we could just do it all in just one map call. 330 00:18:45.900 --> 00:18:47.950 So when you chain methods like this, 331 00:18:47.950 --> 00:18:50.270 keep looking for opportunities of 332 00:18:50.270 --> 00:18:52.784 keeping up your codes performance. 333 00:18:52.784 --> 00:18:57.010 And second, it is a bad practice in JavaScript 334 00:18:57.010 --> 00:19:01.740 to chain methods that mutate the underlying original array. 335 00:19:01.740 --> 00:19:05.460 And an example of that is the splice method. 336 00:19:05.460 --> 00:19:08.050 So again, you should not chain a method 337 00:19:08.050 --> 00:19:11.830 like the splice or the reverse method. 338 00:19:11.830 --> 00:19:13.800 I mean, you can do that, 339 00:19:13.800 --> 00:19:16.270 and for a small application like this one, 340 00:19:16.270 --> 00:19:19.840 it's not a big deal and it's not going to cause problems, 341 00:19:19.840 --> 00:19:22.060 but in a large scale application, 342 00:19:22.060 --> 00:19:24.530 it's usually always a good practice 343 00:19:24.530 --> 00:19:27.170 to avoid mutating arrays. 344 00:19:27.170 --> 00:19:28.720 And we will come back to this 345 00:19:28.720 --> 00:19:31.983 when we talk a little bit more about functional programming. 346 00:19:32.820 --> 00:19:35.170 Anyway, with that being said there is now 347 00:19:35.170 --> 00:19:37.463 another coding challenge waiting for you.