WEBVTT 1 00:00:01.680 --> 00:00:04.170 JavaScript keeps getting new features 2 00:00:04.170 --> 00:00:08.100 about arrays, and so in ES 2024, 3 00:00:08.100 --> 00:00:10.680 a new feature called array grouping 4 00:00:10.680 --> 00:00:12.870 was added to the language. 5 00:00:12.870 --> 00:00:16.470 Now, array grouping is a very powerful feature, 6 00:00:16.470 --> 00:00:18.450 which as the name says, 7 00:00:18.450 --> 00:00:23.130 allows us to group values in an array based on a condition. 8 00:00:23.130 --> 00:00:24.900 So that sounds a bit confusing, 9 00:00:24.900 --> 00:00:28.053 but let's make it simple in this lecture. 10 00:00:29.940 --> 00:00:34.940 Now first, let's once again check out our movements 11 00:00:35.040 --> 00:00:37.680 so we can actually see what we're doing here, 12 00:00:37.680 --> 00:00:40.650 and so now let's actually group 13 00:00:40.650 --> 00:00:42.300 these different movements here 14 00:00:42.300 --> 00:00:44.820 by whether they are a deposit, 15 00:00:44.820 --> 00:00:48.303 so the positive values here, or a withdrawal. 16 00:00:50.190 --> 00:00:52.900 So we're gonna create a variable here called 17 00:00:54.450 --> 00:00:57.960 grouped movements, 18 00:00:57.960 --> 00:01:01.770 and so now let's do the actual array grouping. 19 00:01:01.770 --> 00:01:06.150 Now, first of all, here we actually do not use a method, 20 00:01:06.150 --> 00:01:09.810 but instead we use this. 21 00:01:09.810 --> 00:01:14.810 So we write object dot group by. 22 00:01:15.060 --> 00:01:17.670 So this is very different from what we did earlier 23 00:01:17.670 --> 00:01:19.890 where all these different array features 24 00:01:19.890 --> 00:01:23.310 were actually methods called on an array. 25 00:01:23.310 --> 00:01:25.680 So here, it's very important to keep in mind 26 00:01:25.680 --> 00:01:30.540 that we do array grouping by doing this object dot group by, 27 00:01:30.540 --> 00:01:33.300 and so this now accepts two parameters. 28 00:01:33.300 --> 00:01:35.130 So it receives two arguments 29 00:01:35.130 --> 00:01:37.953 where the first one is the array that we want to group, 30 00:01:39.030 --> 00:01:41.010 so that's the movements array, 31 00:01:41.010 --> 00:01:44.550 and then the second, we need to pass in a callback function, 32 00:01:44.550 --> 00:01:45.900 which will determine 33 00:01:45.900 --> 00:01:50.400 how exactly we want to group the values in the array. 34 00:01:50.400 --> 00:01:55.320 So basically by what we want the elements to be grouped, 35 00:01:55.320 --> 00:01:56.880 and in order to explain this, 36 00:01:56.880 --> 00:02:00.360 it's actually a bit easier to first, write the callback 37 00:02:00.360 --> 00:02:02.160 and then based on the result, 38 00:02:02.160 --> 00:02:04.083 we will see how this actually works. 39 00:02:05.460 --> 00:02:08.820 So basically this is a callback like all the other ones, 40 00:02:08.820 --> 00:02:11.700 so which basically loops over the array, 41 00:02:11.700 --> 00:02:14.013 and so each of them is a movement, 42 00:02:15.839 --> 00:02:19.470 and so then here we can now create, or group basically. 43 00:02:19.470 --> 00:02:22.470 So we say that if the movement 44 00:02:22.470 --> 00:02:27.333 is greater than zero, this should belong to the deposits, 45 00:02:29.220 --> 00:02:32.880 and so here, we return this string 46 00:02:32.880 --> 00:02:36.903 and otherwise, we return the withdrawals string. 47 00:02:39.510 --> 00:02:44.490 So we'll give this a safe, then lock this to the console, 48 00:02:44.490 --> 00:02:47.430 and again, then this callback 49 00:02:47.430 --> 00:02:49.563 will actually make a bit more sense. 50 00:02:50.610 --> 00:02:52.350 So first of all, note 51 00:02:52.350 --> 00:02:56.490 that we actually get here an object as a result, 52 00:02:56.490 --> 00:03:01.410 and so that's why here it is called object dot group by, 53 00:03:01.410 --> 00:03:05.190 and now this object that was created as the keys 54 00:03:05.190 --> 00:03:09.330 actually has exactly these keys that we created here. 55 00:03:09.330 --> 00:03:13.110 So essentially here, we created the names of the groups, 56 00:03:13.110 --> 00:03:16.140 which should be created in the object 57 00:03:16.140 --> 00:03:17.340 and by which, 58 00:03:17.340 --> 00:03:21.390 all the elements in the original array would be grouped. 59 00:03:21.390 --> 00:03:24.540 So again, let's go through the callback here 60 00:03:24.540 --> 00:03:26.160 and keeping in mind 61 00:03:26.160 --> 00:03:29.130 that basically this will loop over the array, 62 00:03:29.130 --> 00:03:32.517 just like a map method or something like this, 63 00:03:32.517 --> 00:03:36.000 and so then here for each of these elements, 64 00:03:36.000 --> 00:03:39.300 it will return one of these two groups. 65 00:03:39.300 --> 00:03:41.670 So if the movement is greater than zero, 66 00:03:41.670 --> 00:03:44.640 the group it should belong to is the deposits group, 67 00:03:44.640 --> 00:03:49.170 and so then this 200 here will exactly be placed 68 00:03:49.170 --> 00:03:50.730 into the deposits group. 69 00:03:50.730 --> 00:03:55.200 The same for the 450, and then the next one is minus 400, 70 00:03:55.200 --> 00:03:58.500 and so then withdrawals, so this string, 71 00:03:58.500 --> 00:04:02.550 which is then the name of the group will be returned, 72 00:04:02.550 --> 00:04:06.600 and so then the 400 will be placed in that group. 73 00:04:06.600 --> 00:04:10.200 So essentially here in this callback function, 74 00:04:10.200 --> 00:04:12.870 we need to return the different group names 75 00:04:12.870 --> 00:04:16.140 that we want our array to be grouped by, 76 00:04:16.140 --> 00:04:19.170 and then each of the elements of the array 77 00:04:19.170 --> 00:04:22.530 will be correctly grouped into one of the categories 78 00:04:22.530 --> 00:04:25.500 according to our code here. 79 00:04:25.500 --> 00:04:28.020 So it could of course be many more groups 80 00:04:28.020 --> 00:04:29.490 than just these two. 81 00:04:29.490 --> 00:04:33.570 For example, by using one or more if statements, 82 00:04:33.570 --> 00:04:37.500 and let's actually do that next here. 83 00:04:37.500 --> 00:04:42.030 So let's go up here and check out our accounts. 84 00:04:42.030 --> 00:04:43.710 So we have this accounts array 85 00:04:43.710 --> 00:04:47.220 where each of them is this object here, 86 00:04:47.220 --> 00:04:51.120 and each of them has a movements array, 87 00:04:51.120 --> 00:04:52.980 which has different length. 88 00:04:52.980 --> 00:04:54.360 For example, this account here 89 00:04:54.360 --> 00:04:56.970 has only done five movements, 90 00:04:56.970 --> 00:04:59.430 while this one here has like eight, 91 00:04:59.430 --> 00:05:02.160 and this one also like eight or something like that, 92 00:05:02.160 --> 00:05:05.040 and so we can classify these different accounts 93 00:05:05.040 --> 00:05:08.433 by the number of movements that they have made. 94 00:05:10.740 --> 00:05:13.503 So let me just demonstrate what I mean by that. 95 00:05:15.240 --> 00:05:16.210 So let's say 96 00:05:18.060 --> 00:05:18.910 grouped 97 00:05:20.940 --> 00:05:22.920 by activity, 98 00:05:22.920 --> 00:05:25.120 and so let's say object 99 00:05:26.970 --> 00:05:29.100 dot group by, 100 00:05:29.100 --> 00:05:31.440 and I think that with this example, 101 00:05:31.440 --> 00:05:34.650 the way we return the different category names that we want 102 00:05:34.650 --> 00:05:37.020 will become a bit more apparent. 103 00:05:37.020 --> 00:05:39.630 So here this time, 104 00:05:39.630 --> 00:05:43.770 we want to group the accounts array that we just saw, 105 00:05:43.770 --> 00:05:48.423 and in that array, each of the elements is an account, 106 00:05:49.800 --> 00:05:52.740 and so here, let's do a couple of operations. 107 00:05:52.740 --> 00:05:53.573 First of all, 108 00:05:53.573 --> 00:05:57.000 let's determine how many movements there actually were. 109 00:05:57.000 --> 00:06:02.000 So let's say movement count. 110 00:06:02.550 --> 00:06:07.550 So that's then account dot movement dot length, 111 00:06:10.200 --> 00:06:11.790 and so remember the idea here 112 00:06:11.790 --> 00:06:15.030 is to classify these different accounts 113 00:06:15.030 --> 00:06:17.703 by the number of movements that they have made, 114 00:06:18.750 --> 00:06:21.450 so let's, let's do that. 115 00:06:21.450 --> 00:06:23.160 So here of course, 116 00:06:23.160 --> 00:06:26.370 we can then come up with some arbitrary numbers. 117 00:06:26.370 --> 00:06:29.100 So let's say if the movement count 118 00:06:29.100 --> 00:06:33.100 is greater or equal eight, then return 119 00:06:35.220 --> 00:06:37.773 very active. 120 00:06:38.970 --> 00:06:42.570 Let's just copy paste this a few times here. 121 00:06:42.570 --> 00:06:45.540 Then let's say if it's greater or equal than four, 122 00:06:45.540 --> 00:06:48.930 then return just active, 123 00:06:48.930 --> 00:06:50.823 and if it's just one, 124 00:06:51.750 --> 00:06:54.400 then moderate 125 00:06:56.280 --> 00:06:58.200 and otherwise. 126 00:06:58.200 --> 00:07:00.990 So basically, if all of these fail, 127 00:07:00.990 --> 00:07:03.843 then it means that there are no activities at all, 128 00:07:04.710 --> 00:07:08.283 and then this, this account is inactive. 129 00:07:09.600 --> 00:07:13.470 So here, it is very clear that these four, 130 00:07:13.470 --> 00:07:16.410 so this one, this one, this one, and this here 131 00:07:16.410 --> 00:07:20.160 are the four possible groups in our final object, 132 00:07:20.160 --> 00:07:22.590 and each of the accounts will be sorted 133 00:07:22.590 --> 00:07:26.790 into one of the groups based on this condition right here, 134 00:07:26.790 --> 00:07:29.460 so on the code that we wrote there, 135 00:07:29.460 --> 00:07:34.413 and so let's then check the results as always, 136 00:07:37.380 --> 00:07:41.550 and here, we get inactive and then all of them are in there. 137 00:07:41.550 --> 00:07:43.860 Well, that cannot be right 138 00:07:43.860 --> 00:07:48.033 and okay, here it is laying like this. 139 00:07:49.590 --> 00:07:53.013 All right, so we have a few that are very active, 140 00:07:55.050 --> 00:07:57.540 all of these here, 141 00:07:57.540 --> 00:08:02.540 and then we have three that are very active. 142 00:08:02.880 --> 00:08:05.133 So these three have eight movements. 143 00:08:07.560 --> 00:08:10.383 This one has only five movements. 144 00:08:11.280 --> 00:08:14.520 So here, we didn't get a huge variation. 145 00:08:14.520 --> 00:08:17.070 Let's just come here. 146 00:08:17.070 --> 00:08:19.590 Maybe I'm gonna delete all of this here. 147 00:08:19.590 --> 00:08:23.490 So this account should now become inactive, 148 00:08:23.490 --> 00:08:25.860 and indeed, there we have it. 149 00:08:25.860 --> 00:08:29.220 So now this one is categorized as inactive, 150 00:08:29.220 --> 00:08:30.843 this Steven one here. 151 00:08:31.980 --> 00:08:32.940 Let's put it back. 152 00:08:32.940 --> 00:08:37.023 Let's maybe put only two, then it should become moderate, 153 00:08:38.820 --> 00:08:40.263 and yeah, 154 00:08:41.460 --> 00:08:42.990 there it is. 155 00:08:42.990 --> 00:08:47.130 So as you see, there will not be a category here, 156 00:08:47.130 --> 00:08:49.020 so there won't be a group 157 00:08:49.020 --> 00:08:51.450 if none of the elements in the array 158 00:08:51.450 --> 00:08:53.370 can be placed in that group. 159 00:08:53.370 --> 00:08:57.630 So right now there's no inactive group, 160 00:08:57.630 --> 00:09:00.330 and after putting this back to the original, 161 00:09:00.330 --> 00:09:03.903 there are only these two, so very active and active, 162 00:09:05.640 --> 00:09:06.483 okay? 163 00:09:07.590 --> 00:09:10.500 So this here was a very explicit example 164 00:09:10.500 --> 00:09:13.560 of how we can manually create these different groups 165 00:09:13.560 --> 00:09:16.620 and assign each of the elements in the array 166 00:09:16.620 --> 00:09:18.150 to one of these groups, 167 00:09:18.150 --> 00:09:20.940 but now taking it to the next level, 168 00:09:20.940 --> 00:09:23.820 this grouping actually makes even more sense 169 00:09:23.820 --> 00:09:25.470 when used with objects 170 00:09:25.470 --> 00:09:30.000 and then grouping simply by one of the object properties. 171 00:09:30.000 --> 00:09:32.760 So that's gonna be one of the main use cases 172 00:09:32.760 --> 00:09:36.390 that you'll probably use this technique with, 173 00:09:36.390 --> 00:09:38.853 so this object dot group by. 174 00:09:39.780 --> 00:09:44.100 So let's then come back to our accounts array 175 00:09:44.100 --> 00:09:46.590 and let's see how we could categorize this here 176 00:09:46.590 --> 00:09:49.920 by one of these properties. 177 00:09:49.920 --> 00:09:52.680 Well right now, none of them makes a lot of sense 178 00:09:52.680 --> 00:09:55.230 because of course, we want to group these accounts 179 00:09:55.230 --> 00:09:59.340 by some property that is common to multiple accounts. 180 00:09:59.340 --> 00:10:02.310 So if we were just to group these accounts 181 00:10:02.310 --> 00:10:04.500 by their interest rate, for example, 182 00:10:04.500 --> 00:10:07.110 we would just get four different groups, 183 00:10:07.110 --> 00:10:08.850 so this doesn't make a lot of sense. 184 00:10:08.850 --> 00:10:12.060 We need something that multiple accounts here 185 00:10:12.060 --> 00:10:13.620 have actually in common, 186 00:10:13.620 --> 00:10:16.560 and so those are then actual groups. 187 00:10:16.560 --> 00:10:21.560 So instead, let's actually create one property here. 188 00:10:22.170 --> 00:10:23.880 So let's say that these different accounts 189 00:10:23.880 --> 00:10:25.650 can have different types. 190 00:10:25.650 --> 00:10:30.120 For example, let's say premium, standard, or basic. 191 00:10:30.120 --> 00:10:35.120 So premium, then let's just copy this here, 192 00:10:38.760 --> 00:10:39.813 and here, 193 00:10:41.490 --> 00:10:42.420 and here. 194 00:10:42.420 --> 00:10:45.780 So let's say this one is basic, 195 00:10:45.780 --> 00:10:48.753 and this one is standard. 196 00:10:50.820 --> 00:10:53.430 All right, so again, let's just pretend 197 00:10:53.430 --> 00:10:57.180 that we're getting all this data here from some web API, 198 00:10:57.180 --> 00:10:59.460 so from some database for example, 199 00:10:59.460 --> 00:11:02.370 and then we want to very easily categorize, 200 00:11:02.370 --> 00:11:06.813 so group these different accounts simply by their type. 201 00:11:09.360 --> 00:11:12.180 So very common to do something like this. 202 00:11:12.180 --> 00:11:15.390 I mean, not necessarily grouping accounts by types, 203 00:11:15.390 --> 00:11:18.900 but simply taking one property of the objects 204 00:11:18.900 --> 00:11:22.260 and then grouping these different array objects 205 00:11:22.260 --> 00:11:25.560 into these different groups based on that. 206 00:11:25.560 --> 00:11:26.880 So this will make more sense 207 00:11:26.880 --> 00:11:28.950 once we actually write the code. 208 00:11:28.950 --> 00:11:32.673 So let's say grouped accounts, 209 00:11:36.600 --> 00:11:41.353 and then once again, object dot group by, 210 00:11:43.470 --> 00:11:47.190 then the accounts again, 211 00:11:47.190 --> 00:11:48.960 and so then the callback function, 212 00:11:48.960 --> 00:11:51.630 and here, each of them is an account 213 00:11:51.630 --> 00:11:55.983 and we want to group by account dot type. 214 00:11:56.940 --> 00:11:58.113 So let's check this. 215 00:12:00.990 --> 00:12:02.410 Grouped by accounts 216 00:12:03.330 --> 00:12:05.190 and beautiful, 217 00:12:05.190 --> 00:12:07.500 there we have our group names, 218 00:12:07.500 --> 00:12:10.410 which in this case, are actually coming directly 219 00:12:10.410 --> 00:12:14.190 from the type property of the objects in the arrays, 220 00:12:14.190 --> 00:12:15.810 and as I mentioned earlier, 221 00:12:15.810 --> 00:12:20.460 this is actually a pretty common use case of array grouping. 222 00:12:20.460 --> 00:12:22.830 So these two are our premiums. 223 00:12:22.830 --> 00:12:26.310 Then we have one standard and one basic, 224 00:12:26.310 --> 00:12:28.710 and here, just to simplify this even further, 225 00:12:28.710 --> 00:12:32.430 which is a syntax that you will see many times, 226 00:12:32.430 --> 00:12:36.480 just copy paste this just so you have both of them, 227 00:12:36.480 --> 00:12:39.390 is to immediately de-structure the type 228 00:12:39.390 --> 00:12:40.623 out of the account here. 229 00:12:41.700 --> 00:12:42.533 So 230 00:12:45.330 --> 00:12:47.940 basically just like this, 231 00:12:47.940 --> 00:12:51.150 and then here we of course need the parenthesis, 232 00:12:51.150 --> 00:12:54.630 otherwise, this destructing doesn't work, 233 00:12:54.630 --> 00:12:55.770 and beautiful. 234 00:12:55.770 --> 00:12:57.600 Here we get the same result, 235 00:12:57.600 --> 00:13:00.900 but with this even nicer syntax here, 236 00:13:00.900 --> 00:13:03.480 where we have to type even less. 237 00:13:03.480 --> 00:13:04.380 Great. 238 00:13:04.380 --> 00:13:08.340 So array grouping really is an amazing new addition 239 00:13:08.340 --> 00:13:10.020 to the JavaScript language, 240 00:13:10.020 --> 00:13:12.870 and the possibilities here are really endless, 241 00:13:12.870 --> 00:13:16.650 as I'm sure you can see just by these three examples, 242 00:13:16.650 --> 00:13:20.160 and I'm sure that you'll actually find many ways 243 00:13:20.160 --> 00:13:23.100 of using this in your own project in the future, 244 00:13:23.100 --> 00:13:25.983 so always keep this array grouping in mind.