Original subtitles

1 1

The next two array methods 2

2

that we're gonna learn, 3

3

are the flat and flat map methods. 4

4

And thankfully, these are very easy to understand. 5

5

So let's go. 6

6

So let's say that we have an array 7

7

with some arrays in it. 8

8

So essentially a nested array. 9

9

So let's say one, two, three, 10

10

and then another array here, 11

11

four, five, six, 12

12

and then even some values like this. 13

13

So this is perfectly normal, 14

14

but what if we wanted 15

15

to take all these elements in the separate 16

16

and put all of these together 17

17

in just one big array, 18

18

which contains all the numbers here 19

19

from one to eight? 20

20

Well, that's pretty simple, 21

21

using the new flat method. 22

22

And they say new, 23

23

because flat and also flat map 24

24

were introduced in ES2019. 25

25

So they are pretty recent, 26

26

and one more time, 27

27

they will therefore not work 28

28

in super old browsers. Okay. 29

29

And actually that's it, 30

30

for the flat method. 31

31

So no callback function, adjust like this, 32

32

and we get indeed, 33

33

or full array from one to eight. 34

34

So (indistinct) removed the nested arrays 35

35

and flattened the array, 36

36

which is why the method is called flat. 37

37

So very nice, very simple 38

38

and no callback function this time. 39

39

Okay. But now let's say 40

40

that we have an array, 41

41

which is even deeper nested. 42

42

So let's call it arrDeep. 43

43

And so this one right now has only, 44

44

like, one level of nesting, 45

45

but let's say that, 46

46

these two here, are in their own array still. 47

47

And maybe these two here as well. 48

48

So now we have an array, 49

49

inside an array, inside an array. 50

50

So let's see what happens, 51

51

when we flat this one, 52

52

and we got the same result, 53

53

but that's because I made this mistake. 54

54

So we need to flatten arrDeep. 55

55

And so now you'll see 56

56

that we get this result, 57

57

which still contains the two inner arrays. All right. 58

58

So this means that the flat method, 59

59

only goes one level deep, 60

60

when flattening the array. 61

61

So this three here, 62

62

was inside the first level of nesting. 63

63

And so therefore it was taken out 64

64

and it's now in the main array, 65

65

but then we still have this nested array in there. 66

66

So we can fortunately fix that, 67

67

by using the depth argument. 68

68

So right now, basically flat, 69

69

is running with the, 70

70

one here as the depth. 71

71

And so if we run it with one, 72

72

which is the default, 73

73

then we get this, 74

74

but we can go two levels deep. 75

75

And so now we get the same result as before. 76

76

And that's because it now goes, 77

77

even into the second level of nesting 78

78

and also takes the element out of depth array. All right. 79

79

So that's how flat works, 80

80

but this example is not really that useful. 81

81

And so let's go back 82

82

to the bank accounts. 83

83

So let's say that the bank itself, 84

84

wants to calculate the overall balance 85

85

of all the movements 86

86

of all the accounts. 87

87

So how would we go about solving this problem? 88

88

Well, first of all, 89

89

we have all these movements stored in arrays, 90

90

and these arrays are inside the objects 91

91

in the accounts array. 92

92

So in this array that we have been using. 93

93

So accounts, so that's the one, 94

94

so this is where we have our movements. 95

95

And so the first thing to do, 96

96

is to take them out of here 97

97

and put them all into one array. 98

98

So how would we do that? 99

99

Well, let's create a variable here called, 100

100

account movements, and so we could do, 101

101

accounts, accounts like this, 102

102

and then what we want to create, 103

103

is the new array, 104

104

but with the same length, 105

105

which only contains these movements array. 106

106

So that's what I was just saying. 107

107

And so for that, 108

108

we can use the map method. 109

109

So in each account, 110

110

take the account.movements 111

111

and so return that value, 112

112

into the new array. All right. 113

113

And so now we have this array, 114

114

which then in turn contains the array 115

115

of all the movements. 116

116

And so you see, 117

117

that now we actually have a nested structure here. 118

118

So an array which contains other arrays. 119

119

And so probably you can see 120

120

where I'm going with this, 121

121

because now I want an array, 122

122

which simply contains all of these values, 123

123

just in one array. 124

124

So let's call this one all movements. 125

125

And so it's gonna be, accountmovements.flat. 126

126

And we have only one level of nesting. 127

127

And so there's not even a need 128

128

for any parameter here. 129

129

So for any argument. 130

130

So, now we get this, 131

131

nice array of the length 29, 132

132

which all of these movements. 133

133

And now all we have to do, 134

134

is to add them all together, 135

135

which is pretty easy at this point. 136

136

So let's call this one overall balance, 137

137

is equal to allmovements.reduce, 138

138

until we got the accumulator 139

139

and to current movement. 140

140

And we return accumulator plus movement, 141

141

and we start with zero. 142

142

So I'm doing this all very fast here, 143

143

because I already explained all of this, 144

144

multiple times at this point. 145

145

And so here we get the final result 146

146

of adding up all of these values, 147

147

that were originally as we started, 148

148

in the separate movements arrays 149

149

that were in turn, 150

150

the inside of the account objects. 151

151

And of course we can make this here, 152

152

a lot more beautiful. 153

153

So instead of doing all of this separately, 154

154

as you already know, 155

155

we can use chaining. 156

156

So we start with this here, 157

157

so building a new array, 158

158

out of the array of account objects, 159

159

then we flat that result. 160

160

And then we add it all together. 161

161

So like this, 162

162

and then we log it all to the console, 163

163

and this is then unnecessary. 164

164

And actually I will just delete all of it. 165

165

Give it a safe, 166

166

until we get the exact same result. 167

167

Now it turns out that, using a map first 168

168

and then flattening the result, 169

169

and it's a pretty common operation. 170

170

So that's exactly what we have here. 171

171

So first we map, 172

172

and then we flat that result. 173

173

So that's exactly what we have here. 174

174

And so to solve this, 175

175

there is another method 176

176

that was also introduced 177

177

at the same time, which is flat map. 178

178

And so flat map essentially combines, 179

179

a map and a flat method, 180

180

into just one method, 181

181

which is better for performance. 182

182

So let's do this one here again, 183

183

but this time with flat map. 184

184

So actually we can just copy it 185

185

and here I'm gonna call it, just the two. 186

186

And so here we will now use flat map instead. 187

187

And since flat map also does mapping, 188

188

it needs to receive exactly the same callback 189

189

as a map method. 190

190

So this is essentially a map method 191

191

that all it does is, in the end, 192

192

it then flattens the result. 193

193

And so you see here the result is the same. 194

194

Now just notice that, flat map here, 195

195

only goes one level deep 196

196

and we cannot change it. 197

197

So if you do need to go deeper than just one level, 198

198

you still need to use the flat method. 199

199

So anyway, keep these two in mind. 200

200

Whenever you find yourself in a situation 201

201

where you have nested the race 202

202

and need to work with them. 203

203

And believe me, 204

204

that happens more often than you think, 205

205

and I believe that, 206

206

even in the course of this course, 207

207

there is gonna be another situation.