Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:00,891 --> 00:00:02,835 The next two array methods 2 2 00:00:02,835 --> 00:00:04,490 that we're gonna learn, 3 3 00:00:04,490 --> 00:00:07,790 are the flat and flat map methods. 4 4 00:00:07,790 --> 00:00:11,630 And thankfully, these are very easy to understand. 5 5 00:00:11,630 --> 00:00:13,143 So let's go. 6 6 00:00:14,650 --> 00:00:16,880 So let's say that we have an array 7 7 00:00:16,880 --> 00:00:18,693 with some arrays in it. 8 8 00:00:19,570 --> 00:00:22,083 So essentially a nested array. 9 9 00:00:23,810 --> 00:00:26,113 So let's say one, two, three, 10 10 00:00:27,180 --> 00:00:29,020 and then another array here, 11 11 00:00:29,020 --> 00:00:30,253 four, five, six, 12 12 00:00:31,370 --> 00:00:34,180 and then even some values like this. 13 13 00:00:34,180 --> 00:00:36,430 So this is perfectly normal, 14 14 00:00:36,430 --> 00:00:37,740 but what if we wanted 15 15 00:00:37,740 --> 00:00:41,600 to take all these elements in the separate 16 16 00:00:41,600 --> 00:00:43,420 and put all of these together 17 17 00:00:43,420 --> 00:00:45,280 in just one big array, 18 18 00:00:45,280 --> 00:00:47,040 which contains all the numbers here 19 19 00:00:47,040 --> 00:00:48,880 from one to eight? 20 20 00:00:48,880 --> 00:00:50,810 Well, that's pretty simple, 21 21 00:00:50,810 --> 00:00:53,793 using the new flat method. 22 22 00:00:54,800 --> 00:00:55,700 And they say new, 23 23 00:00:55,700 --> 00:00:58,670 because flat and also flat map 24 24 00:00:58,670 --> 00:01:01,340 were introduced in ES2019. 25 25 00:01:01,340 --> 00:01:03,120 So they are pretty recent, 26 26 00:01:03,120 --> 00:01:04,360 and one more time, 27 27 00:01:04,360 --> 00:01:06,470 they will therefore not work 28 28 00:01:06,470 --> 00:01:09,650 in super old browsers. Okay. 29 29 00:01:09,650 --> 00:01:11,210 And actually that's it, 30 30 00:01:11,210 --> 00:01:12,800 for the flat method. 31 31 00:01:12,800 --> 00:01:16,210 So no callback function, adjust like this, 32 32 00:01:16,210 --> 00:01:18,030 and we get indeed, 33 33 00:01:18,030 --> 00:01:20,486 or full array from one to eight. 34 34 00:01:20,486 --> 00:01:23,620 So (indistinct) removed the nested arrays 35 35 00:01:23,620 --> 00:01:25,310 and flattened the array, 36 36 00:01:25,310 --> 00:01:29,660 which is why the method is called flat. 37 37 00:01:29,660 --> 00:01:32,200 So very nice, very simple 38 38 00:01:32,200 --> 00:01:34,633 and no callback function this time. 39 39 00:01:35,610 --> 00:01:37,290 Okay. But now let's say 40 40 00:01:37,290 --> 00:01:40,100 that we have an array, 41 41 00:01:40,100 --> 00:01:41,973 which is even deeper nested. 42 42 00:01:43,390 --> 00:01:45,033 So let's call it arrDeep. 43 43 00:01:46,190 --> 00:01:48,790 And so this one right now has only, 44 44 00:01:48,790 --> 00:01:51,280 like, one level of nesting, 45 45 00:01:51,280 --> 00:01:52,120 but let's say that, 46 46 00:01:52,120 --> 00:01:55,493 these two here, are in their own array still. 47 47 00:01:56,350 --> 00:01:58,770 And maybe these two here as well. 48 48 00:01:58,770 --> 00:02:00,310 So now we have an array, 49 49 00:02:00,310 --> 00:02:02,603 inside an array, inside an array. 50 50 00:02:04,530 --> 00:02:05,910 So let's see what happens, 51 51 00:02:05,910 --> 00:02:07,493 when we flat this one, 52 52 00:02:11,880 --> 00:02:14,410 and we got the same result, 53 53 00:02:14,410 --> 00:02:17,580 but that's because I made this mistake. 54 54 00:02:17,580 --> 00:02:19,993 So we need to flatten arrDeep. 55 55 00:02:21,440 --> 00:02:23,700 And so now you'll see 56 56 00:02:23,700 --> 00:02:25,750 that we get this result, 57 57 00:02:25,750 --> 00:02:30,110 which still contains the two inner arrays. All right. 58 58 00:02:30,110 --> 00:02:32,030 So this means that the flat method, 59 59 00:02:32,030 --> 00:02:33,910 only goes one level deep, 60 60 00:02:33,910 --> 00:02:35,393 when flattening the array. 61 61 00:02:36,470 --> 00:02:37,860 So this three here, 62 62 00:02:37,860 --> 00:02:40,890 was inside the first level of nesting. 63 63 00:02:40,890 --> 00:02:43,170 And so therefore it was taken out 64 64 00:02:43,170 --> 00:02:44,880 and it's now in the main array, 65 65 00:02:44,880 --> 00:02:47,863 but then we still have this nested array in there. 66 66 00:02:48,860 --> 00:02:51,450 So we can fortunately fix that, 67 67 00:02:51,450 --> 00:02:54,110 by using the depth argument. 68 68 00:02:54,110 --> 00:02:56,300 So right now, basically flat, 69 69 00:02:56,300 --> 00:02:57,700 is running with the, 70 70 00:02:57,700 --> 00:02:59,203 one here as the depth. 71 71 00:03:00,080 --> 00:03:02,320 And so if we run it with one, 72 72 00:03:02,320 --> 00:03:03,710 which is the default, 73 73 00:03:03,710 --> 00:03:05,520 then we get this, 74 74 00:03:05,520 --> 00:03:08,023 but we can go two levels deep. 75 75 00:03:09,010 --> 00:03:13,350 And so now we get the same result as before. 76 76 00:03:13,350 --> 00:03:15,370 And that's because it now goes, 77 77 00:03:15,370 --> 00:03:17,880 even into the second level of nesting 78 78 00:03:17,880 --> 00:03:22,293 and also takes the element out of depth array. All right. 79 79 00:03:23,270 --> 00:03:25,230 So that's how flat works, 80 80 00:03:25,230 --> 00:03:28,390 but this example is not really that useful. 81 81 00:03:28,390 --> 00:03:29,460 And so let's go back 82 82 00:03:29,460 --> 00:03:31,460 to the bank accounts. 83 83 00:03:31,460 --> 00:03:33,820 So let's say that the bank itself, 84 84 00:03:33,820 --> 00:03:36,220 wants to calculate the overall balance 85 85 00:03:36,220 --> 00:03:37,620 of all the movements 86 86 00:03:37,620 --> 00:03:39,710 of all the accounts. 87 87 00:03:39,710 --> 00:03:42,773 So how would we go about solving this problem? 88 88 00:03:43,620 --> 00:03:45,040 Well, first of all, 89 89 00:03:45,040 --> 00:03:48,590 we have all these movements stored in arrays, 90 90 00:03:48,590 --> 00:03:51,160 and these arrays are inside the objects 91 91 00:03:51,160 --> 00:03:52,583 in the accounts array. 92 92 00:03:53,840 --> 00:03:58,840 So in this array that we have been using. 93 93 00:03:58,850 --> 00:04:02,460 So accounts, so that's the one, 94 94 00:04:02,460 --> 00:04:05,700 so this is where we have our movements. 95 95 00:04:05,700 --> 00:04:07,320 And so the first thing to do, 96 96 00:04:07,320 --> 00:04:08,960 is to take them out of here 97 97 00:04:08,960 --> 00:04:11,780 and put them all into one array. 98 98 00:04:11,780 --> 00:04:13,313 So how would we do that? 99 99 00:04:14,550 --> 00:04:16,650 Well, let's create a variable here called, 100 100 00:04:17,750 --> 00:04:22,750 account movements, and so we could do, 101 101 00:04:24,860 --> 00:04:29,200 accounts, accounts like this, 102 102 00:04:29,200 --> 00:04:30,950 and then what we want to create, 103 103 00:04:30,950 --> 00:04:32,250 is the new array, 104 104 00:04:32,250 --> 00:04:33,770 but with the same length, 105 105 00:04:33,770 --> 00:04:36,313 which only contains these movements array. 106 106 00:04:37,150 --> 00:04:39,836 So that's what I was just saying. 107 107 00:04:39,836 --> 00:04:40,980 And so for that, 108 108 00:04:40,980 --> 00:04:43,250 we can use the map method. 109 109 00:04:43,250 --> 00:04:45,930 So in each account, 110 110 00:04:45,930 --> 00:04:50,330 take the account.movements 111 111 00:04:50,330 --> 00:04:52,940 and so return that value, 112 112 00:04:52,940 --> 00:04:57,940 into the new array. All right. 113 113 00:04:58,970 --> 00:05:00,930 And so now we have this array, 114 114 00:05:00,930 --> 00:05:03,050 which then in turn contains the array 115 115 00:05:03,890 --> 00:05:05,370 of all the movements. 116 116 00:05:05,370 --> 00:05:06,203 And so you see, 117 117 00:05:06,203 --> 00:05:09,860 that now we actually have a nested structure here. 118 118 00:05:09,860 --> 00:05:13,310 So an array which contains other arrays. 119 119 00:05:13,310 --> 00:05:15,530 And so probably you can see 120 120 00:05:15,530 --> 00:05:17,900 where I'm going with this, 121 121 00:05:17,900 --> 00:05:20,580 because now I want an array, 122 122 00:05:20,580 --> 00:05:23,240 which simply contains all of these values, 123 123 00:05:23,240 --> 00:05:24,353 just in one array. 124 124 00:05:25,200 --> 00:05:28,590 So let's call this one all movements. 125 125 00:05:28,590 --> 00:05:31,710 And so it's gonna be, accountmovements.flat. 126 126 00:05:38,070 --> 00:05:41,050 And we have only one level of nesting. 127 127 00:05:41,050 --> 00:05:42,650 And so there's not even a need 128 128 00:05:42,650 --> 00:05:44,770 for any parameter here. 129 129 00:05:44,770 --> 00:05:46,053 So for any argument. 130 130 00:05:47,370 --> 00:05:49,280 So, now we get this, 131 131 00:05:49,280 --> 00:05:52,240 nice array of the length 29, 132 132 00:05:52,240 --> 00:05:54,220 which all of these movements. 133 133 00:05:54,220 --> 00:05:55,500 And now all we have to do, 134 134 00:05:55,500 --> 00:05:57,290 is to add them all together, 135 135 00:05:57,290 --> 00:06:00,223 which is pretty easy at this point. 136 136 00:06:02,009 --> 00:06:05,160 So let's call this one overall balance, 137 137 00:06:06,290 --> 00:06:11,177 is equal to allmovements.reduce, 138 138 00:06:13,580 --> 00:06:16,640 until we got the accumulator 139 139 00:06:16,640 --> 00:06:18,073 and to current movement. 140 140 00:06:20,100 --> 00:06:23,320 And we return accumulator plus movement, 141 141 00:06:23,320 --> 00:06:25,133 and we start with zero. 142 142 00:06:26,610 --> 00:06:28,910 So I'm doing this all very fast here, 143 143 00:06:28,910 --> 00:06:31,870 because I already explained all of this, 144 144 00:06:31,870 --> 00:06:33,683 multiple times at this point. 145 145 00:06:36,470 --> 00:06:38,560 And so here we get the final result 146 146 00:06:38,560 --> 00:06:41,150 of adding up all of these values, 147 147 00:06:41,150 --> 00:06:44,010 that were originally as we started, 148 148 00:06:44,010 --> 00:06:46,240 in the separate movements arrays 149 149 00:06:46,240 --> 00:06:47,490 that were in turn, 150 150 00:06:47,490 --> 00:06:49,853 the inside of the account objects. 151 151 00:06:51,061 --> 00:06:53,230 And of course we can make this here, 152 152 00:06:53,230 --> 00:06:55,740 a lot more beautiful. 153 153 00:06:55,740 --> 00:06:59,470 So instead of doing all of this separately, 154 154 00:06:59,470 --> 00:07:01,510 as you already know, 155 155 00:07:01,510 --> 00:07:02,933 we can use chaining. 156 156 00:07:03,870 --> 00:07:06,920 So we start with this here, 157 157 00:07:06,920 --> 00:07:08,943 so building a new array, 158 158 00:07:10,180 --> 00:07:13,670 out of the array of account objects, 159 159 00:07:13,670 --> 00:07:17,650 then we flat that result. 160 160 00:07:17,650 --> 00:07:20,183 And then we add it all together. 161 161 00:07:22,480 --> 00:07:24,583 So like this, 162 162 00:07:27,030 --> 00:07:29,660 and then we log it all to the console, 163 163 00:07:29,660 --> 00:07:32,210 and this is then unnecessary. 164 164 00:07:32,210 --> 00:07:34,533 And actually I will just delete all of it. 165 165 00:07:35,950 --> 00:07:37,320 Give it a safe, 166 166 00:07:37,320 --> 00:07:39,943 until we get the exact same result. 167 167 00:07:41,250 --> 00:07:44,640 Now it turns out that, using a map first 168 168 00:07:44,640 --> 00:07:46,670 and then flattening the result, 169 169 00:07:46,670 --> 00:07:48,870 and it's a pretty common operation. 170 170 00:07:48,870 --> 00:07:51,410 So that's exactly what we have here. 171 171 00:07:51,410 --> 00:07:52,864 So first we map, 172 172 00:07:52,864 --> 00:07:55,520 and then we flat that result. 173 173 00:07:55,520 --> 00:07:57,990 So that's exactly what we have here. 174 174 00:07:57,990 --> 00:07:59,470 And so to solve this, 175 175 00:07:59,470 --> 00:08:00,830 there is another method 176 176 00:08:00,830 --> 00:08:02,190 that was also introduced 177 177 00:08:02,190 --> 00:08:05,730 at the same time, which is flat map. 178 178 00:08:05,730 --> 00:08:08,280 And so flat map essentially combines, 179 179 00:08:08,280 --> 00:08:10,500 a map and a flat method, 180 180 00:08:10,500 --> 00:08:12,060 into just one method, 181 181 00:08:12,060 --> 00:08:14,153 which is better for performance. 182 182 00:08:17,446 --> 00:08:19,840 So let's do this one here again, 183 183 00:08:19,840 --> 00:08:24,043 but this time with flat map. 184 184 00:08:25,730 --> 00:08:28,890 So actually we can just copy it 185 185 00:08:28,890 --> 00:08:31,283 and here I'm gonna call it, just the two. 186 186 00:08:32,470 --> 00:08:36,343 And so here we will now use flat map instead. 187 187 00:08:37,370 --> 00:08:40,460 And since flat map also does mapping, 188 188 00:08:40,460 --> 00:08:43,520 it needs to receive exactly the same callback 189 189 00:08:43,520 --> 00:08:45,063 as a map method. 190 190 00:08:47,790 --> 00:08:49,730 So this is essentially a map method 191 191 00:08:49,730 --> 00:08:52,200 that all it does is, in the end, 192 192 00:08:52,200 --> 00:08:55,170 it then flattens the result. 193 193 00:08:55,170 --> 00:08:58,893 And so you see here the result is the same. 194 194 00:08:59,810 --> 00:09:02,440 Now just notice that, flat map here, 195 195 00:09:02,440 --> 00:09:04,360 only goes one level deep 196 196 00:09:04,360 --> 00:09:06,130 and we cannot change it. 197 197 00:09:06,130 --> 00:09:09,480 So if you do need to go deeper than just one level, 198 198 00:09:09,480 --> 00:09:12,680 you still need to use the flat method. 199 199 00:09:12,680 --> 00:09:14,940 So anyway, keep these two in mind. 200 200 00:09:14,940 --> 00:09:17,940 Whenever you find yourself in a situation 201 201 00:09:17,940 --> 00:09:19,640 where you have nested the race 202 202 00:09:19,640 --> 00:09:21,003 and need to work with them. 203 203 00:09:21,930 --> 00:09:22,763 And believe me, 204 204 00:09:22,763 --> 00:09:24,800 that happens more often than you think, 205 205 00:09:24,800 --> 00:09:25,633 and I believe that, 206 206 00:09:25,633 --> 00:09:28,050 even in the course of this course, 207 207 00:09:28,050 --> 00:09:30,023 there is gonna be another situation. 16152