WEBVTT 1 00:00:01.260 --> 00:00:03.540 Just like in other sections, 2 00:00:03.540 --> 00:00:06.780 let's finish this one with a bigger challenge, 3 00:00:06.780 --> 00:00:08.370 so that you can bring together 4 00:00:08.370 --> 00:00:10.830 everything that you've learned about arrays 5 00:00:10.830 --> 00:00:12.423 throughout this section. 6 00:00:13.590 --> 00:00:15.210 And, as you're about to see, 7 00:00:15.210 --> 00:00:19.260 this is probably the biggest challenge in the course so far, 8 00:00:19.260 --> 00:00:20.730 but that's for a reason, 9 00:00:20.730 --> 00:00:24.090 because array methods, and arrays in general, 10 00:00:24.090 --> 00:00:27.810 are so important that it's really worth spending some time 11 00:00:27.810 --> 00:00:30.903 on practicing your new array skills here. 12 00:00:31.890 --> 00:00:33.780 But anyway, in this challenge, 13 00:00:33.780 --> 00:00:35.880 we are still studying dogs. 14 00:00:35.880 --> 00:00:37.680 And this time around, 15 00:00:37.680 --> 00:00:40.410 Julia and Kate are trying to figure out 16 00:00:40.410 --> 00:00:44.880 whether dogs are eating too much or too little food. 17 00:00:44.880 --> 00:00:45.713 Now, once again, 18 00:00:45.713 --> 00:00:48.750 I'm not gonna read all of these instructions here. 19 00:00:48.750 --> 00:00:51.330 But first, before the tasks, 20 00:00:51.330 --> 00:00:54.240 you have some formula here 21 00:00:54.240 --> 00:00:56.970 for the recommended food amount, 22 00:00:56.970 --> 00:00:59.250 then here, you have some more considerations, 23 00:00:59.250 --> 00:01:02.550 and then, finally, these tasks here. 24 00:01:02.550 --> 00:01:06.840 So it's these 10 tasks, and then some hints, 25 00:01:06.840 --> 00:01:10.200 and then, as always, the test data down here. 26 00:01:10.200 --> 00:01:12.210 Now, just for the first one here, 27 00:01:12.210 --> 00:01:13.590 it's important to note 28 00:01:13.590 --> 00:01:16.560 that we actually never did something similar 29 00:01:16.560 --> 00:01:19.020 to what you have to do in this first task, 30 00:01:19.020 --> 00:01:23.040 which is to loop over the array of objects down there 31 00:01:23.040 --> 00:01:24.390 that I just showed you, 32 00:01:24.390 --> 00:01:26.730 and do some operation on these objects, 33 00:01:26.730 --> 00:01:29.190 but without creating a new array. 34 00:01:29.190 --> 00:01:31.800 So again, just looping over the array, 35 00:01:31.800 --> 00:01:34.290 but without doing any work. 36 00:01:34.290 --> 00:01:37.680 So you need to figure out which of the array methods 37 00:01:37.680 --> 00:01:39.417 is the best one to do this, 38 00:01:39.417 --> 00:01:42.810 and then, well, just use that method. 39 00:01:42.810 --> 00:01:44.970 So maybe you can use that summary lecture 40 00:01:44.970 --> 00:01:48.960 in order to find that out, all right? 41 00:01:48.960 --> 00:01:51.090 And then, you can just read for yourself 42 00:01:51.090 --> 00:01:53.790 what you need to do in these different tasks. 43 00:01:53.790 --> 00:01:55.350 And, just like before, 44 00:01:55.350 --> 00:01:59.430 if you want the written version of all of these tasks 45 00:01:59.430 --> 00:02:01.650 plus this test data here, 46 00:02:01.650 --> 00:02:05.520 then please make sure to go to the final version of the code 47 00:02:05.520 --> 00:02:06.630 of this section. 48 00:02:06.630 --> 00:02:09.003 So there, you will have all of this. 49 00:02:10.140 --> 00:02:12.160 But I can also just like 50 00:02:13.080 --> 00:02:15.900 keep the cursor here a little bit, 51 00:02:15.900 --> 00:02:18.150 so you can then pause the video here, 52 00:02:18.150 --> 00:02:22.530 then you can read the first few tasks, and complete them, 53 00:02:22.530 --> 00:02:27.530 and then in the end, you can move down here to see the rest. 54 00:02:27.810 --> 00:02:30.060 So do it however suits you best. 55 00:02:30.060 --> 00:02:33.030 But in any case, I see you back here in some time 56 00:02:33.030 --> 00:02:35.493 once you are done with the challenge. 57 00:02:38.280 --> 00:02:41.250 All right, good to see you back here. 58 00:02:41.250 --> 00:02:43.650 And so let's get to work 59 00:02:43.650 --> 00:02:47.130 solving these tasks here one by one. 60 00:02:47.130 --> 00:02:52.130 So number one was to loop over the array of the dog objects, 61 00:02:52.350 --> 00:02:53.610 and then, for each of them, 62 00:02:53.610 --> 00:02:56.130 actually calculate the recommended portion 63 00:02:56.130 --> 00:02:58.680 using that formula in the beginning. 64 00:02:58.680 --> 00:03:00.360 But remember, we need to do this 65 00:03:00.360 --> 00:03:02.310 without creating a new array, 66 00:03:02.310 --> 00:03:06.240 but instead just performing some work on the dogs array. 67 00:03:06.240 --> 00:03:09.090 And so, for this, all we need to do is 68 00:03:09.090 --> 00:03:11.880 to use the forEach method. 69 00:03:11.880 --> 00:03:14.163 So let's grab this test data, 70 00:03:16.080 --> 00:03:18.420 and paste that down here. 71 00:03:18.420 --> 00:03:21.900 And so, basically, what we're gonna do is 72 00:03:21.900 --> 00:03:26.550 to just loop over this dogs array 73 00:03:26.550 --> 00:03:28.290 using the forEach method, 74 00:03:28.290 --> 00:03:30.420 and then mutate this array, 75 00:03:30.420 --> 00:03:34.110 adding the recommended food to each of these items here 76 00:03:34.110 --> 00:03:36.180 directly into this array, 77 00:03:36.180 --> 00:03:38.910 so, again, without creating a new one. 78 00:03:38.910 --> 00:03:42.180 So here each element is a dog. 79 00:03:42.180 --> 00:03:44.340 And so here comes the special part. 80 00:03:44.340 --> 00:03:46.410 Now we want to take this object, 81 00:03:46.410 --> 00:03:49.917 so each dog is indeed one object like this, 82 00:03:49.917 --> 00:03:53.790 and then we just want to add a new property to it. 83 00:03:53.790 --> 00:03:56.550 So this is basically the trick 84 00:03:56.550 --> 00:03:59.100 to solve this task number one. 85 00:03:59.100 --> 00:04:01.380 So basically just grabbing the current object, 86 00:04:01.380 --> 00:04:03.720 then adding a property 87 00:04:03.720 --> 00:04:04.863 called recFood, 88 00:04:07.388 --> 00:04:10.103 and then we just need to calculate that value. 89 00:04:10.980 --> 00:04:14.940 So let's do dog.weight, 90 00:04:14.940 --> 00:04:19.940 and then to the power of 0.75, 91 00:04:20.190 --> 00:04:24.183 and then multiply the whole thing by 28. 92 00:04:25.830 --> 00:04:28.200 All right, let's see what we got. 93 00:04:28.200 --> 00:04:32.070 So we just log to the console, again, 94 00:04:32.070 --> 00:04:35.067 our original dogs array, 95 00:04:35.067 --> 00:04:38.160 and then, on there, each of them should now have 96 00:04:38.160 --> 00:04:39.330 this new value. 97 00:04:39.330 --> 00:04:41.850 And beautiful, there it is. 98 00:04:41.850 --> 00:04:43.833 Let's just round this number here. 99 00:04:45.030 --> 00:04:46.893 Let's maybe round it down. 100 00:04:47.760 --> 00:04:52.443 So Math.floor, 101 00:04:53.850 --> 00:04:57.600 and that looks a bit nicer and cleaner, okay? 102 00:04:57.600 --> 00:05:01.920 Now task number two is to search, or to find, 103 00:05:01.920 --> 00:05:03.900 the dog that belongs to Sarah, 104 00:05:03.900 --> 00:05:05.310 and then log to the console 105 00:05:05.310 --> 00:05:08.970 whether this dog is eating too much or too little. 106 00:05:08.970 --> 00:05:11.250 Now the tricky part here is 107 00:05:11.250 --> 00:05:13.560 that the owner is not simply a string, 108 00:05:13.560 --> 00:05:16.980 but instead it is this array of owners. 109 00:05:16.980 --> 00:05:21.270 So basically we want to now find this dog object right here, 110 00:05:21.270 --> 00:05:25.323 because this one is the one where the owners include Sarah. 111 00:05:26.220 --> 00:05:27.930 Actually, in the previous challenge, 112 00:05:27.930 --> 00:05:29.430 we did something similar, 113 00:05:29.430 --> 00:05:32.163 so maybe you still remember how to do that. 114 00:05:33.450 --> 00:05:38.100 So let's create a variable called dogSarah, 115 00:05:38.100 --> 00:05:41.580 or could call it sarahsDog also. 116 00:05:41.580 --> 00:05:45.633 And so that's dogs.find, 117 00:05:47.610 --> 00:05:49.170 and then we want the dog 118 00:05:49.170 --> 00:05:51.940 where dog.owners 119 00:05:53.190 --> 00:05:56.223 includes Sarah. 120 00:05:57.960 --> 00:06:02.703 And then let's check out if we got the correct one. 121 00:06:03.653 --> 00:06:05.823 dogSarah, like this, 122 00:06:06.750 --> 00:06:09.420 and indeed, there it is. 123 00:06:09.420 --> 00:06:11.580 And so now all we have to do is to check 124 00:06:11.580 --> 00:06:16.020 whether the recommended food is more or less 125 00:06:16.020 --> 00:06:17.430 than the current food. 126 00:06:17.430 --> 00:06:19.260 So that should be pretty easy. 127 00:06:19.260 --> 00:06:21.933 So let's just write a string like this, 128 00:06:22.950 --> 00:06:27.303 Sarah's dog eats, 129 00:06:28.200 --> 00:06:31.173 and then, here, we will have either too much or too little. 130 00:06:32.400 --> 00:06:35.970 So we can use a template literal here. 131 00:06:35.970 --> 00:06:37.148 So that's what we're doing. 132 00:06:37.148 --> 00:06:39.570 And then, here, we're just gonna have a ternary operator 133 00:06:39.570 --> 00:06:41.400 which will compare the current food 134 00:06:41.400 --> 00:06:43.800 with the recommended food. 135 00:06:43.800 --> 00:06:46.053 So dogSarah.curFood, 136 00:06:49.650 --> 00:06:51.930 if it's greater than the recommended food, 137 00:06:51.930 --> 00:06:53.430 then we will say too much, 138 00:06:53.430 --> 00:06:55.143 and otherwise, too little. 139 00:06:56.190 --> 00:07:00.810 So let's do that, dogSarah.recFood, 140 00:07:00.810 --> 00:07:02.670 so this is the recommended food portion 141 00:07:02.670 --> 00:07:06.060 that we just calculated in the first step. 142 00:07:06.060 --> 00:07:09.960 So without that first step, the whole challenge falls apart. 143 00:07:09.960 --> 00:07:11.343 You can't do anything then. 144 00:07:12.390 --> 00:07:14.880 So in this case, here, we're gonna output much, 145 00:07:14.880 --> 00:07:17.643 and otherwise, little. 146 00:07:20.520 --> 00:07:22.890 All right, let's just check this. 147 00:07:22.890 --> 00:07:25.170 I think it was this one right here. 148 00:07:25.170 --> 00:07:29.520 And yeah, so currently it's eating 275, 149 00:07:29.520 --> 00:07:31.470 and so that's definitely too much. 150 00:07:31.470 --> 00:07:33.723 It's way much than the recommended portion. 151 00:07:34.800 --> 00:07:39.420 Next up, our task is to create an array of all the owners 152 00:07:39.420 --> 00:07:43.143 of the dogs that eat too much and that eat too little. 153 00:07:44.220 --> 00:07:46.530 So that shouldn't be all too hard. 154 00:07:46.530 --> 00:07:47.763 ownersTooMuch, 155 00:07:52.800 --> 00:07:55.290 so we want to grab all the dogs, 156 00:07:55.290 --> 00:07:58.590 and then just filter by the ones that are easing, 157 00:07:58.590 --> 00:08:01.560 or eating, actually, too much. 158 00:08:01.560 --> 00:08:03.570 So dog, 159 00:08:03.570 --> 00:08:05.747 and then dog.curFood 160 00:08:07.290 --> 00:08:10.450 is more than dog.recFood. 161 00:08:12.180 --> 00:08:14.850 And then here we want to grab the owners, 162 00:08:14.850 --> 00:08:16.410 so that's a map, 163 00:08:16.410 --> 00:08:19.307 and then dog.owners. 164 00:08:23.490 --> 00:08:27.323 So console.log, ownersTooMuch, 165 00:08:29.220 --> 00:08:33.450 and okay, that's looking good already. 166 00:08:33.450 --> 00:08:37.710 But what we want is just one array with all of these owners, 167 00:08:37.710 --> 00:08:39.510 so not an array of arrays, 168 00:08:39.510 --> 00:08:42.960 and so, for that, we can use the flat method, 169 00:08:42.960 --> 00:08:46.440 or we can just use flatMap to do it all in one go. 170 00:08:46.440 --> 00:08:47.283 So flatMap, 171 00:08:48.810 --> 00:08:51.633 and this will give us the correct answer. 172 00:08:52.470 --> 00:08:54.550 Beautiful, and now just the same thing 173 00:08:55.920 --> 00:08:58.563 with the ones that are eating too little. 174 00:08:59.430 --> 00:09:01.230 So just duplicating the whole thing. 175 00:09:02.700 --> 00:09:05.970 Here, we just need to invert the sign, 176 00:09:05.970 --> 00:09:07.557 and then TooLittle, 177 00:09:11.760 --> 00:09:13.290 and there we go. 178 00:09:13.290 --> 00:09:16.230 And to make this output here look a little bit nicer, 179 00:09:16.230 --> 00:09:18.480 we have our task four, 180 00:09:18.480 --> 00:09:22.263 where the only goal is to log to the console a nice string. 181 00:09:23.130 --> 00:09:25.350 So which, basically, joins all of these names 182 00:09:25.350 --> 00:09:26.490 into one string. 183 00:09:26.490 --> 00:09:28.530 So that's exactly what we're gonna do. 184 00:09:28.530 --> 00:09:31.260 So we're gonna log a template literal again, 185 00:09:31.260 --> 00:09:35.940 and then here we just take these that we just created, 186 00:09:35.940 --> 00:09:37.080 so these arrays, 187 00:09:37.080 --> 00:09:40.110 and then we use the join method. 188 00:09:40.110 --> 00:09:43.560 And, again, hopefully you used that summary lecture, 189 00:09:43.560 --> 00:09:44.910 which told you exactly that 190 00:09:44.910 --> 00:09:47.970 if you want a string out of an array, 191 00:09:47.970 --> 00:09:49.890 then you can use the join method. 192 00:09:49.890 --> 00:09:53.073 So that's exactly the tool that we're reaching for here. 193 00:09:53.940 --> 00:09:58.860 So here, we then need to specify the separator. 194 00:09:58.860 --> 00:10:03.660 So let's just start with the, so just the space, 195 00:10:03.660 --> 00:10:04.493 and then here 196 00:10:05.340 --> 00:10:09.930 dogs are eating too much. 197 00:10:11.010 --> 00:10:13.170 Let's just see how this looks in the console. 198 00:10:13.170 --> 00:10:15.990 And then Matilda, Sarah, John, Leo's dogs 199 00:10:15.990 --> 00:10:17.220 are eating too much. 200 00:10:17.220 --> 00:10:19.110 So here, I think in the task, 201 00:10:19.110 --> 00:10:22.560 it says that there should be like an and in the middle. 202 00:10:22.560 --> 00:10:25.170 And so that's very simple. 203 00:10:25.170 --> 00:10:26.403 We just do it like this. 204 00:10:27.930 --> 00:10:30.570 So this looks more like a real sentence here, 205 00:10:30.570 --> 00:10:32.070 even though maybe it should be commas here, 206 00:10:32.070 --> 00:10:34.740 like Matilda, then comma, Sarah, and so on. 207 00:10:34.740 --> 00:10:36.630 And then the last one should be and Leo, 208 00:10:36.630 --> 00:10:38.370 but that's a bit too much work, 209 00:10:38.370 --> 00:10:41.610 and you can do that if you want, 210 00:10:41.610 --> 00:10:43.560 but I'm just gonna keep it simple here, 211 00:10:45.720 --> 00:10:50.463 and do the other one as well, of course, and nice. 212 00:10:51.330 --> 00:10:54.420 Moving on, for task number five, 213 00:10:54.420 --> 00:10:56.580 what we need to do is to log to the console 214 00:10:56.580 --> 00:10:58.710 whether there is any dog that is eating 215 00:10:58.710 --> 00:11:02.730 exactly the amount of food that is recommended. 216 00:11:02.730 --> 00:11:04.350 So as I mentioned earlier, 217 00:11:04.350 --> 00:11:06.690 whenever you see this word any, 218 00:11:06.690 --> 00:11:11.670 so when what you need to do somehow includes the part any, 219 00:11:11.670 --> 00:11:14.640 so you want to just find any occurrence 220 00:11:14.640 --> 00:11:16.920 for which a certain condition is true, 221 00:11:16.920 --> 00:11:19.773 then you probably need the some method. 222 00:11:21.000 --> 00:11:24.240 So all we want to do is to log a true or false. 223 00:11:24.240 --> 00:11:26.820 So let's not even create a variable here, 224 00:11:26.820 --> 00:11:29.940 we just log it, or we just create that code 225 00:11:29.940 --> 00:11:31.323 right here inside the log. 226 00:11:32.430 --> 00:11:33.900 So we just take our dogs, 227 00:11:33.900 --> 00:11:37.950 and then, as I just mentioned, we just use the some method. 228 00:11:37.950 --> 00:11:40.530 And I explained many times already how it works, 229 00:11:40.530 --> 00:11:42.873 so I'm not gonna go deep into it here again. 230 00:11:44.070 --> 00:11:48.360 So just need to specify now a boolean here, 231 00:11:48.360 --> 00:11:50.070 so a condition, 232 00:11:50.070 --> 00:11:54.273 and so here we're looking at the dog, 233 00:11:56.010 --> 00:11:57.360 the current food portion, 234 00:11:57.360 --> 00:12:00.930 and then we want to check whether it is equal, 235 00:12:00.930 --> 00:12:04.680 so exactly equal, to the recommended amount. 236 00:12:04.680 --> 00:12:07.500 And so if there is only one of the dogs 237 00:12:07.500 --> 00:12:08.940 for which this is true, 238 00:12:08.940 --> 00:12:10.890 then the whole thing will become true. 239 00:12:10.890 --> 00:12:14.160 So the result of the some method will then be true. 240 00:12:14.160 --> 00:12:16.980 So in a way, this is like a big OR operator 241 00:12:16.980 --> 00:12:19.500 for all the elements in the array. 242 00:12:19.500 --> 00:12:24.500 So dog.recFood, and then let's see. 243 00:12:24.990 --> 00:12:26.610 And true. 244 00:12:26.610 --> 00:12:28.833 So let's just manually verify that. 245 00:12:30.300 --> 00:12:34.950 And indeed, here we have one dog in that condition. 246 00:12:34.950 --> 00:12:37.680 So this one here, the current food is 244, 247 00:12:37.680 --> 00:12:41.190 and that's exactly the same as the recommended food. 248 00:12:41.190 --> 00:12:42.450 Now if you wanted to check 249 00:12:42.450 --> 00:12:45.180 whether all of the dogs are in this condition, 250 00:12:45.180 --> 00:12:47.700 so where these two values are the same, 251 00:12:47.700 --> 00:12:52.530 then we would use the every method. 252 00:12:52.530 --> 00:12:55.500 And so then, of course, we would get false here. 253 00:12:55.500 --> 00:13:00.243 But the task was just to do the calculation for one of them. 254 00:13:01.110 --> 00:13:03.660 Next up, we need to log to the console 255 00:13:03.660 --> 00:13:07.980 whether all of the dogs are eating an okay amount of food, 256 00:13:07.980 --> 00:13:10.770 so not the exact same amount, 257 00:13:10.770 --> 00:13:13.740 so not where the current food is exactly the same 258 00:13:13.740 --> 00:13:15.270 as the recommended food, 259 00:13:15.270 --> 00:13:18.240 because that's actually pretty unlikely. 260 00:13:18.240 --> 00:13:21.723 And so, here, we're looking for the okay amount of food. 261 00:13:22.740 --> 00:13:27.740 So up here, we have this instruction saying 262 00:13:27.930 --> 00:13:29.820 that eating an okay amount means 263 00:13:29.820 --> 00:13:32.730 that the current food is within a range of 10% 264 00:13:32.730 --> 00:13:35.310 above and below the recommended. 265 00:13:35.310 --> 00:13:38.640 So basically a floor and a ceiling of 10% 266 00:13:38.640 --> 00:13:41.280 around this recommended value. 267 00:13:41.280 --> 00:13:43.110 And then down here, we have this hint, 268 00:13:43.110 --> 00:13:47.100 which tells us, actually, exactly how to calculate that. 269 00:13:47.100 --> 00:13:50.910 So here it says that being within that range means 270 00:13:50.910 --> 00:13:55.530 that the current value is greater than 90% of the value, 271 00:13:55.530 --> 00:13:56.790 so that's this part, 272 00:13:56.790 --> 00:14:01.790 and, at the same time, it is less than 100% of that value. 273 00:14:02.460 --> 00:14:04.830 So yeah, that's exactly what said here. 274 00:14:04.830 --> 00:14:09.353 So the current portion should be between 90 and 110%. 275 00:14:11.250 --> 00:14:14.880 All right, and again, we need to check 276 00:14:14.880 --> 00:14:17.730 whether all of the dogs are in this condition. 277 00:14:17.730 --> 00:14:20.880 So, as we just saw earlier, 278 00:14:20.880 --> 00:14:25.530 this is a time where we now use the every method. 279 00:14:25.530 --> 00:14:28.623 So dogs.every, 280 00:14:31.110 --> 00:14:33.090 and then, here, let's just write that condition 281 00:14:33.090 --> 00:14:36.090 that we just saw a minute ago in that hint. 282 00:14:36.090 --> 00:14:40.770 So the current food needs to be, again, 283 00:14:40.770 --> 00:14:42.270 less than the recommended food 284 00:14:46.230 --> 00:14:50.730 times 1.1, so that's the 110%, 285 00:14:50.730 --> 00:14:52.320 so the upper ceiling, 286 00:14:52.320 --> 00:14:56.370 and, at the same time, it needs to be still 287 00:14:56.370 --> 00:14:59.880 greater than 90% of the recommended food, 288 00:14:59.880 --> 00:15:02.700 because, otherwise, this dog is really eating 289 00:15:02.700 --> 00:15:04.440 way too little. 290 00:15:04.440 --> 00:15:08.957 So dog.curFood needs to be greater 291 00:15:10.290 --> 00:15:12.963 than the recommended food, 292 00:15:14.589 --> 00:15:17.513 and then times 90%. 293 00:15:19.260 --> 00:15:21.450 All right, and here we get our result. 294 00:15:21.450 --> 00:15:24.450 And so this means that not all of the dogs 295 00:15:24.450 --> 00:15:26.790 are within this safe region. 296 00:15:26.790 --> 00:15:29.970 So they're not all eating an okay amount of food. 297 00:15:29.970 --> 00:15:31.560 Some are eating way too much, 298 00:15:31.560 --> 00:15:34.770 and probably some are eating way too less. 299 00:15:34.770 --> 00:15:35.670 Now, in the next step, 300 00:15:35.670 --> 00:15:39.360 we will actually find out exactly which ones are okay, 301 00:15:39.360 --> 00:15:43.170 because step number seven is for creating an array 302 00:15:43.170 --> 00:15:44.880 that will contain all the dogs 303 00:15:44.880 --> 00:15:48.390 that are actually eating an okay amount of food. 304 00:15:48.390 --> 00:15:51.900 Now, in order to calculate this using a filter method, 305 00:15:51.900 --> 00:15:54.480 we actually need this exact same condition. 306 00:15:54.480 --> 00:15:58.080 So this exact same callback function right here. 307 00:15:58.080 --> 00:16:01.140 So it doesn't make sense to just copy/paste it, 308 00:16:01.140 --> 00:16:04.713 but instead, we should create a separate function for this. 309 00:16:05.640 --> 00:16:06.813 So let's do that. 310 00:16:08.070 --> 00:16:10.830 Let's use a simple arrow function here, 311 00:16:10.830 --> 00:16:13.320 because this is just a one-liner. 312 00:16:13.320 --> 00:16:14.490 So let's call this one 313 00:16:14.490 --> 00:16:15.323 checkEatingOkay. 314 00:16:20.070 --> 00:16:23.013 And so that's then this function here. 315 00:16:26.002 --> 00:16:29.017 And then, we can just very easily plug that in here, 316 00:16:29.880 --> 00:16:32.760 and we'll get the exact same result. 317 00:16:32.760 --> 00:16:35.160 And with this callback function now in place, 318 00:16:35.160 --> 00:16:40.160 it is really simple to, again, use a filter method 319 00:16:40.320 --> 00:16:42.180 to find out which are the dogs 320 00:16:42.180 --> 00:16:44.880 that are eating an okay amount of food. 321 00:16:44.880 --> 00:16:46.000 So dogsEatingOkay 322 00:16:50.010 --> 00:16:53.610 are simply dogs.filter, 323 00:16:53.610 --> 00:16:57.483 and so, here, we now just pass in the exact same function. 324 00:16:58.650 --> 00:17:02.643 So let's then just log this to the console. 325 00:17:07.584 --> 00:17:08.670 And there we go. 326 00:17:08.670 --> 00:17:11.910 So it's these two dogs right here. 327 00:17:11.910 --> 00:17:14.640 So, of course, the one where the current food 328 00:17:14.640 --> 00:17:16.830 is the same to the recommended one, 329 00:17:16.830 --> 00:17:18.180 but then also this one 330 00:17:18.180 --> 00:17:21.570 where this dog is eating a little bit too little, 331 00:17:21.570 --> 00:17:23.763 but it's still within that safe margin. 332 00:17:25.560 --> 00:17:29.040 All right, and let's keep moving, 333 00:17:29.040 --> 00:17:30.420 because we're still not done. 334 00:17:30.420 --> 00:17:33.780 There are still three more tasks to go. 335 00:17:33.780 --> 00:17:35.643 But this is really fun, I think. 336 00:17:36.840 --> 00:17:40.380 So next up, we move on into grouping. 337 00:17:40.380 --> 00:17:44.160 So now we're gonna group all our dogs into three groups. 338 00:17:44.160 --> 00:17:47.400 And these groups are exact, too-much, or too-little, 339 00:17:47.400 --> 00:17:50.520 depending on whether this particular dog is eating 340 00:17:50.520 --> 00:17:54.510 too much, or too little, or the exact amount of food 341 00:17:54.510 --> 00:17:55.623 that is recommended. 342 00:17:56.550 --> 00:17:58.120 So let's create a variable 343 00:17:59.640 --> 00:18:04.640 dogsGrouped 344 00:18:04.758 --> 00:18:07.113 ByPortion, 345 00:18:07.113 --> 00:18:10.320 and then as we learned earlier, 346 00:18:10.320 --> 00:18:11.880 to perform this grouping, 347 00:18:11.880 --> 00:18:14.110 we use Object.groupBy. 348 00:18:16.470 --> 00:18:18.960 And so then, here, we specify that callback function 349 00:18:18.960 --> 00:18:22.590 from which we can basically return the different groups 350 00:18:22.590 --> 00:18:25.593 that we want to create in that output object. 351 00:18:27.150 --> 00:18:30.420 So the array that we want to group is, of course, 352 00:18:30.420 --> 00:18:31.557 the dogs array. 353 00:18:31.557 --> 00:18:33.750 And then, as the second argument, 354 00:18:33.750 --> 00:18:35.940 we pass in a callback function, 355 00:18:35.940 --> 00:18:40.230 which, essentially, will also loop over the dogs, 356 00:18:40.230 --> 00:18:43.920 and then each of the elements is, as always, called a dog. 357 00:18:43.920 --> 00:18:47.400 And then from here, we can return into which group 358 00:18:47.400 --> 00:18:49.743 this particular dog should belong. 359 00:18:52.020 --> 00:18:55.410 So, once again, we're gonna compare the current food 360 00:18:55.410 --> 00:18:56.823 with the recommended food. 361 00:18:57.780 --> 00:18:59.860 So let's say dog.curFood, 362 00:19:01.020 --> 00:19:05.613 if it is more than the recommended food, 363 00:19:07.950 --> 00:19:10.800 then, here, let's just return, 364 00:19:10.800 --> 00:19:12.093 and here we have a typo, 365 00:19:13.560 --> 00:19:16.863 then we return the string of too-much, 366 00:19:20.520 --> 00:19:24.090 else if, and so now the opposite case, 367 00:19:24.090 --> 00:19:28.893 so where the current food is less than the recommended one, 368 00:19:29.910 --> 00:19:34.637 then we return too-little, 369 00:19:36.180 --> 00:19:40.560 and, finally, in the final case, 370 00:19:40.560 --> 00:19:42.180 so if both of these are false, 371 00:19:42.180 --> 00:19:44.340 then that means that they are actually eating 372 00:19:44.340 --> 00:19:45.783 the exact same amount. 373 00:19:47.520 --> 00:19:50.820 So where recommended and current are the same. 374 00:19:50.820 --> 00:19:53.220 So return this one, 375 00:19:53.220 --> 00:19:56.010 and with this, we are actually done. 376 00:19:56.010 --> 00:19:59.400 So remember that this is how grouping works. 377 00:19:59.400 --> 00:20:03.447 We basically loop over the inputted array here, 378 00:20:03.447 --> 00:20:05.400 and then we determine, 379 00:20:05.400 --> 00:20:07.920 for each of the elements in the array, 380 00:20:07.920 --> 00:20:10.410 which group should be returned, 381 00:20:10.410 --> 00:20:14.340 so into which group the current object should be returned. 382 00:20:14.340 --> 00:20:16.950 So into which group the current object, 383 00:20:16.950 --> 00:20:18.780 or the current array element, 384 00:20:18.780 --> 00:20:21.330 should be grouped into. 385 00:20:21.330 --> 00:20:25.830 So that's why, here, we just returned these three strings. 386 00:20:25.830 --> 00:20:27.510 And so it is these strings 387 00:20:27.510 --> 00:20:31.320 that will become the groups in the output object. 388 00:20:31.320 --> 00:20:33.170 So that's what we're gonna check now. 389 00:20:34.950 --> 00:20:38.790 So dogsGroupedByPortion, 390 00:20:38.790 --> 00:20:41.460 and beautiful. 391 00:20:41.460 --> 00:20:44.853 So we have exact, which is that one with 244, 392 00:20:45.930 --> 00:20:47.730 and then we have these two. 393 00:20:47.730 --> 00:20:50.010 So checking if it's correct. 394 00:20:50.010 --> 00:20:53.520 And indeed, these two values are less than the recommended, 395 00:20:53.520 --> 00:20:56.730 and here, they are more than the recommended. 396 00:20:56.730 --> 00:20:58.290 So everything is correct. 397 00:20:58.290 --> 00:21:01.890 And we are ready to move on to the next step, 398 00:21:01.890 --> 00:21:04.530 which is some more grouping. 399 00:21:04.530 --> 00:21:08.100 So in this case, what we want to do is to group the dogs 400 00:21:08.100 --> 00:21:10.830 by the number of owners that they have. 401 00:21:10.830 --> 00:21:12.750 So this is an interesting one. 402 00:21:12.750 --> 00:21:15.243 And so let's get to work. 403 00:21:16.500 --> 00:21:20.013 So dogsGrouped, 404 00:21:21.150 --> 00:21:22.677 and this time, ByOwners. 405 00:21:24.060 --> 00:21:28.380 So, again, Object.groupBy, 406 00:21:28.380 --> 00:21:31.080 again, we pass in our dogs 407 00:21:31.080 --> 00:21:34.383 where each of the elements is a dog. 408 00:21:35.490 --> 00:21:38.520 And so, once again, we now need to return 409 00:21:38.520 --> 00:21:41.850 the name of the groups that we want to return. 410 00:21:41.850 --> 00:21:44.640 Now, in this case, we don't know them beforehand 411 00:21:44.640 --> 00:21:46.530 like we did here. 412 00:21:46.530 --> 00:21:47.460 And so, instead, 413 00:21:47.460 --> 00:21:49.950 we're just gonna calculate them dynamically here, 414 00:21:49.950 --> 00:21:52.530 just like we did in one of the examples 415 00:21:52.530 --> 00:21:55.830 where we first learned about this array grouping. 416 00:21:55.830 --> 00:21:59.520 So back then, I think we used the account type. 417 00:21:59.520 --> 00:22:01.890 At this time, all we need to do is 418 00:22:01.890 --> 00:22:05.850 to calculate here the number of owners. 419 00:22:05.850 --> 00:22:08.790 So we don't, of course, have this value 420 00:22:08.790 --> 00:22:10.800 directly in the object, 421 00:22:10.800 --> 00:22:13.110 but it is very easy to calculate. 422 00:22:13.110 --> 00:22:13.943 So it's just 423 00:22:13.943 --> 00:22:17.826 dog.owners 424 00:22:17.826 --> 00:22:20.220 .length. 425 00:22:20.220 --> 00:22:22.590 Now we actually do need a string here, 426 00:22:22.590 --> 00:22:26.070 I believe, I'm not 100% sure. 427 00:22:26.070 --> 00:22:30.660 So let's actually log this to the console. 428 00:22:30.660 --> 00:22:33.090 Probably, it's gonna work with numbers as well, 429 00:22:33.090 --> 00:22:35.550 but it's not gonna look very nice. 430 00:22:35.550 --> 00:22:38.520 So dogsByOwners, 431 00:22:38.520 --> 00:22:43.380 and yeah, so the keys of this object here 432 00:22:43.380 --> 00:22:45.150 are simply now these numbers, 433 00:22:45.150 --> 00:22:47.640 but let's make this a bit nicer. 434 00:22:47.640 --> 00:22:50.460 So let's create a template literal. 435 00:22:50.460 --> 00:22:52.863 So placing these inside the backticks, 436 00:22:53.970 --> 00:22:57.300 this here will be inside the curly braces, 437 00:22:57.300 --> 00:23:01.803 and then let's just add a -owners, 438 00:23:03.090 --> 00:23:04.860 so this then is a little bit easier 439 00:23:04.860 --> 00:23:06.410 to understand what's happening. 440 00:23:08.610 --> 00:23:11.640 So we have these three here, 441 00:23:11.640 --> 00:23:12.993 which is one owners, 442 00:23:14.102 --> 00:23:15.300 and so, yeah, that's correct, 443 00:23:15.300 --> 00:23:17.940 so these arrays only have one element. 444 00:23:17.940 --> 00:23:20.340 Then here, these have two elements. 445 00:23:20.340 --> 00:23:22.350 And this one apparently has three. 446 00:23:22.350 --> 00:23:26.160 So three owners in this case, nice. 447 00:23:26.160 --> 00:23:28.260 So really the possibilities 448 00:23:28.260 --> 00:23:30.990 with this array grouping feature are endless. 449 00:23:30.990 --> 00:23:33.030 There are just so many things you can do 450 00:23:33.030 --> 00:23:35.460 with your array data structures, 451 00:23:35.460 --> 00:23:37.470 so many ways of grouping them, 452 00:23:37.470 --> 00:23:40.863 and it is really helpful in all kinds of applications. 453 00:23:41.760 --> 00:23:45.150 But anyway, now we get to task number 10, 454 00:23:45.150 --> 00:23:46.980 which is the last one. 455 00:23:46.980 --> 00:23:50.190 And so here, what we need to do is to sort the dogs array 456 00:23:50.190 --> 00:23:54.210 by the recommended food portion in an ascending order. 457 00:23:54.210 --> 00:23:55.290 And we need to do so 458 00:23:55.290 --> 00:23:58.620 without mutating the original dogs array. 459 00:23:58.620 --> 00:24:01.590 So this time, we want to not touch that, 460 00:24:01.590 --> 00:24:04.200 but instead create a copy. 461 00:24:04.200 --> 00:24:06.240 So let's create a new variable for that, 462 00:24:06.240 --> 00:24:07.083 so dogsSorted, 463 00:24:09.030 --> 00:24:11.610 and so we're gonna take the dogs, 464 00:24:11.610 --> 00:24:14.100 and instead of using sort, 465 00:24:14.100 --> 00:24:15.843 we will do toSorted. 466 00:24:18.030 --> 00:24:19.980 And now, into this method, 467 00:24:19.980 --> 00:24:22.500 we need to pass in the compare function 468 00:24:22.500 --> 00:24:24.990 that the sort algorithm is gonna use 469 00:24:24.990 --> 00:24:27.540 to determine the sort order. 470 00:24:27.540 --> 00:24:32.460 So this compare function always takes two element, 471 00:24:32.460 --> 00:24:34.953 which usually we call a and b, 472 00:24:36.240 --> 00:24:39.540 and then, from this function, we need to return a value 473 00:24:39.540 --> 00:24:44.540 which will determine whether a will be before or after b 474 00:24:44.790 --> 00:24:46.470 in the sorted array. 475 00:24:46.470 --> 00:24:48.810 So we already talked about this before, 476 00:24:48.810 --> 00:24:52.290 but just to recap, if we return a negative value, 477 00:24:52.290 --> 00:24:54.930 then a will appear before b, 478 00:24:54.930 --> 00:24:57.300 but if we return a positive value, 479 00:24:57.300 --> 00:25:00.120 then a will appear after b. 480 00:25:00.120 --> 00:25:02.940 And if we just return zero, 481 00:25:02.940 --> 00:25:04.980 then nothing really happens, 482 00:25:04.980 --> 00:25:06.900 so they will stay in the same place. 483 00:25:06.900 --> 00:25:09.240 Now one nice trick that we can use, 484 00:25:09.240 --> 00:25:12.840 and which we also used before to sort an array 485 00:25:12.840 --> 00:25:15.240 in an ascending or a descending way, 486 00:25:15.240 --> 00:25:18.600 is to just subtract one value from the other. 487 00:25:18.600 --> 00:25:21.100 So let's just do a.recFood, 488 00:25:22.710 --> 00:25:26.487 because those are the values that we are sorting by, 489 00:25:26.487 --> 00:25:30.010 and then minus b.recFood. 490 00:25:32.130 --> 00:25:35.880 So, for example, if this value here is 100, 491 00:25:35.880 --> 00:25:38.550 and this one here is 200, 492 00:25:38.550 --> 00:25:41.580 then the result of this whole operation here 493 00:25:41.580 --> 00:25:43.320 will be minus 100, 494 00:25:43.320 --> 00:25:45.780 and so this negative value will mean 495 00:25:45.780 --> 00:25:49.680 that a will indeed appear before b. 496 00:25:49.680 --> 00:25:52.530 And so then, by the end of this, as a result, 497 00:25:52.530 --> 00:25:56.550 this subtraction-based compare function will always cause 498 00:25:56.550 --> 00:25:58.620 that the smaller values will appear 499 00:25:58.620 --> 00:26:00.480 at the beginning of the array, 500 00:26:00.480 --> 00:26:02.790 which is exactly the ascending order 501 00:26:02.790 --> 00:26:04.770 that we are looking for. 502 00:26:04.770 --> 00:26:08.920 So let's see if this works by logging to the console 503 00:26:11.460 --> 00:26:12.293 dogsSorted 504 00:26:15.210 --> 00:26:16.113 like this, 505 00:26:18.450 --> 00:26:21.840 and beautiful, that worked. 506 00:26:21.840 --> 00:26:24.960 So this is the smallest one, so it appears first, 507 00:26:24.960 --> 00:26:28.140 and, yeah, the values go in an ascending order. 508 00:26:28.140 --> 00:26:30.750 And, of course, if we wanted a descending order, 509 00:26:30.750 --> 00:26:33.783 we would just have to switch a and b here. 510 00:26:34.680 --> 00:26:36.690 So using that example before, 511 00:26:36.690 --> 00:26:38.970 so where this value is, 512 00:26:38.970 --> 00:26:41.640 so where b.recFood is 200, 513 00:26:41.640 --> 00:26:43.320 and the other one is 100, 514 00:26:43.320 --> 00:26:46.050 then the result here would be 100, 515 00:26:46.050 --> 00:26:48.330 which is indeed a positive value, 516 00:26:48.330 --> 00:26:51.630 meaning that a should appear after b. 517 00:26:51.630 --> 00:26:55.980 And so, in this case, bigger values will naturally, 518 00:26:55.980 --> 00:26:59.580 basically, get to the beginning of the array, 519 00:26:59.580 --> 00:27:01.110 so of the new sorted array. 520 00:27:01.110 --> 00:27:02.130 And so, in this case, 521 00:27:02.130 --> 00:27:06.900 what we got is exactly this. 522 00:27:06.900 --> 00:27:10.533 So now we are in a descending order. 523 00:27:12.480 --> 00:27:15.810 So this is a bit tricky to understand, 524 00:27:15.810 --> 00:27:17.460 and it's not really that important. 525 00:27:17.460 --> 00:27:19.740 What matters is that usually 526 00:27:19.740 --> 00:27:23.160 we always use this subtraction-based comparison 527 00:27:23.160 --> 00:27:24.030 as we did here. 528 00:27:24.030 --> 00:27:26.070 So just keep in mind this kind of trick, 529 00:27:26.070 --> 00:27:28.380 and then you can always play around with it 530 00:27:28.380 --> 00:27:32.013 in order to get the result that you are looking for. 531 00:27:33.450 --> 00:27:38.450 All right, and I think that's it for this challenge. 532 00:27:38.640 --> 00:27:39.693 Let's just check. 533 00:27:40.560 --> 00:27:43.770 And indeed, number 10 was the last one. 534 00:27:43.770 --> 00:27:48.480 Great, so congratulations for completing this huge challenge 535 00:27:48.480 --> 00:27:51.270 and also completing this huge section. 536 00:27:51.270 --> 00:27:53.880 But trust me, it was really worth it, 537 00:27:53.880 --> 00:27:56.850 because one of the main things you will always do 538 00:27:56.850 --> 00:27:59.400 when working as a JavaScript developer is 539 00:27:59.400 --> 00:28:01.050 to work with arrays. 540 00:28:01.050 --> 00:28:04.380 That's really one of the main parts of the job. 541 00:28:04.380 --> 00:28:07.710 And so that's why I went really, really deep into arrays 542 00:28:07.710 --> 00:28:09.270 throughout this section. 543 00:28:09.270 --> 00:28:11.610 So I hope it wasn't too much. 544 00:28:11.610 --> 00:28:16.140 But again, even if it was, I'm sure that it was worth it. 545 00:28:16.140 --> 00:28:18.030 You'll need many of these tools 546 00:28:18.030 --> 00:28:20.010 throughout your professional life. 547 00:28:20.010 --> 00:28:22.650 And now, if you need, just take a break, 548 00:28:22.650 --> 00:28:24.120 and then once you're ready, 549 00:28:24.120 --> 00:28:26.310 just meet me in the next section. 550 00:28:26.310 --> 00:28:28.683 So hopefully, I see you there very soon.