WEBVTT 1 00:00:01.130 --> 00:00:03.840 Now, before we go to that coding challenge 2 00:00:03.840 --> 00:00:05.550 that I just promised you, 3 00:00:05.550 --> 00:00:08.420 let's actually practice this array methods 4 00:00:08.420 --> 00:00:09.920 a little bit more. 5 00:00:09.920 --> 00:00:14.920 And again, that's because I had many people actually request 6 00:00:15.010 --> 00:00:18.960 yet another practice lecture of these array methods. 7 00:00:18.960 --> 00:00:21.110 And so you asked for it. 8 00:00:21.110 --> 00:00:23.523 And so here goes that lecture. 9 00:00:24.930 --> 00:00:27.820 So again, here you can already see 10 00:00:27.820 --> 00:00:29.560 the next coding challenge, 11 00:00:29.560 --> 00:00:32.880 but let's for now focus a little bit more 12 00:00:32.880 --> 00:00:35.720 on some array exercises. 13 00:00:35.720 --> 00:00:38.360 And of course we're gonna continue working on 14 00:00:38.360 --> 00:00:40.740 or accounts examples. 15 00:00:40.740 --> 00:00:43.180 And the first exercise I wanna do here 16 00:00:43.180 --> 00:00:45.310 is actually a very simple one 17 00:00:45.310 --> 00:00:48.120 in which all we want to do is to calculate 18 00:00:48.120 --> 00:00:51.930 how much has been deposited in total in the bank. 19 00:00:51.930 --> 00:00:55.563 So in all the accounts across the bank. 20 00:00:56.850 --> 00:00:58.440 So let's call that 21 00:01:00.749 --> 00:01:01.999 bankDepositSum. 22 00:01:03.986 --> 00:01:08.153 And so as always let's take our accounts variable, 23 00:01:11.020 --> 00:01:13.110 which is that array which contains 24 00:01:13.110 --> 00:01:16.250 all the four bank account objects. 25 00:01:16.250 --> 00:01:18.690 Now, the first thing that we need to do here, 26 00:01:18.690 --> 00:01:21.230 is to somehow get all these movements 27 00:01:21.230 --> 00:01:23.890 that are in these different objects, 28 00:01:23.890 --> 00:01:25.890 all into one big array 29 00:01:25.890 --> 00:01:29.430 so that we can then from there filter the deposits 30 00:01:29.430 --> 00:01:31.610 and then add them all together. 31 00:01:31.610 --> 00:01:34.020 Just like we have been doing many times 32 00:01:34.020 --> 00:01:35.990 throughout this section. 33 00:01:35.990 --> 00:01:38.170 So let's use the map method here 34 00:01:38.170 --> 00:01:41.420 because we basically want to create a new array 35 00:01:41.420 --> 00:01:43.410 out of the accounts array. 36 00:01:43.410 --> 00:01:45.990 But now we want to create an array 37 00:01:45.990 --> 00:01:48.510 which only has all the movements. 38 00:01:48.510 --> 00:01:52.530 And so, as you know, already whenever we want a new array 39 00:01:52.530 --> 00:01:54.980 with the same length as the previous one 40 00:01:54.980 --> 00:01:56.720 or as the original one, 41 00:01:56.720 --> 00:01:58.663 then we use map. 42 00:01:59.500 --> 00:02:01.850 And our callback function here, again, 43 00:02:01.850 --> 00:02:04.680 each account is called like this 44 00:02:04.680 --> 00:02:09.680 and then all we want to take out is account dot movements. 45 00:02:10.070 --> 00:02:10.910 And let's start 46 00:02:12.500 --> 00:02:15.430 by immediately taking a look here at 47 00:02:16.610 --> 00:02:17.880 this variable 48 00:02:19.470 --> 00:02:21.893 and of course, missing the log here. 49 00:02:23.230 --> 00:02:26.400 And indeed we get an array of arrays 50 00:02:27.260 --> 00:02:29.393 and here are all the different movements. 51 00:02:30.910 --> 00:02:34.350 Now, how do we get all of these values 52 00:02:34.350 --> 00:02:37.950 out of the arrays and into the main arrays? 53 00:02:37.950 --> 00:02:40.370 So whenever we have an array of a arrays, 54 00:02:40.370 --> 00:02:43.070 how can we basically remove all the values 55 00:02:43.070 --> 00:02:44.483 into the parent array? 56 00:02:45.470 --> 00:02:49.977 Well, remember that for that, we can use the flat method. 57 00:02:52.070 --> 00:02:54.290 So just like this. 58 00:02:54.290 --> 00:02:57.260 And now indeed, we got a big array 59 00:02:57.260 --> 00:03:00.740 with all of the movements that we had previously. 60 00:03:00.740 --> 00:03:03.230 However, I hope that you remember 61 00:03:03.230 --> 00:03:07.500 that we can even simplify this here, even further. 62 00:03:07.500 --> 00:03:11.380 So this map and flat, because as it turns out, 63 00:03:11.380 --> 00:03:14.880 it's very common that we want to do these two operations 64 00:03:14.880 --> 00:03:16.470 at the same time. 65 00:03:16.470 --> 00:03:18.950 And so that's the case here. 66 00:03:18.950 --> 00:03:23.180 And so instead of map, we can simply use flatMap like this 67 00:03:25.620 --> 00:03:29.910 so that will apply or a map callback function 68 00:03:29.910 --> 00:03:32.160 and then flattened the result. 69 00:03:32.160 --> 00:03:33.530 And so you will see here 70 00:03:33.530 --> 00:03:36.610 that the result looks exactly the same. 71 00:03:36.610 --> 00:03:40.793 And now all we need to do is to filter for the deposits. 72 00:03:41.970 --> 00:03:45.603 So basically for the positive values. 73 00:03:48.940 --> 00:03:51.670 And so this is nothing new at this point 74 00:03:51.670 --> 00:03:56.160 and the same for now adding them all together. 75 00:03:56.160 --> 00:03:59.040 So we have done that many times before 76 00:04:01.060 --> 00:04:03.530 so that's just write it out here 77 00:04:03.530 --> 00:04:06.093 as we already know how it works. 78 00:04:08.280 --> 00:04:10.550 And here we go. 79 00:04:10.550 --> 00:04:13.973 So the result is 25,180. 80 00:04:15.040 --> 00:04:17.720 And let's say that there are all in the same currency, 81 00:04:17.720 --> 00:04:20.773 so all dollars or all euros. 82 00:04:22.040 --> 00:04:25.730 So this part here was the same as we had done before. 83 00:04:25.730 --> 00:04:29.310 The only trick was really this part here. 84 00:04:29.310 --> 00:04:32.820 So getting all the different movements array 85 00:04:32.820 --> 00:04:34.580 out of the accounts array 86 00:04:34.580 --> 00:04:37.760 and then putting them in one flat array 87 00:04:37.760 --> 00:04:40.943 so that we could then filter and add them all together. 88 00:04:42.220 --> 00:04:45.410 Let me just add here numbers. 89 00:04:45.410 --> 00:04:48.523 So that was exercise number one. 90 00:04:50.680 --> 00:04:53.460 And now in exercise number two, 91 00:04:53.460 --> 00:04:56.410 I want to count how many deposits there have been 92 00:04:56.410 --> 00:05:00.073 in the bank with at least $1,000. 93 00:05:01.570 --> 00:05:04.613 So let's call this here, numDeposits$1000. 94 00:05:09.427 --> 00:05:13.910 And there are actually two ways of doing this. 95 00:05:13.910 --> 00:05:17.840 So I will start with the way that is probably easier. 96 00:05:17.840 --> 00:05:21.220 But then after that, I will actually save the same problem 97 00:05:21.220 --> 00:05:23.730 using the reduce method. 98 00:05:23.730 --> 00:05:27.470 So many people have asked me for advanced use cases 99 00:05:27.470 --> 00:05:29.340 of the reduced method 100 00:05:29.340 --> 00:05:33.380 because it is probably the most difficult of all of them. 101 00:05:33.380 --> 00:05:35.390 And so therefore I want to show you 102 00:05:35.390 --> 00:05:37.853 how we can basically count things, 103 00:05:38.690 --> 00:05:40.190 we're using the reduce method, 104 00:05:42.450 --> 00:05:47.283 but again, let's start with the easier solution here. 105 00:05:48.190 --> 00:05:51.200 And so if we want to count the deposits 106 00:05:51.200 --> 00:05:53.100 basically now we have to do the same thing 107 00:05:53.100 --> 00:05:54.323 as we did here. 108 00:05:55.843 --> 00:05:58.430 So we have to take all of the movements 109 00:05:58.430 --> 00:06:01.133 and put them all into one array. 110 00:06:03.390 --> 00:06:06.420 And let's lock that here already 111 00:06:08.420 --> 00:06:10.143 and here it's accounts. 112 00:06:11.320 --> 00:06:15.350 And so you see, we have a similar result to previously. 113 00:06:15.350 --> 00:06:18.370 And now what we could do here is to filter 114 00:06:18.370 --> 00:06:22.770 for movements greater than a thousand, 115 00:06:22.770 --> 00:06:24.473 like this. 116 00:06:25.550 --> 00:06:29.060 So movement greater than 1000 117 00:06:29.060 --> 00:06:31.060 which leaves us only with these. 118 00:06:31.060 --> 00:06:34.853 And then from that, you can simply take the length. 119 00:06:36.120 --> 00:06:39.600 And so this will then return five. 120 00:06:39.600 --> 00:06:43.930 And indeed this shows us that we get five deposits 121 00:06:43.930 --> 00:06:46.250 over $1,000. 122 00:06:46.250 --> 00:06:50.173 Let's say at least, so greater equal. 123 00:06:51.247 --> 00:06:52.160 All right. 124 00:06:52.160 --> 00:06:54.740 So that was one way of doing it. 125 00:06:54.740 --> 00:06:56.200 Let's comment it out 126 00:06:56.200 --> 00:06:57.980 because as I mentioned before, 127 00:06:57.980 --> 00:06:59.350 I actually want to show you 128 00:06:59.350 --> 00:07:03.530 how we could do the same thing using reduce. 129 00:07:03.530 --> 00:07:05.520 So let's get rid of this part 130 00:07:05.520 --> 00:07:08.763 because the flat map, of course, we still need that. 131 00:07:10.330 --> 00:07:14.473 We still need that array with all the values themselves. 132 00:07:15.530 --> 00:07:18.090 Now, okay, so you're already know 133 00:07:18.090 --> 00:07:21.150 that the callback function of the reduced method 134 00:07:21.150 --> 00:07:24.023 always has as a first parameter, 135 00:07:24.880 --> 00:07:26.850 basically the accumulator. 136 00:07:26.850 --> 00:07:28.750 So that's like the snowball 137 00:07:28.750 --> 00:07:32.330 onto which we want to accumulate a certain value. 138 00:07:32.330 --> 00:07:36.460 So here that is the sum which we started at zero 139 00:07:36.460 --> 00:07:38.520 and then onto that sum, 140 00:07:38.520 --> 00:07:41.580 we keep adding the current element 141 00:07:41.580 --> 00:07:44.590 and then basically in each iteration we returned 142 00:07:45.829 --> 00:07:47.720 the entire new value. 143 00:07:47.720 --> 00:07:51.313 So the previous sum plus the current value. 144 00:07:52.980 --> 00:07:55.430 So again, this year is the accumulator, 145 00:07:55.430 --> 00:07:59.250 which is like the snowball onto which we keep adding 146 00:07:59.250 --> 00:08:02.550 our snow which in this case here was the sum. 147 00:08:02.550 --> 00:08:05.430 But now in this case, our snowball, 148 00:08:05.430 --> 00:08:09.370 so our accumulator will be the number of movements 149 00:08:09.370 --> 00:08:11.163 that are greater than a thousand. 150 00:08:13.543 --> 00:08:15.790 So let's call that the count. 151 00:08:15.790 --> 00:08:18.333 And then here again, the current. 152 00:08:20.240 --> 00:08:22.800 And here we're gonna have the function body. 153 00:08:22.800 --> 00:08:26.640 And again, we will start counting at zero. 154 00:08:26.640 --> 00:08:30.140 So this initial value right here 155 00:08:30.140 --> 00:08:34.060 is just like having any value outside of a loop 156 00:08:34.060 --> 00:08:37.080 where we keep storing a new value. 157 00:08:37.080 --> 00:08:40.910 And that new value might very well be a counter 158 00:08:40.910 --> 00:08:43.970 that we only update on a certain condition 159 00:08:43.970 --> 00:08:46.593 which is exactly what we're gonna do now. 160 00:08:47.660 --> 00:08:51.810 So we will say that whenever the current value 161 00:08:51.810 --> 00:08:56.183 is greater or equal than 1000, 162 00:08:58.060 --> 00:09:02.550 then we want to return the count plus one. 163 00:09:02.550 --> 00:09:06.163 And otherwise we just want to return the count. 164 00:09:07.100 --> 00:09:12.100 So give it a save and here we get our result. 165 00:09:12.600 --> 00:09:16.370 I think it was five previously. 166 00:09:16.370 --> 00:09:20.130 Let's just take a look at the array itself 167 00:09:20.130 --> 00:09:23.900 by simply logging into the console here like this 168 00:09:23.900 --> 00:09:27.460 or we should probably even do this 169 00:09:27.460 --> 00:09:31.290 to actually see the whole array. 170 00:09:31.290 --> 00:09:34.003 And you see that it is indeed six. 171 00:09:35.440 --> 00:09:40.440 So before it was just five because I had it like this. 172 00:09:40.490 --> 00:09:43.520 And so you'll see, there is one movement with a thousand. 173 00:09:43.520 --> 00:09:46.320 And so then it is only five, 174 00:09:46.320 --> 00:09:47.733 but matters here, 175 00:09:48.570 --> 00:09:50.630 and let's get rid of this. 176 00:09:50.630 --> 00:09:54.980 So what matters is that or reduce function here works 177 00:09:54.980 --> 00:09:57.300 so we can even use reduce 178 00:09:57.300 --> 00:10:01.113 to basically simply count something in an array. 179 00:10:02.000 --> 00:10:04.110 So what's important to keep in mind 180 00:10:04.110 --> 00:10:06.890 is that we have this value here outside. 181 00:10:06.890 --> 00:10:09.820 So this accumulator, which we can use 182 00:10:09.820 --> 00:10:14.040 to reduce the array down to anything that we want. 183 00:10:14.040 --> 00:10:16.340 And in this case, it is a counter 184 00:10:16.340 --> 00:10:18.620 but it could really be anything. 185 00:10:18.620 --> 00:10:22.620 And we will actually do something even more sophisticated 186 00:10:22.620 --> 00:10:24.400 in the next example. 187 00:10:24.400 --> 00:10:27.040 But for now I want to bring your attention 188 00:10:27.040 --> 00:10:29.513 to this part here of the code. 189 00:10:30.920 --> 00:10:32.783 So this adding one. 190 00:10:34.390 --> 00:10:38.453 So you know that there is an operator for simply adding one. 191 00:10:39.490 --> 00:10:41.343 So let me duplicate this here. 192 00:10:42.673 --> 00:10:44.600 Then I will comment it out. 193 00:10:44.600 --> 00:10:49.390 And again, you know that we can simply use a plus plus here 194 00:10:49.390 --> 00:10:50.283 like this. 195 00:10:51.680 --> 00:10:56.680 Or at least we think so, because now as I reload, 196 00:10:56.750 --> 00:10:59.590 we are back to this being zero. 197 00:10:59.590 --> 00:11:02.730 So why do you think that is? 198 00:11:02.730 --> 00:11:05.650 Well, there is actually something that I didn't tell you 199 00:11:05.650 --> 00:11:08.120 about the plus plus operator. 200 00:11:08.120 --> 00:11:11.250 And so I thought that this was a good opportunity 201 00:11:11.250 --> 00:11:13.500 to maybe clear that up. 202 00:11:13.500 --> 00:11:14.340 And for that, 203 00:11:14.340 --> 00:11:18.710 let's simply do a very simple example down here. 204 00:11:18.710 --> 00:11:22.113 Let's say, let a equal 10, 205 00:11:24.520 --> 00:11:29.093 then let's log to the console a plus plus. 206 00:11:30.440 --> 00:11:35.440 And so again, you see that a is actually still 10 207 00:11:35.470 --> 00:11:38.870 even though we used this plus plus here. 208 00:11:38.870 --> 00:11:41.110 So why is that? 209 00:11:41.110 --> 00:11:43.090 Well, the plus plus operator 210 00:11:43.090 --> 00:11:45.590 does actually increment the value 211 00:11:45.590 --> 00:11:48.313 but it still returns the previous value. 212 00:11:49.760 --> 00:11:53.960 So if we now log the a again here, you will see that now 213 00:11:53.960 --> 00:11:55.273 it is indeed 11. 214 00:11:56.940 --> 00:12:00.360 So the plus plus operator did its job here. 215 00:12:00.360 --> 00:12:03.550 But the thing is that when we use it like this, 216 00:12:03.550 --> 00:12:07.653 it will still return the all to value, which here was 10. 217 00:12:09.530 --> 00:12:12.580 And so the same thing happened here. 218 00:12:12.580 --> 00:12:14.780 So we did count plus plus 219 00:12:14.780 --> 00:12:18.000 which then increased the value from zero to one. 220 00:12:18.000 --> 00:12:21.930 But the result of this expression here is still zero. 221 00:12:21.930 --> 00:12:25.500 And so zero was returned here to the next iteration. 222 00:12:25.500 --> 00:12:29.130 And therefore in the end we will always have zero. 223 00:12:29.130 --> 00:12:32.150 So like this, it's impossible to increase the value 224 00:12:32.150 --> 00:12:34.903 to one, two, three, four, five, and six. 225 00:12:36.350 --> 00:12:40.030 So this is actually something really important to understand 226 00:12:40.030 --> 00:12:42.240 about the plus plus operator 227 00:12:42.240 --> 00:12:45.380 and which I didn't make really clear before. 228 00:12:45.380 --> 00:12:48.660 Now fortunately for us, there is an easy solution 229 00:12:48.660 --> 00:12:50.850 because we can simply use the so-called 230 00:12:50.850 --> 00:12:53.023 prefixed plus plus operator. 231 00:12:54.150 --> 00:12:57.900 So we can write it before the operand. 232 00:12:57.900 --> 00:13:01.490 So plus plus a, and so now the result of this here 233 00:13:01.490 --> 00:13:03.160 should already be 11. 234 00:13:03.160 --> 00:13:05.063 So both of these should now be 11. 235 00:13:06.600 --> 00:13:09.400 And indeed they are. 236 00:13:09.400 --> 00:13:12.000 And so if we do the same thing here 237 00:13:12.000 --> 00:13:15.950 then that will now finally increment or counter here 238 00:13:15.950 --> 00:13:19.733 and we are back to seeing six as our result here. 239 00:13:20.960 --> 00:13:23.030 So let me keep this one here, actually 240 00:13:25.910 --> 00:13:27.420 just as a reference 241 00:13:27.420 --> 00:13:30.503 again because I didn't talk about this before. 242 00:13:34.230 --> 00:13:36.800 So that was exercise number two. 243 00:13:36.800 --> 00:13:39.860 And now let's go to exercise number three 244 00:13:39.860 --> 00:13:43.000 which will be an even more advanced case 245 00:13:43.000 --> 00:13:45.470 of the reduce method. 246 00:13:45.470 --> 00:13:47.340 And in this one what we're gonna do 247 00:13:47.340 --> 00:13:51.520 is to create a new object instead of just a number 248 00:13:51.520 --> 00:13:53.210 or just a string, 249 00:13:53.210 --> 00:13:55.460 because why not? 250 00:13:55.460 --> 00:13:59.010 So we already know that reduce boils down a array 251 00:13:59.010 --> 00:14:00.840 to just one value. 252 00:14:00.840 --> 00:14:05.160 And so that value might very well be an object. 253 00:14:05.160 --> 00:14:08.360 It could even be a new array as well. 254 00:14:08.360 --> 00:14:12.330 And in fact, we could use reduce to replace many 255 00:14:12.330 --> 00:14:15.030 of the other methods that we have. 256 00:14:15.030 --> 00:14:20.030 So reduce really is like the Swiss knife of array methods. 257 00:14:20.850 --> 00:14:22.623 We could use it for everything. 258 00:14:24.050 --> 00:14:27.440 Okay and with that being said, let's get started 259 00:14:27.440 --> 00:14:32.000 on this exercise of which the goal is to create an object 260 00:14:32.000 --> 00:14:34.760 which contains the sum of the deposits 261 00:14:34.760 --> 00:14:36.970 and of the withdrawals. 262 00:14:36.970 --> 00:14:40.310 So basically we want to calculate these two sums 263 00:14:40.310 --> 00:14:44.433 all at the same time, all in one go using the reduce method. 264 00:14:46.480 --> 00:14:48.520 So let me call this one sums 265 00:14:49.370 --> 00:14:51.883 and then we have to start again this way. 266 00:14:53.160 --> 00:14:57.960 So we need to get all of our movements into just one array. 267 00:14:57.960 --> 00:14:59.383 So I'm just copying that. 268 00:15:00.535 --> 00:15:03.323 And then here comes the reduce method. 269 00:15:04.330 --> 00:15:08.970 So here the first element as always, it's the accumulator 270 00:15:08.970 --> 00:15:11.400 which again, I will just call sums 271 00:15:11.400 --> 00:15:15.113 and then the second one is the current value. 272 00:15:15.970 --> 00:15:18.860 Here we will actually need a function body 273 00:15:18.860 --> 00:15:20.200 to write our code. 274 00:15:20.200 --> 00:15:22.200 And then we need the initial value 275 00:15:22.200 --> 00:15:24.890 of the accumulator as always. 276 00:15:24.890 --> 00:15:26.660 And as I was saying, 277 00:15:26.660 --> 00:15:30.280 the goal of this exercise is to create an object. 278 00:15:30.280 --> 00:15:33.340 And so our starting point then of course also needs 279 00:15:33.340 --> 00:15:34.653 to be an object. 280 00:15:36.750 --> 00:15:40.170 And this could be an empty object just like this 281 00:15:40.170 --> 00:15:44.593 or we could of course also already start filling it. 282 00:15:46.070 --> 00:15:49.830 So let's say that we want to start with deposits of zero 283 00:15:51.140 --> 00:15:53.963 and withdrawals at zero as well. 284 00:15:55.190 --> 00:15:56.023 Okay. 285 00:15:56.023 --> 00:15:57.880 And now here in our function body, 286 00:15:57.880 --> 00:16:00.440 we can simply basically ask 287 00:16:00.440 --> 00:16:05.060 if the current value is a deposit or a withdrawal. 288 00:16:05.060 --> 00:16:08.510 And once again, we do that by checking if the value 289 00:16:08.510 --> 00:16:12.260 is greater or below zero. 290 00:16:12.260 --> 00:16:13.943 So if it's greater than zero, 291 00:16:14.830 --> 00:16:17.980 and here again, using the turnery operator. 292 00:16:17.980 --> 00:16:22.030 So if it is, then we want to add the current value 293 00:16:22.030 --> 00:16:23.750 to the deposits. 294 00:16:23.750 --> 00:16:27.860 So to this value here in our object, right? 295 00:16:27.860 --> 00:16:30.130 Now here in this callback function, 296 00:16:30.130 --> 00:16:33.603 what actually is this object here. 297 00:16:34.440 --> 00:16:39.167 Well, it is simply sums, which is or accumulator, right? 298 00:16:40.130 --> 00:16:43.230 Because this year is always the initial value 299 00:16:43.230 --> 00:16:44.520 of debt accumulator. 300 00:16:44.520 --> 00:16:46.360 So of this variable. 301 00:16:46.360 --> 00:16:49.560 So we can access the deposits on sums 302 00:16:49.560 --> 00:16:54.560 that deposits and we can then add the current value 303 00:16:54.980 --> 00:16:55.853 on to that. 304 00:16:58.060 --> 00:17:01.490 And if not, so if current is below zero 305 00:17:01.490 --> 00:17:06.113 then we can add it to the withdrawals. 306 00:17:12.130 --> 00:17:14.570 Now we're actually not yet done here 307 00:17:14.570 --> 00:17:18.100 because remember that in an array function, 308 00:17:18.100 --> 00:17:20.620 the value is only automatically. 309 00:17:20.620 --> 00:17:24.640 So implicitly returned when we don't have a function body 310 00:17:24.640 --> 00:17:26.120 with curly braces. 311 00:17:26.120 --> 00:17:28.460 But right now we do here. 312 00:17:28.460 --> 00:17:32.150 Right? And so therefore we have to explicitly 313 00:17:32.150 --> 00:17:36.323 so to manually return the accumulator from the function. 314 00:17:37.660 --> 00:17:40.100 So that's how the reduce method works. 315 00:17:40.100 --> 00:17:43.000 We always have to return the accumulator 316 00:17:43.000 --> 00:17:44.670 from each iteration. 317 00:17:44.670 --> 00:17:48.490 Now, usually that happens implicitly like here 318 00:17:48.490 --> 00:17:52.913 but you already know that this here has an implicit return. 319 00:17:55.168 --> 00:17:58.730 But this is easy to forget in these cases. 320 00:17:58.730 --> 00:18:01.540 So that's why I'm emphasizing it here. 321 00:18:01.540 --> 00:18:04.630 So again, we always need to return in the end, 322 00:18:04.630 --> 00:18:06.373 the accumulator. 323 00:18:07.430 --> 00:18:10.463 And so now this should actually already work. 324 00:18:13.200 --> 00:18:14.260 So sums 325 00:18:15.270 --> 00:18:20.270 and indeed we get all the deposits and all the withdrawals 326 00:18:20.290 --> 00:18:22.780 and this value should be the same. 327 00:18:22.780 --> 00:18:24.253 Yeah, as this one here. 328 00:18:25.650 --> 00:18:28.650 But now we calculated it in a different way 329 00:18:28.650 --> 00:18:30.860 and put it directly in an object 330 00:18:30.860 --> 00:18:34.233 by using the reduce method like this. 331 00:18:35.380 --> 00:18:36.960 So that's great. 332 00:18:36.960 --> 00:18:40.600 And let's actually distract this object immediately 333 00:18:41.610 --> 00:18:44.340 so we can do this. 334 00:18:44.340 --> 00:18:47.350 So we need to now use the exact same names as here. 335 00:18:47.350 --> 00:18:51.490 So deposits and withdrawals. 336 00:18:51.490 --> 00:18:55.193 And so here we can now log these two to the console. 337 00:18:58.080 --> 00:19:00.563 And indeed, we now get these two values here. 338 00:19:01.760 --> 00:19:04.150 Now this works just fine already 339 00:19:04.150 --> 00:19:08.010 but I don't really like this part here so much. 340 00:19:08.010 --> 00:19:11.093 So let me just show you another way in which we could do it. 341 00:19:12.160 --> 00:19:14.800 So I'm just commenting it out here. 342 00:19:14.800 --> 00:19:17.730 Maybe you actually like this part here more 343 00:19:17.730 --> 00:19:20.340 but we actually have some duplication here. 344 00:19:20.340 --> 00:19:22.600 And so let's fix that. 345 00:19:22.600 --> 00:19:27.083 So this part here is very similar to this part here. 346 00:19:28.420 --> 00:19:31.893 All that changes is the deposits and the withdrawals. 347 00:19:32.740 --> 00:19:35.163 And so we can actually do this. 348 00:19:36.270 --> 00:19:38.500 So here we can now conditionally say 349 00:19:38.500 --> 00:19:40.870 that we want to select either deposits 350 00:19:40.870 --> 00:19:43.633 or withdrawals based on this condition. 351 00:19:46.680 --> 00:19:50.260 So using here the brackets notation instead 352 00:19:50.260 --> 00:19:52.380 of the dot notation. 353 00:19:52.380 --> 00:19:55.770 So in this case, we will want to get the deposits 354 00:19:57.200 --> 00:20:01.133 and otherwise the withdrawals. 355 00:20:03.840 --> 00:20:07.050 And so then it's onto this value that we want to add 356 00:20:07.050 --> 00:20:08.660 the current one. 357 00:20:08.660 --> 00:20:12.720 And here I probably have some spelling error 358 00:20:14.090 --> 00:20:16.930 and yeah so we get the same result. 359 00:20:16.930 --> 00:20:21.220 But I think that this way here is just a little bit cleaner 360 00:20:21.220 --> 00:20:25.100 but in any way, what matters here is that we were able 361 00:20:25.100 --> 00:20:30.100 to create a brand new object based on the reduced methods. 362 00:20:30.400 --> 00:20:33.660 And this can be really helpful in many situations. 363 00:20:33.660 --> 00:20:37.530 And so please take some time to review this exercise 364 00:20:37.530 --> 00:20:39.910 because this was really a great use case 365 00:20:39.910 --> 00:20:43.700 on how to use something other than a primitive value 366 00:20:43.700 --> 00:20:47.230 as the accumulator of the reduced method. 367 00:20:47.230 --> 00:20:51.093 And I would even challenge you to do this with arrays. 368 00:20:52.360 --> 00:20:55.670 So as a challenge would challenge you to recreate 369 00:20:55.670 --> 00:20:58.520 any of the examples that we did previously 370 00:20:58.520 --> 00:21:02.210 in the section with map filter and reduce 371 00:21:02.210 --> 00:21:05.590 to use only the reduce method. 372 00:21:05.590 --> 00:21:07.530 And that is totally possible. 373 00:21:07.530 --> 00:21:10.830 And so, yeah, you can try that out. 374 00:21:10.830 --> 00:21:15.080 You don't have to, and I will certainly not do that now 375 00:21:15.080 --> 00:21:18.860 but as an exercise and to get an even better understanding 376 00:21:18.860 --> 00:21:23.160 of the reduced method, you could totally do that. 377 00:21:23.160 --> 00:21:26.850 Now, this lecture is already running a bit long 378 00:21:26.850 --> 00:21:29.480 but I still have one more exercise here for you. 379 00:21:29.480 --> 00:21:32.740 So let's quickly do that. 380 00:21:32.740 --> 00:21:35.630 And this one will not have anything to do 381 00:21:35.630 --> 00:21:39.230 with the accounts now, but instead, what I want to do now 382 00:21:39.230 --> 00:21:42.950 is to create a simple function to convert any string 383 00:21:42.950 --> 00:21:45.230 to a title case. 384 00:21:45.230 --> 00:21:48.560 So title case basically means that all the words 385 00:21:48.560 --> 00:21:53.200 in a sentence are capitalized except for some of them. 386 00:21:53.200 --> 00:21:55.450 So there are some exceptions. 387 00:21:55.450 --> 00:21:57.870 Let me try an example here. 388 00:21:57.870 --> 00:22:02.230 So this is a nice title 389 00:22:03.260 --> 00:22:05.700 would be converted to this 390 00:22:05.700 --> 00:22:09.120 is and the a is lowercase. 391 00:22:09.120 --> 00:22:13.523 So this is one of the exceptions and then nice title. 392 00:22:15.900 --> 00:22:17.883 So let's get to work here. 393 00:22:18.970 --> 00:22:21.543 So convert title case, 394 00:22:22.920 --> 00:22:26.560 it's gonna be a function which takes a title 395 00:22:26.560 --> 00:22:27.863 and will then convert it. 396 00:22:28.710 --> 00:22:33.080 And so this is gonna be a nice exercise combining string 397 00:22:33.080 --> 00:22:35.963 and array methods, all in one function. 398 00:22:36.850 --> 00:22:38.250 Let me start by writing 399 00:22:39.230 --> 00:22:42.010 an example of a string here that we might 400 00:22:43.140 --> 00:22:45.033 want to capitalize. 401 00:22:46.320 --> 00:22:50.293 So convert title case, and let's actually try this one. 402 00:22:57.210 --> 00:23:00.380 Let's also try some more, 403 00:23:00.380 --> 00:23:05.380 this is a long title, 404 00:23:05.650 --> 00:23:08.820 but not too long. 405 00:23:08.820 --> 00:23:12.520 So just to see what happens here 406 00:23:12.520 --> 00:23:16.100 and also just to put some of the different exception words 407 00:23:16.100 --> 00:23:17.570 in there 408 00:23:17.570 --> 00:23:18.403 and 409 00:23:20.430 --> 00:23:25.430 is another title with an example 410 00:23:29.550 --> 00:23:31.223 like this. 411 00:23:33.890 --> 00:23:38.223 And so now we can worry about writing our function here. 412 00:23:39.730 --> 00:23:43.000 And let's start by creating an array, 413 00:23:43.000 --> 00:23:45.310 which contains the exceptions. 414 00:23:45.310 --> 00:23:48.330 So the words that should not be capitalized 415 00:23:48.330 --> 00:23:52.053 and the exceptions are a, n, 416 00:23:53.890 --> 00:23:54.723 the, 417 00:23:56.700 --> 00:23:58.360 but 418 00:23:58.360 --> 00:23:59.193 or 419 00:24:00.920 --> 00:24:01.753 on 420 00:24:02.670 --> 00:24:05.320 in and with. 421 00:24:05.320 --> 00:24:08.410 And there might be some other exceptions here 422 00:24:08.410 --> 00:24:10.610 but this is just an example. 423 00:24:10.610 --> 00:24:13.850 Or you can always search for title case on Google 424 00:24:13.850 --> 00:24:17.290 and see the exact rules if you want to make sure 425 00:24:17.290 --> 00:24:18.900 that this really works. 426 00:24:18.900 --> 00:24:20.170 now, right? 427 00:24:20.170 --> 00:24:24.340 And by the way, it is a bit of a common pattern 428 00:24:24.340 --> 00:24:28.080 to create an array of exceptions and then use that 429 00:24:28.080 --> 00:24:30.993 for some computation further down the road. 430 00:24:32.190 --> 00:24:34.570 I've done this myself many times. 431 00:24:34.570 --> 00:24:36.770 That's all keep this technique in mind 432 00:24:38.680 --> 00:24:42.223 but now let's go on to the actual conversion. 433 00:24:43.240 --> 00:24:45.083 So let's call it title case. 434 00:24:47.270 --> 00:24:52.270 And so of course, we must work on this title argument 435 00:24:52.800 --> 00:24:54.350 that comes in. 436 00:24:54.350 --> 00:24:57.500 And so what should be start by doing. 437 00:24:57.500 --> 00:24:59.650 Well, first of all, let's do something 438 00:24:59.650 --> 00:25:03.200 that we should many times do with our input strings, 439 00:25:03.200 --> 00:25:04.720 as I mentioned before 440 00:25:04.720 --> 00:25:08.360 which is to convert them all to lowercase. 441 00:25:08.360 --> 00:25:10.780 And this is especially important in this case 442 00:25:10.780 --> 00:25:14.850 because we are now working with capitalization. 443 00:25:14.850 --> 00:25:17.860 So we will capitalize some of the words. 444 00:25:17.860 --> 00:25:22.560 And so they should of course all be lowercase to start with. 445 00:25:22.560 --> 00:25:27.070 So that's then going to affect like this or this board here. 446 00:25:27.070 --> 00:25:31.560 Then we need to capitalize each word here individually 447 00:25:31.560 --> 00:25:32.520 of course. 448 00:25:32.520 --> 00:25:35.460 And so we need to be able to work individually 449 00:25:35.460 --> 00:25:37.230 on each of the words. 450 00:25:37.230 --> 00:25:40.943 And so whenever that is the case, we need an array. 451 00:25:42.980 --> 00:25:46.280 So we need to split this string into an array 452 00:25:46.280 --> 00:25:49.943 so that these words, which are separated by spaces, 453 00:25:50.870 --> 00:25:54.110 each of them are going to be one of the elements 454 00:25:54.110 --> 00:25:55.053 of the array. 455 00:25:56.220 --> 00:26:00.280 So split and then by the empty string 456 00:26:01.380 --> 00:26:04.123 and then by the space character. 457 00:26:05.794 --> 00:26:08.750 And this is of course far from being done, 458 00:26:08.750 --> 00:26:12.560 but that's none of the less already returned us 459 00:26:12.560 --> 00:26:14.503 just to see if it works. 460 00:26:19.530 --> 00:26:21.543 So this is exactly what we just did. 461 00:26:22.420 --> 00:26:26.160 And so now let's work on these words. 462 00:26:26.160 --> 00:26:29.180 So basically we want to now go through the array 463 00:26:29.180 --> 00:26:31.260 and capitalized each of the words 464 00:26:31.260 --> 00:26:33.883 that is not in the acceptance array. 465 00:26:35.250 --> 00:26:38.740 So here, for example, the a is in the exceptions array. 466 00:26:38.740 --> 00:26:41.370 So we don't want to capitalize this word 467 00:26:41.370 --> 00:26:43.773 but we want to do it for all the ones. 468 00:26:44.650 --> 00:26:46.960 So basically we want a new array 469 00:26:46.960 --> 00:26:49.280 which all of these same words here. 470 00:26:49.280 --> 00:26:54.000 So the same five elements, but some of them capitalized. 471 00:26:54.000 --> 00:26:56.590 And so again, whenever we want a new array 472 00:26:56.590 --> 00:27:00.740 of the same size as before, we use map. 473 00:27:00.740 --> 00:27:05.453 And so now finally, or old friend map comes into play again. 474 00:27:06.500 --> 00:27:09.820 So in this array, each element is a word 475 00:27:09.820 --> 00:27:11.193 so let's call it that. 476 00:27:12.340 --> 00:27:14.923 And so again, we want to capitalize it. 477 00:27:15.912 --> 00:27:19.320 So let's just do it for starters, for all of them. 478 00:27:19.320 --> 00:27:22.440 And remember that one of the techniques to doing that 479 00:27:22.440 --> 00:27:25.440 is to take the first character of the string 480 00:27:26.570 --> 00:27:30.260 so like this and put it to uppercase 481 00:27:32.560 --> 00:27:33.830 like this. 482 00:27:33.830 --> 00:27:37.003 And then we simply add the rest of the string to it. 483 00:27:38.070 --> 00:27:38.903 Remember? 484 00:27:38.903 --> 00:27:40.193 So we did that previously. 485 00:27:41.530 --> 00:27:46.530 And so the rest of the string is basically taking everything 486 00:27:46.870 --> 00:27:49.100 starting at position number one. 487 00:27:49.100 --> 00:27:50.460 So let's check that 488 00:27:51.560 --> 00:27:55.700 and indeed it worked beautifully. 489 00:27:55.700 --> 00:27:59.620 Now, the only problem is that we have these exceptions here. 490 00:27:59.620 --> 00:28:03.140 So we have an a here and a but, 491 00:28:03.140 --> 00:28:06.540 and here is a width. 492 00:28:06.540 --> 00:28:09.670 And so you want to now use the exceptions array 493 00:28:09.670 --> 00:28:10.833 to exclude them. 494 00:28:12.090 --> 00:28:13.453 So how should we do that? 495 00:28:15.020 --> 00:28:18.540 So excluding kind of sounds like filtering maybe 496 00:28:18.540 --> 00:28:20.210 but that's not what we want here 497 00:28:21.070 --> 00:28:24.470 because we still want to keep an array of the same length. 498 00:28:24.470 --> 00:28:29.200 We just don't want to apply this year to all the words. 499 00:28:29.200 --> 00:28:32.560 And so what we're gonna do here is another logic. 500 00:28:32.560 --> 00:28:33.480 So we will do 501 00:28:35.040 --> 00:28:38.550 exceptions and then we are going to check 502 00:28:38.550 --> 00:28:41.850 if the current word is included in that array. 503 00:28:41.850 --> 00:28:45.360 And so for that, we have another array methods 504 00:28:46.490 --> 00:28:49.030 which we studied many times before 505 00:28:49.030 --> 00:28:50.713 which is called includes. 506 00:28:51.690 --> 00:28:53.980 So here we are checking for that word. 507 00:28:53.980 --> 00:28:58.030 And then as you notice, we'll return a boolean. 508 00:28:58.030 --> 00:28:59.800 So true, false. 509 00:28:59.800 --> 00:29:03.120 And then we can use that boolean to basically ask 510 00:29:03.120 --> 00:29:06.010 if the word is an exception or not. 511 00:29:06.010 --> 00:29:10.520 So if the word is indeed included in the exceptions, 512 00:29:10.520 --> 00:29:13.193 then we want to simply return that word. 513 00:29:14.410 --> 00:29:16.850 And only otherwise we want 514 00:29:16.850 --> 00:29:18.963 to then return the capitalized version. 515 00:29:20.380 --> 00:29:24.830 So let's check and indeed that already worked. 516 00:29:24.830 --> 00:29:29.830 So a and but, and down here do you with 517 00:29:29.830 --> 00:29:31.973 are now no longer capitalized. 518 00:29:33.370 --> 00:29:36.300 Let's actually change or fixed that here 519 00:29:40.090 --> 00:29:41.370 exceptions 520 00:29:43.860 --> 00:29:44.713 like this. 521 00:29:45.580 --> 00:29:47.360 So that looks better. 522 00:29:47.360 --> 00:29:50.820 So again, let's go over that logic here. 523 00:29:50.820 --> 00:29:55.580 So if the current word, so for example, this a here 524 00:29:55.580 --> 00:29:59.080 is included in this exceptions array 525 00:29:59.080 --> 00:30:01.920 then simply return that word. 526 00:30:01.920 --> 00:30:04.100 So without any modifications, 527 00:30:04.100 --> 00:30:07.490 but if not, well then capitalize it 528 00:30:07.490 --> 00:30:10.830 according to this rule or just technique here 529 00:30:10.830 --> 00:30:13.980 that I demonstrated earlier. 530 00:30:13.980 --> 00:30:17.450 And so after that, it is actually really easy. 531 00:30:17.450 --> 00:30:21.780 Now, all we have to do is to join the array back 532 00:30:21.780 --> 00:30:25.023 with the space and there we go. 533 00:30:26.210 --> 00:30:27.373 That's actually it. 534 00:30:28.710 --> 00:30:33.710 I noticed that I just forgot one word here, which is and. 535 00:30:33.720 --> 00:30:35.930 So that's also an exception. 536 00:30:35.930 --> 00:30:37.520 Let's give it a save. 537 00:30:37.520 --> 00:30:40.440 And so this creates this weird situation 538 00:30:40.440 --> 00:30:42.750 where the first word of the title 539 00:30:42.750 --> 00:30:44.880 is actually not capitalized. 540 00:30:44.880 --> 00:30:46.830 And of course we don't want that 541 00:30:47.750 --> 00:30:49.750 but that's actually an easy fix. 542 00:30:49.750 --> 00:30:51.700 All we have to do is in the end 543 00:30:52.750 --> 00:30:56.343 then capitalized that entire title case. 544 00:30:59.910 --> 00:31:04.380 So basically doing this here on the final output 545 00:31:04.380 --> 00:31:05.600 that we have here. 546 00:31:05.600 --> 00:31:07.320 But let's not copied this. 547 00:31:07.320 --> 00:31:12.320 Let's instead re-factor this into a standalone function. 548 00:31:13.180 --> 00:31:15.760 Let's put it in here actually 549 00:31:15.760 --> 00:31:19.260 because we don't need this function anywhere else. 550 00:31:19.260 --> 00:31:21.223 So capitalize, 551 00:31:22.610 --> 00:31:23.943 it takes a string. 552 00:31:25.410 --> 00:31:27.200 And then here, instead of words, 553 00:31:27.200 --> 00:31:31.350 we will use string to make it a general function. 554 00:31:31.350 --> 00:31:34.003 And then here we will call it with word. 555 00:31:39.910 --> 00:31:41.750 So everything works the same. 556 00:31:41.750 --> 00:31:44.330 And then as I mentioned earlier 557 00:31:44.330 --> 00:31:46.320 when we returned the title case, 558 00:31:46.320 --> 00:31:49.303 we simply capitalize it again. 559 00:31:50.290 --> 00:31:52.020 So just to make sure that a situation 560 00:31:52.020 --> 00:31:53.853 like this here does not happen. 561 00:31:55.430 --> 00:31:56.640 So title case 562 00:31:57.490 --> 00:31:59.180 and here we go, 563 00:31:59.180 --> 00:32:00.910 problem solved. 564 00:32:00.910 --> 00:32:01.743 Nice. 565 00:32:02.710 --> 00:32:07.340 So I hope that these were four nice examples 566 00:32:07.340 --> 00:32:11.530 for you to practice these array methods even more 567 00:32:11.530 --> 00:32:13.620 so that you are not ready finally 568 00:32:13.620 --> 00:32:17.130 for the final coding challenge of this section. 569 00:32:17.130 --> 00:32:18.923 So let's go there right now.