WEBVTT 1 00:00:01.330 --> 00:00:04.200 Let's now use the map and for each method 2 00:00:04.200 --> 00:00:07.530 to compute usernames for each account owner 3 00:00:07.530 --> 00:00:08.803 in our application. 4 00:00:10.190 --> 00:00:13.440 So we have these four accounts, and for each of them, 5 00:00:13.440 --> 00:00:17.090 we want to basically compute a username. 6 00:00:17.090 --> 00:00:20.280 And the username is simply the initials 7 00:00:20.280 --> 00:00:21.603 of each of the users. 8 00:00:23.670 --> 00:00:26.400 So let's just start with one of them, 9 00:00:26.400 --> 00:00:29.300 just with one string to make it really easy. 10 00:00:29.300 --> 00:00:33.500 And then we will generalize that function for 11 00:00:33.500 --> 00:00:37.210 the entire accounts array that we have down here, 12 00:00:37.210 --> 00:00:39.750 so which contains all of the accounts. 13 00:00:39.750 --> 00:00:42.400 But for now, I will just grab this string here 14 00:00:42.400 --> 00:00:45.053 and create a username for this one. 15 00:00:46.360 --> 00:00:48.410 So let's do that down here, 16 00:00:48.410 --> 00:00:50.963 after this first function that we created. 17 00:00:53.470 --> 00:00:56.060 And for now, we will do this outside of a function 18 00:00:56.060 --> 00:00:57.840 just to see how it works, 19 00:00:57.840 --> 00:01:00.610 and then afterwards, we will create a new function. 20 00:01:00.610 --> 00:01:04.450 So let's say the user is this one here, 21 00:01:04.450 --> 00:01:07.490 and we want to compute the username. 22 00:01:07.490 --> 00:01:11.723 So for this one here, the username should be stw. 23 00:01:13.950 --> 00:01:16.673 So that's just the initials in lowercase. 24 00:01:18.570 --> 00:01:21.023 And so let's do that. 25 00:01:22.530 --> 00:01:26.573 So we start by transforming this string to a lowercase. 26 00:01:29.270 --> 00:01:32.290 So we already know how to do that. 27 00:01:32.290 --> 00:01:34.280 And now we simply want to take 28 00:01:35.150 --> 00:01:37.683 the first letter of each of the words. 29 00:01:39.923 --> 00:01:43.410 And so we need to basically split up the string 30 00:01:43.410 --> 00:01:45.300 into the multiple words. 31 00:01:45.300 --> 00:01:50.300 So this is a very common use case for the split method, 32 00:01:50.910 --> 00:01:53.360 so dividing by spaces, 33 00:01:53.360 --> 00:01:56.740 which will divide the string into words. 34 00:01:56.740 --> 00:01:59.220 And let's just take a look at what we have now, 35 00:01:59.220 --> 00:02:03.003 so that we can discuss our next move here. 36 00:02:04.130 --> 00:02:06.350 So username, and so right now 37 00:02:06.350 --> 00:02:10.160 we have Stephen, Thomas, and Williams. 38 00:02:10.160 --> 00:02:14.420 And so how do we take each of the first letters here? 39 00:02:14.420 --> 00:02:17.060 Well, we could simply loop over the array, 40 00:02:17.060 --> 00:02:19.980 and then take the first letter in each iteration, 41 00:02:19.980 --> 00:02:22.120 and add them into a new array. 42 00:02:22.120 --> 00:02:24.610 And then in the end, we would join that array, 43 00:02:24.610 --> 00:02:28.203 and we would end up with just a string of stw. 44 00:02:30.090 --> 00:02:32.220 So let's do what I just said. 45 00:02:32.220 --> 00:02:33.940 So looping over this array, 46 00:02:33.940 --> 00:02:36.920 taking the first letter and then putting it 47 00:02:36.920 --> 00:02:38.680 into a new array. 48 00:02:38.680 --> 00:02:41.713 And that is exactly what the map method does. 49 00:02:43.870 --> 00:02:46.210 We can do that directly here, 50 00:02:46.210 --> 00:02:50.460 because this split method here returns an array. 51 00:02:50.460 --> 00:02:52.490 And we can then call the map method 52 00:02:52.490 --> 00:02:54.663 on that resulting array. 53 00:02:55.530 --> 00:02:58.770 So we can immediately do .map here, 54 00:02:58.770 --> 00:03:00.790 just like we can call the split method 55 00:03:00.790 --> 00:03:04.090 on the result of the two lowercase method, 56 00:03:04.090 --> 00:03:06.350 because this one here returns a string, 57 00:03:06.350 --> 00:03:09.063 and split is available on all strings. 58 00:03:11.820 --> 00:03:14.430 So let's define our callback function here. 59 00:03:14.430 --> 00:03:17.493 And I will start by doing it with a irregular function. 60 00:03:18.570 --> 00:03:21.030 And so here, let's say we get a word 61 00:03:22.190 --> 00:03:24.593 or a name, it doesn't really matter here. 62 00:03:26.440 --> 00:03:29.530 And so in each iteration, what we want to do 63 00:03:29.530 --> 00:03:33.400 is simply to return the first letter. 64 00:03:33.400 --> 00:03:36.293 So that's name at position zero. 65 00:03:38.365 --> 00:03:40.000 And so right now, 66 00:03:40.000 --> 00:03:43.710 this should be an array with only these three initials. 67 00:03:43.710 --> 00:03:45.150 So let's see. 68 00:03:45.150 --> 00:03:47.533 And yes, beautiful. 69 00:03:48.960 --> 00:03:50.830 That worked just fine, 70 00:03:50.830 --> 00:03:53.310 and so the results of this here, 71 00:03:53.310 --> 00:03:56.610 of this whole thing, is now an array. 72 00:03:56.610 --> 00:04:00.203 And on an array, we can call the join method. 73 00:04:01.270 --> 00:04:06.270 So .join, and simply by an empty string, 74 00:04:06.350 --> 00:04:10.823 and this will give us the final result of stw. 75 00:04:12.370 --> 00:04:14.700 All right, great. 76 00:04:14.700 --> 00:04:17.073 Now let's simplify this callback function here. 77 00:04:18.310 --> 00:04:22.920 And again, I will start by deleting the function keyword. 78 00:04:22.920 --> 00:04:27.920 Then we can also delete the curly braces, 79 00:04:28.080 --> 00:04:31.720 and finally, also delete the return. 80 00:04:31.720 --> 00:04:34.533 And so, see how simple this has become now. 81 00:04:35.930 --> 00:04:40.860 So, we transform name to name at the first position, 82 00:04:40.860 --> 00:04:42.960 so just the first character. 83 00:04:42.960 --> 00:04:45.560 And one more time, don't forget that 84 00:04:45.560 --> 00:04:48.230 this is actively returning here, 85 00:04:48.230 --> 00:04:50.700 we just don't see it. 86 00:04:50.700 --> 00:04:53.150 But the return is happening. 87 00:04:53.150 --> 00:04:55.530 And this is the reason why this works, 88 00:04:55.530 --> 00:04:58.660 because the callback function in the map method 89 00:04:58.660 --> 00:05:01.410 always needs to return the new value 90 00:05:01.410 --> 00:05:03.750 that should be in the new array. 91 00:05:03.750 --> 00:05:08.700 All right, so this works great with this username. 92 00:05:08.700 --> 00:05:12.690 Let's not take this actually into a function. 93 00:05:12.690 --> 00:05:14.003 So, I'm cutting it here, 94 00:05:15.880 --> 00:05:16.713 and let's say 95 00:05:17.620 --> 00:05:19.220 create 96 00:05:19.220 --> 00:05:20.213 usernames, 97 00:05:24.380 --> 00:05:27.910 create a function, add this here, 98 00:05:27.910 --> 00:05:29.440 and for now, let's say, 99 00:05:29.440 --> 00:05:31.463 we get the user in here. 100 00:05:33.260 --> 00:05:36.443 And so now we can call the function with this string. 101 00:05:40.974 --> 00:05:43.540 And here, I called console.log, 102 00:05:43.540 --> 00:05:45.243 instead of create username. 103 00:05:48.390 --> 00:05:52.000 And yeah, if we want to see the result, 104 00:05:52.000 --> 00:05:54.683 we would also have to log it to the console now. 105 00:05:56.590 --> 00:06:00.793 So of course, first returning the username, 106 00:06:04.730 --> 00:06:07.873 and then log it to the console here as well. 107 00:06:08.750 --> 00:06:11.250 And so Indeed, we now get the same initial 108 00:06:11.250 --> 00:06:13.110 that we had before. 109 00:06:13.110 --> 00:06:15.160 But now we actually want to compute 110 00:06:15.160 --> 00:06:18.590 one username for each of the account holders 111 00:06:18.590 --> 00:06:20.053 in our accounts array. 112 00:06:21.500 --> 00:06:23.830 So to do that, should we use the map 113 00:06:23.830 --> 00:06:25.353 or the for each method. 114 00:06:26.250 --> 00:06:29.220 Well, we do not want to create a new array 115 00:06:29.220 --> 00:06:30.720 in this situation, 116 00:06:30.720 --> 00:06:33.760 all we want to do is to modify the object, 117 00:06:33.760 --> 00:06:38.570 so the elements that already exist in the accounts array. 118 00:06:38.570 --> 00:06:39.403 So 119 00:06:40.420 --> 00:06:41.543 in this array here, 120 00:06:42.790 --> 00:06:45.790 and so what we want is to simply loop over 121 00:06:45.790 --> 00:06:48.750 this array here, and then do something. 122 00:06:48.750 --> 00:06:51.413 And so what we want that we use for each. 123 00:06:53.410 --> 00:06:56.320 So let's modify this function here some more, 124 00:06:56.320 --> 00:06:59.380 and instead of simply receiving one user, 125 00:06:59.380 --> 00:07:02.283 what we want to do is to receive all the accounts. 126 00:07:03.450 --> 00:07:06.550 So basically an array of account. 127 00:07:06.550 --> 00:07:08.360 And this goes back to the philosophy 128 00:07:08.360 --> 00:07:11.800 I explained to you in the last lecture, which is that, 129 00:07:11.800 --> 00:07:14.700 each function should actually receive the data 130 00:07:14.700 --> 00:07:16.370 that it should work with, 131 00:07:16.370 --> 00:07:19.210 instead of using a global variable. 132 00:07:19.210 --> 00:07:22.900 So that's exactly what we did here, with the movements, 133 00:07:22.900 --> 00:07:25.940 which we could have read directly from the global variable 134 00:07:26.780 --> 00:07:30.770 of account1.movements for example. 135 00:07:30.770 --> 00:07:34.740 But instead, we created a function that receives that data, 136 00:07:34.740 --> 00:07:36.780 and can then work with that data, 137 00:07:36.780 --> 00:07:40.670 or with any other data that we choose to pass into it. 138 00:07:40.670 --> 00:07:42.310 And so here we are doing the same, 139 00:07:42.310 --> 00:07:44.990 we do not want to rely on the accounts array 140 00:07:44.990 --> 00:07:46.640 that we already have. 141 00:07:46.640 --> 00:07:49.533 But instead, we want to pass it into the function. 142 00:07:50.650 --> 00:07:52.630 Let's get rid of all of this. 143 00:07:52.630 --> 00:07:55.710 And so what I mean is to actually pass 144 00:07:55.710 --> 00:07:57.730 the accounts array in here. 145 00:07:57.730 --> 00:08:00.830 And here, it doesn't have to be called accounts. 146 00:08:00.830 --> 00:08:04.323 Let's just call it like this, as an abbreviation. 147 00:08:05.270 --> 00:08:08.520 Just to remove a little bit of the confusion 148 00:08:08.520 --> 00:08:09.520 that you might have. 149 00:08:11.950 --> 00:08:13.450 And now, as we were saying, 150 00:08:13.450 --> 00:08:16.360 we need to use the for each method here, 151 00:08:16.360 --> 00:08:20.090 because again, we do not want to create a new array, 152 00:08:20.090 --> 00:08:22.740 we simply want to modify basically, 153 00:08:22.740 --> 00:08:25.420 the array that we get as an input. 154 00:08:25.420 --> 00:08:29.050 And this is a really important distinction to keep in mind. 155 00:08:29.050 --> 00:08:30.690 So here we are again, 156 00:08:30.690 --> 00:08:33.210 talking about the side effects that I mentioned 157 00:08:33.210 --> 00:08:34.740 in the last video. 158 00:08:34.740 --> 00:08:37.470 And in this case, the side effects are gonna be 159 00:08:37.470 --> 00:08:42.440 to change, so to mutate the original accounts array. 160 00:08:42.440 --> 00:08:44.550 And so that's what we want to do here, 161 00:08:44.550 --> 00:08:47.843 and so for each is the way to go. 162 00:08:48.750 --> 00:08:52.900 So for each account in the accounts array, 163 00:08:52.900 --> 00:08:54.860 so I'm just calling this acc, 164 00:08:54.860 --> 00:08:58.800 which is again, an abbreviation for one single account. 165 00:08:58.800 --> 00:09:03.593 So for each account, we now want to do this here basically. 166 00:09:05.910 --> 00:09:10.163 So let's grab all this, we can remove this. 167 00:09:12.550 --> 00:09:15.720 And so let's create a new property on each 168 00:09:15.720 --> 00:09:17.143 of the account objects. 169 00:09:18.120 --> 00:09:21.680 So account.username, 170 00:09:21.680 --> 00:09:25.773 and that will be equal to user.owner, 171 00:09:28.840 --> 00:09:31.163 and so let's check out why that is. 172 00:09:32.420 --> 00:09:35.400 So each of these accounts has the owner property, 173 00:09:35.400 --> 00:09:38.870 and so that's where the name of the owner 174 00:09:38.870 --> 00:09:40.770 of the user comes from. 175 00:09:40.770 --> 00:09:42.360 So we take that, 176 00:09:42.360 --> 00:09:44.110 so account.owner 177 00:09:45.150 --> 00:09:47.703 and create or username from that. 178 00:09:49.690 --> 00:09:51.160 So that's what we do here. 179 00:09:51.160 --> 00:09:53.330 And then we create a new property on 180 00:09:53.330 --> 00:09:55.420 that account element. 181 00:09:55.420 --> 00:09:57.080 And yeah, 182 00:09:57.080 --> 00:09:59.420 and that will then contain the username 183 00:09:59.420 --> 00:10:01.513 that we create here. 184 00:10:04.180 --> 00:10:06.610 Here we have some kind of error, 185 00:10:06.610 --> 00:10:09.620 and of course, it's not user, 186 00:10:09.620 --> 00:10:12.023 it is account.owner. 187 00:10:13.530 --> 00:10:14.633 And now that's it, 188 00:10:16.670 --> 00:10:19.850 and in this function, we do not return anything, 189 00:10:19.850 --> 00:10:22.540 because again, what we're doing here 190 00:10:22.540 --> 00:10:25.090 is to produce a side effect. 191 00:10:25.090 --> 00:10:29.110 So we are doing something to this account object here. 192 00:10:29.110 --> 00:10:32.170 And so there is no need to return anything. 193 00:10:32.170 --> 00:10:35.200 We are just doing some work here, basically, 194 00:10:35.200 --> 00:10:37.843 we are not creating a new value to return. 195 00:10:39.660 --> 00:10:42.420 If we want to see if this actually worked, 196 00:10:42.420 --> 00:10:47.420 we can lock this accounts object, or this accounts array 197 00:10:47.500 --> 00:10:48.543 to the console. 198 00:10:49.655 --> 00:10:53.050 And so in there, we should now see our objects 199 00:10:53.050 --> 00:10:55.280 with a new property. 200 00:10:55.280 --> 00:10:58.850 And indeed, we get the username of js. 201 00:10:58.850 --> 00:11:00.623 And this one should be jd, 202 00:11:03.180 --> 00:11:05.630 and here or Stephen Thomas Williams, 203 00:11:05.630 --> 00:11:08.080 and indeed, it is the stw, 204 00:11:08.080 --> 00:11:09.993 that we had previously worked with. 205 00:11:12.200 --> 00:11:15.880 So in this lecture, it was very important to understand 206 00:11:15.880 --> 00:11:19.940 the use case for the map method here, which was perfect, 207 00:11:19.940 --> 00:11:23.170 because it allowed us to create a new simple array, 208 00:11:23.170 --> 00:11:26.110 which only contains the initials of whatever name 209 00:11:26.110 --> 00:11:27.560 it is used on. 210 00:11:27.560 --> 00:11:30.590 And then on the other hand, the for each method, 211 00:11:30.590 --> 00:11:33.080 it was a great use case to produce 212 00:11:33.080 --> 00:11:35.570 some so called side effects. 213 00:11:35.570 --> 00:11:38.530 So in other words, to simply do some work 214 00:11:38.530 --> 00:11:40.470 without returning anything. 215 00:11:40.470 --> 00:11:42.050 And so that's what we did here, 216 00:11:42.050 --> 00:11:45.030 we simply looped over the accounts array, 217 00:11:45.030 --> 00:11:46.330 and in each iteration, 218 00:11:46.330 --> 00:11:49.520 we manipulated the current account object, 219 00:11:49.520 --> 00:11:51.960 and edit a username to it 220 00:11:51.960 --> 00:11:54.700 based on the account owner, 221 00:11:54.700 --> 00:11:56.770 plus all of these transformations 222 00:11:56.770 --> 00:11:58.763 that we had already done before. 223 00:12:00.070 --> 00:12:03.280 So a couple of interesting and important takeaways 224 00:12:03.280 --> 00:12:04.550 from this video. 225 00:12:04.550 --> 00:12:06.730 So make sure to review it properly, 226 00:12:06.730 --> 00:12:10.430 and then let's move on to our next transforming method, 227 00:12:10.430 --> 00:12:12.333 which is the filter method.