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.