Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,330 --> 00:00:04,200 Let's now use the map and for each method 2 2 00:00:04,200 --> 00:00:07,530 to compute usernames for each account owner 3 3 00:00:07,530 --> 00:00:08,803 in our application. 4 4 00:00:10,190 --> 00:00:13,440 So we have these four accounts, and for each of them, 5 5 00:00:13,440 --> 00:00:17,090 we want to basically compute a username. 6 6 00:00:17,090 --> 00:00:20,280 And the username is simply the initials 7 7 00:00:20,280 --> 00:00:21,603 of each of the users. 8 8 00:00:23,670 --> 00:00:26,400 So let's just start with one of them, 9 9 00:00:26,400 --> 00:00:29,300 just with one string to make it really easy. 10 10 00:00:29,300 --> 00:00:33,500 And then we will generalize that function for 11 11 00:00:33,500 --> 00:00:37,210 the entire accounts array that we have down here, 12 12 00:00:37,210 --> 00:00:39,750 so which contains all of the accounts. 13 13 00:00:39,750 --> 00:00:42,400 But for now, I will just grab this string here 14 14 00:00:42,400 --> 00:00:45,053 and create a username for this one. 15 15 00:00:46,360 --> 00:00:48,410 So let's do that down here, 16 16 00:00:48,410 --> 00:00:50,963 after this first function that we created. 17 17 00:00:53,470 --> 00:00:56,060 And for now, we will do this outside of a function 18 18 00:00:56,060 --> 00:00:57,840 just to see how it works, 19 19 00:00:57,840 --> 00:01:00,610 and then afterwards, we will create a new function. 20 20 00:01:00,610 --> 00:01:04,450 So let's say the user is this one here, 21 21 00:01:04,450 --> 00:01:07,490 and we want to compute the username. 22 22 00:01:07,490 --> 00:01:11,723 So for this one here, the username should be stw. 23 23 00:01:13,950 --> 00:01:16,673 So that's just the initials in lowercase. 24 24 00:01:18,570 --> 00:01:21,023 And so let's do that. 25 25 00:01:22,530 --> 00:01:26,573 So we start by transforming this string to a lowercase. 26 26 00:01:29,270 --> 00:01:32,290 So we already know how to do that. 27 27 00:01:32,290 --> 00:01:34,280 And now we simply want to take 28 28 00:01:35,150 --> 00:01:37,683 the first letter of each of the words. 29 29 00:01:39,923 --> 00:01:43,410 And so we need to basically split up the string 30 30 00:01:43,410 --> 00:01:45,300 into the multiple words. 31 31 00:01:45,300 --> 00:01:50,300 So this is a very common use case for the split method, 32 32 00:01:50,910 --> 00:01:53,360 so dividing by spaces, 33 33 00:01:53,360 --> 00:01:56,740 which will divide the string into words. 34 34 00:01:56,740 --> 00:01:59,220 And let's just take a look at what we have now, 35 35 00:01:59,220 --> 00:02:03,003 so that we can discuss our next move here. 36 36 00:02:04,130 --> 00:02:06,350 So username, and so right now 37 37 00:02:06,350 --> 00:02:10,160 we have Stephen, Thomas, and Williams. 38 38 00:02:10,160 --> 00:02:14,420 And so how do we take each of the first letters here? 39 39 00:02:14,420 --> 00:02:17,060 Well, we could simply loop over the array, 40 40 00:02:17,060 --> 00:02:19,980 and then take the first letter in each iteration, 41 41 00:02:19,980 --> 00:02:22,120 and add them into a new array. 42 42 00:02:22,120 --> 00:02:24,610 And then in the end, we would join that array, 43 43 00:02:24,610 --> 00:02:28,203 and we would end up with just a string of stw. 44 44 00:02:30,090 --> 00:02:32,220 So let's do what I just said. 45 45 00:02:32,220 --> 00:02:33,940 So looping over this array, 46 46 00:02:33,940 --> 00:02:36,920 taking the first letter and then putting it 47 47 00:02:36,920 --> 00:02:38,680 into a new array. 48 48 00:02:38,680 --> 00:02:41,713 And that is exactly what the map method does. 49 49 00:02:43,870 --> 00:02:46,210 We can do that directly here, 50 50 00:02:46,210 --> 00:02:50,460 because this split method here returns an array. 51 51 00:02:50,460 --> 00:02:52,490 And we can then call the map method 52 52 00:02:52,490 --> 00:02:54,663 on that resulting array. 53 53 00:02:55,530 --> 00:02:58,770 So we can immediately do .map here, 54 54 00:02:58,770 --> 00:03:00,790 just like we can call the split method 55 55 00:03:00,790 --> 00:03:04,090 on the result of the two lowercase method, 56 56 00:03:04,090 --> 00:03:06,350 because this one here returns a string, 57 57 00:03:06,350 --> 00:03:09,063 and split is available on all strings. 58 58 00:03:11,820 --> 00:03:14,430 So let's define our callback function here. 59 59 00:03:14,430 --> 00:03:17,493 And I will start by doing it with a irregular function. 60 60 00:03:18,570 --> 00:03:21,030 And so here, let's say we get a word 61 61 00:03:22,190 --> 00:03:24,593 or a name, it doesn't really matter here. 62 62 00:03:26,440 --> 00:03:29,530 And so in each iteration, what we want to do 63 63 00:03:29,530 --> 00:03:33,400 is simply to return the first letter. 64 64 00:03:33,400 --> 00:03:36,293 So that's name at position zero. 65 65 00:03:38,365 --> 00:03:40,000 And so right now, 66 66 00:03:40,000 --> 00:03:43,710 this should be an array with only these three initials. 67 67 00:03:43,710 --> 00:03:45,150 So let's see. 68 68 00:03:45,150 --> 00:03:47,533 And yes, beautiful. 69 69 00:03:48,960 --> 00:03:50,830 That worked just fine, 70 70 00:03:50,830 --> 00:03:53,310 and so the results of this here, 71 71 00:03:53,310 --> 00:03:56,610 of this whole thing, is now an array. 72 72 00:03:56,610 --> 00:04:00,203 And on an array, we can call the join method. 73 73 00:04:01,270 --> 00:04:06,270 So .join, and simply by an empty string, 74 74 00:04:06,350 --> 00:04:10,823 and this will give us the final result of stw. 75 75 00:04:12,370 --> 00:04:14,700 All right, great. 76 76 00:04:14,700 --> 00:04:17,073 Now let's simplify this callback function here. 77 77 00:04:18,310 --> 00:04:22,920 And again, I will start by deleting the function keyword. 78 78 00:04:22,920 --> 00:04:27,920 Then we can also delete the curly braces, 79 79 00:04:28,080 --> 00:04:31,720 and finally, also delete the return. 80 80 00:04:31,720 --> 00:04:34,533 And so, see how simple this has become now. 81 81 00:04:35,930 --> 00:04:40,860 So, we transform name to name at the first position, 82 82 00:04:40,860 --> 00:04:42,960 so just the first character. 83 83 00:04:42,960 --> 00:04:45,560 And one more time, don't forget that 84 84 00:04:45,560 --> 00:04:48,230 this is actively returning here, 85 85 00:04:48,230 --> 00:04:50,700 we just don't see it. 86 86 00:04:50,700 --> 00:04:53,150 But the return is happening. 87 87 00:04:53,150 --> 00:04:55,530 And this is the reason why this works, 88 88 00:04:55,530 --> 00:04:58,660 because the callback function in the map method 89 89 00:04:58,660 --> 00:05:01,410 always needs to return the new value 90 90 00:05:01,410 --> 00:05:03,750 that should be in the new array. 91 91 00:05:03,750 --> 00:05:08,700 All right, so this works great with this username. 92 92 00:05:08,700 --> 00:05:12,690 Let's not take this actually into a function. 93 93 00:05:12,690 --> 00:05:14,003 So, I'm cutting it here, 94 94 00:05:15,880 --> 00:05:16,713 and let's say 95 95 00:05:17,620 --> 00:05:19,220 create 96 96 00:05:19,220 --> 00:05:20,213 usernames, 97 97 00:05:24,380 --> 00:05:27,910 create a function, add this here, 98 98 00:05:27,910 --> 00:05:29,440 and for now, let's say, 99 99 00:05:29,440 --> 00:05:31,463 we get the user in here. 100 100 00:05:33,260 --> 00:05:36,443 And so now we can call the function with this string. 101 101 00:05:40,974 --> 00:05:43,540 And here, I called console.log, 102 102 00:05:43,540 --> 00:05:45,243 instead of create username. 103 103 00:05:48,390 --> 00:05:52,000 And yeah, if we want to see the result, 104 104 00:05:52,000 --> 00:05:54,683 we would also have to log it to the console now. 105 105 00:05:56,590 --> 00:06:00,793 So of course, first returning the username, 106 106 00:06:04,730 --> 00:06:07,873 and then log it to the console here as well. 107 107 00:06:08,750 --> 00:06:11,250 And so Indeed, we now get the same initial 108 108 00:06:11,250 --> 00:06:13,110 that we had before. 109 109 00:06:13,110 --> 00:06:15,160 But now we actually want to compute 110 110 00:06:15,160 --> 00:06:18,590 one username for each of the account holders 111 111 00:06:18,590 --> 00:06:20,053 in our accounts array. 112 112 00:06:21,500 --> 00:06:23,830 So to do that, should we use the map 113 113 00:06:23,830 --> 00:06:25,353 or the for each method. 114 114 00:06:26,250 --> 00:06:29,220 Well, we do not want to create a new array 115 115 00:06:29,220 --> 00:06:30,720 in this situation, 116 116 00:06:30,720 --> 00:06:33,760 all we want to do is to modify the object, 117 117 00:06:33,760 --> 00:06:38,570 so the elements that already exist in the accounts array. 118 118 00:06:38,570 --> 00:06:39,403 So 119 119 00:06:40,420 --> 00:06:41,543 in this array here, 120 120 00:06:42,790 --> 00:06:45,790 and so what we want is to simply loop over 121 121 00:06:45,790 --> 00:06:48,750 this array here, and then do something. 122 122 00:06:48,750 --> 00:06:51,413 And so what we want that we use for each. 123 123 00:06:53,410 --> 00:06:56,320 So let's modify this function here some more, 124 124 00:06:56,320 --> 00:06:59,380 and instead of simply receiving one user, 125 125 00:06:59,380 --> 00:07:02,283 what we want to do is to receive all the accounts. 126 126 00:07:03,450 --> 00:07:06,550 So basically an array of account. 127 127 00:07:06,550 --> 00:07:08,360 And this goes back to the philosophy 128 128 00:07:08,360 --> 00:07:11,800 I explained to you in the last lecture, which is that, 129 129 00:07:11,800 --> 00:07:14,700 each function should actually receive the data 130 130 00:07:14,700 --> 00:07:16,370 that it should work with, 131 131 00:07:16,370 --> 00:07:19,210 instead of using a global variable. 132 132 00:07:19,210 --> 00:07:22,900 So that's exactly what we did here, with the movements, 133 133 00:07:22,900 --> 00:07:25,940 which we could have read directly from the global variable 134 134 00:07:26,780 --> 00:07:30,770 of account1.movements for example. 135 135 00:07:30,770 --> 00:07:34,740 But instead, we created a function that receives that data, 136 136 00:07:34,740 --> 00:07:36,780 and can then work with that data, 137 137 00:07:36,780 --> 00:07:40,670 or with any other data that we choose to pass into it. 138 138 00:07:40,670 --> 00:07:42,310 And so here we are doing the same, 139 139 00:07:42,310 --> 00:07:44,990 we do not want to rely on the accounts array 140 140 00:07:44,990 --> 00:07:46,640 that we already have. 141 141 00:07:46,640 --> 00:07:49,533 But instead, we want to pass it into the function. 142 142 00:07:50,650 --> 00:07:52,630 Let's get rid of all of this. 143 143 00:07:52,630 --> 00:07:55,710 And so what I mean is to actually pass 144 144 00:07:55,710 --> 00:07:57,730 the accounts array in here. 145 145 00:07:57,730 --> 00:08:00,830 And here, it doesn't have to be called accounts. 146 146 00:08:00,830 --> 00:08:04,323 Let's just call it like this, as an abbreviation. 147 147 00:08:05,270 --> 00:08:08,520 Just to remove a little bit of the confusion 148 148 00:08:08,520 --> 00:08:09,520 that you might have. 149 149 00:08:11,950 --> 00:08:13,450 And now, as we were saying, 150 150 00:08:13,450 --> 00:08:16,360 we need to use the for each method here, 151 151 00:08:16,360 --> 00:08:20,090 because again, we do not want to create a new array, 152 152 00:08:20,090 --> 00:08:22,740 we simply want to modify basically, 153 153 00:08:22,740 --> 00:08:25,420 the array that we get as an input. 154 154 00:08:25,420 --> 00:08:29,050 And this is a really important distinction to keep in mind. 155 155 00:08:29,050 --> 00:08:30,690 So here we are again, 156 156 00:08:30,690 --> 00:08:33,210 talking about the side effects that I mentioned 157 157 00:08:33,210 --> 00:08:34,740 in the last video. 158 158 00:08:34,740 --> 00:08:37,470 And in this case, the side effects are gonna be 159 159 00:08:37,470 --> 00:08:42,440 to change, so to mutate the original accounts array. 160 160 00:08:42,440 --> 00:08:44,550 And so that's what we want to do here, 161 161 00:08:44,550 --> 00:08:47,843 and so for each is the way to go. 162 162 00:08:48,750 --> 00:08:52,900 So for each account in the accounts array, 163 163 00:08:52,900 --> 00:08:54,860 so I'm just calling this acc, 164 164 00:08:54,860 --> 00:08:58,800 which is again, an abbreviation for one single account. 165 165 00:08:58,800 --> 00:09:03,593 So for each account, we now want to do this here basically. 166 166 00:09:05,910 --> 00:09:10,163 So let's grab all this, we can remove this. 167 167 00:09:12,550 --> 00:09:15,720 And so let's create a new property on each 168 168 00:09:15,720 --> 00:09:17,143 of the account objects. 169 169 00:09:18,120 --> 00:09:21,680 So account.username, 170 170 00:09:21,680 --> 00:09:25,773 and that will be equal to user.owner, 171 171 00:09:28,840 --> 00:09:31,163 and so let's check out why that is. 172 172 00:09:32,420 --> 00:09:35,400 So each of these accounts has the owner property, 173 173 00:09:35,400 --> 00:09:38,870 and so that's where the name of the owner 174 174 00:09:38,870 --> 00:09:40,770 of the user comes from. 175 175 00:09:40,770 --> 00:09:42,360 So we take that, 176 176 00:09:42,360 --> 00:09:44,110 so account.owner 177 177 00:09:45,150 --> 00:09:47,703 and create or username from that. 178 178 00:09:49,690 --> 00:09:51,160 So that's what we do here. 179 179 00:09:51,160 --> 00:09:53,330 And then we create a new property on 180 180 00:09:53,330 --> 00:09:55,420 that account element. 181 181 00:09:55,420 --> 00:09:57,080 And yeah, 182 182 00:09:57,080 --> 00:09:59,420 and that will then contain the username 183 183 00:09:59,420 --> 00:10:01,513 that we create here. 184 184 00:10:04,180 --> 00:10:06,610 Here we have some kind of error, 185 185 00:10:06,610 --> 00:10:09,620 and of course, it's not user, 186 186 00:10:09,620 --> 00:10:12,023 it is account.owner. 187 187 00:10:13,530 --> 00:10:14,633 And now that's it, 188 188 00:10:16,670 --> 00:10:19,850 and in this function, we do not return anything, 189 189 00:10:19,850 --> 00:10:22,540 because again, what we're doing here 190 190 00:10:22,540 --> 00:10:25,090 is to produce a side effect. 191 191 00:10:25,090 --> 00:10:29,110 So we are doing something to this account object here. 192 192 00:10:29,110 --> 00:10:32,170 And so there is no need to return anything. 193 193 00:10:32,170 --> 00:10:35,200 We are just doing some work here, basically, 194 194 00:10:35,200 --> 00:10:37,843 we are not creating a new value to return. 195 195 00:10:39,660 --> 00:10:42,420 If we want to see if this actually worked, 196 196 00:10:42,420 --> 00:10:47,420 we can lock this accounts object, or this accounts array 197 197 00:10:47,500 --> 00:10:48,543 to the console. 198 198 00:10:49,655 --> 00:10:53,050 And so in there, we should now see our objects 199 199 00:10:53,050 --> 00:10:55,280 with a new property. 200 200 00:10:55,280 --> 00:10:58,850 And indeed, we get the username of js. 201 201 00:10:58,850 --> 00:11:00,623 And this one should be jd, 202 202 00:11:03,180 --> 00:11:05,630 and here or Stephen Thomas Williams, 203 203 00:11:05,630 --> 00:11:08,080 and indeed, it is the stw, 204 204 00:11:08,080 --> 00:11:09,993 that we had previously worked with. 205 205 00:11:12,200 --> 00:11:15,880 So in this lecture, it was very important to understand 206 206 00:11:15,880 --> 00:11:19,940 the use case for the map method here, which was perfect, 207 207 00:11:19,940 --> 00:11:23,170 because it allowed us to create a new simple array, 208 208 00:11:23,170 --> 00:11:26,110 which only contains the initials of whatever name 209 209 00:11:26,110 --> 00:11:27,560 it is used on. 210 210 00:11:27,560 --> 00:11:30,590 And then on the other hand, the for each method, 211 211 00:11:30,590 --> 00:11:33,080 it was a great use case to produce 212 212 00:11:33,080 --> 00:11:35,570 some so called side effects. 213 213 00:11:35,570 --> 00:11:38,530 So in other words, to simply do some work 214 214 00:11:38,530 --> 00:11:40,470 without returning anything. 215 215 00:11:40,470 --> 00:11:42,050 And so that's what we did here, 216 216 00:11:42,050 --> 00:11:45,030 we simply looped over the accounts array, 217 217 00:11:45,030 --> 00:11:46,330 and in each iteration, 218 218 00:11:46,330 --> 00:11:49,520 we manipulated the current account object, 219 219 00:11:49,520 --> 00:11:51,960 and edit a username to it 220 220 00:11:51,960 --> 00:11:54,700 based on the account owner, 221 221 00:11:54,700 --> 00:11:56,770 plus all of these transformations 222 222 00:11:56,770 --> 00:11:58,763 that we had already done before. 223 223 00:12:00,070 --> 00:12:03,280 So a couple of interesting and important takeaways 224 224 00:12:03,280 --> 00:12:04,550 from this video. 225 225 00:12:04,550 --> 00:12:06,730 So make sure to review it properly, 226 226 00:12:06,730 --> 00:12:10,430 and then let's move on to our next transforming method, 227 227 00:12:10,430 --> 00:12:12,333 which is the filter method. 19198