Original subtitles

1 1

Let's now use the map and for each method 2

2

to compute usernames for each account owner 3

3

in our application. 4

4

So we have these four accounts, and for each of them, 5

5

we want to basically compute a username. 6

6

And the username is simply the initials 7

7

of each of the users. 8

8

So let's just start with one of them, 9

9

just with one string to make it really easy. 10

10

And then we will generalize that function for 11

11

the entire accounts array that we have down here, 12

12

so which contains all of the accounts. 13

13

But for now, I will just grab this string here 14

14

and create a username for this one. 15

15

So let's do that down here, 16

16

after this first function that we created. 17

17

And for now, we will do this outside of a function 18

18

just to see how it works, 19

19

and then afterwards, we will create a new function. 20

20

So let's say the user is this one here, 21

21

and we want to compute the username. 22

22

So for this one here, the username should be stw. 23

23

So that's just the initials in lowercase. 24

24

And so let's do that. 25

25

So we start by transforming this string to a lowercase. 26

26

So we already know how to do that. 27

27

And now we simply want to take 28

28

the first letter of each of the words. 29

29

And so we need to basically split up the string 30

30

into the multiple words. 31

31

So this is a very common use case for the split method, 32

32

so dividing by spaces, 33

33

which will divide the string into words. 34

34

And let's just take a look at what we have now, 35

35

so that we can discuss our next move here. 36

36

So username, and so right now 37

37

we have Stephen, Thomas, and Williams. 38

38

And so how do we take each of the first letters here? 39

39

Well, we could simply loop over the array, 40

40

and then take the first letter in each iteration, 41

41

and add them into a new array. 42

42

And then in the end, we would join that array, 43

43

and we would end up with just a string of stw. 44

44

So let's do what I just said. 45

45

So looping over this array, 46

46

taking the first letter and then putting it 47

47

into a new array. 48

48

And that is exactly what the map method does. 49

49

We can do that directly here, 50

50

because this split method here returns an array. 51

51

And we can then call the map method 52

52

on that resulting array. 53

53

So we can immediately do .map here, 54

54

just like we can call the split method 55

55

on the result of the two lowercase method, 56

56

because this one here returns a string, 57

57

and split is available on all strings. 58

58

So let's define our callback function here. 59

59

And I will start by doing it with a irregular function. 60

60

And so here, let's say we get a word 61

61

or a name, it doesn't really matter here. 62

62

And so in each iteration, what we want to do 63

63

is simply to return the first letter. 64

64

So that's name at position zero. 65

65

And so right now, 66

66

this should be an array with only these three initials. 67

67

So let's see. 68

68

And yes, beautiful. 69

69

That worked just fine, 70

70

and so the results of this here, 71

71

of this whole thing, is now an array. 72

72

And on an array, we can call the join method. 73

73

So .join, and simply by an empty string, 74

74

and this will give us the final result of stw. 75

75

All right, great. 76

76

Now let's simplify this callback function here. 77

77

And again, I will start by deleting the function keyword. 78

78

Then we can also delete the curly braces, 79

79

and finally, also delete the return. 80

80

And so, see how simple this has become now. 81

81

So, we transform name to name at the first position, 82

82

so just the first character. 83

83

And one more time, don't forget that 84

84

this is actively returning here, 85

85

we just don't see it. 86

86

But the return is happening. 87

87

And this is the reason why this works, 88

88

because the callback function in the map method 89

89

always needs to return the new value 90

90

that should be in the new array. 91

91

All right, so this works great with this username. 92

92

Let's not take this actually into a function. 93

93

So, I'm cutting it here, 94

94

and let's say 95

95

create 96

96

usernames, 97

97

create a function, add this here, 98

98

and for now, let's say, 99

99

we get the user in here. 100

100

And so now we can call the function with this string. 101

101

And here, I called console.log, 102

102

instead of create username. 103

103

And yeah, if we want to see the result, 104

104

we would also have to log it to the console now. 105

105

So of course, first returning the username, 106

106

and then log it to the console here as well. 107

107

And so Indeed, we now get the same initial 108

108

that we had before. 109

109

But now we actually want to compute 110

110

one username for each of the account holders 111

111

in our accounts array. 112

112

So to do that, should we use the map 113

113

or the for each method. 114

114

Well, we do not want to create a new array 115

115

in this situation, 116

116

all we want to do is to modify the object, 117

117

so the elements that already exist in the accounts array. 118

118

So 119

119

in this array here, 120

120

and so what we want is to simply loop over 121

121

this array here, and then do something. 122

122

And so what we want that we use for each. 123

123

So let's modify this function here some more, 124

124

and instead of simply receiving one user, 125

125

what we want to do is to receive all the accounts. 126

126

So basically an array of account. 127

127

And this goes back to the philosophy 128

128

I explained to you in the last lecture, which is that, 129

129

each function should actually receive the data 130

130

that it should work with, 131

131

instead of using a global variable. 132

132

So that's exactly what we did here, with the movements, 133

133

which we could have read directly from the global variable 134

134

of account1.movements for example. 135

135

But instead, we created a function that receives that data, 136

136

and can then work with that data, 137

137

or with any other data that we choose to pass into it. 138

138

And so here we are doing the same, 139

139

we do not want to rely on the accounts array 140

140

that we already have. 141

141

But instead, we want to pass it into the function. 142

142

Let's get rid of all of this. 143

143

And so what I mean is to actually pass 144

144

the accounts array in here. 145

145

And here, it doesn't have to be called accounts. 146

146

Let's just call it like this, as an abbreviation. 147

147

Just to remove a little bit of the confusion 148

148

that you might have. 149

149

And now, as we were saying, 150

150

we need to use the for each method here, 151

151

because again, we do not want to create a new array, 152

152

we simply want to modify basically, 153

153

the array that we get as an input. 154

154

And this is a really important distinction to keep in mind. 155

155

So here we are again, 156

156

talking about the side effects that I mentioned 157

157

in the last video. 158

158

And in this case, the side effects are gonna be 159

159

to change, so to mutate the original accounts array. 160

160

And so that's what we want to do here, 161

161

and so for each is the way to go. 162

162

So for each account in the accounts array, 163

163

so I'm just calling this acc, 164

164

which is again, an abbreviation for one single account. 165

165

So for each account, we now want to do this here basically. 166

166

So let's grab all this, we can remove this. 167

167

And so let's create a new property on each 168

168

of the account objects. 169

169

So account.username, 170

170

and that will be equal to user.owner, 171

171

and so let's check out why that is. 172

172

So each of these accounts has the owner property, 173

173

and so that's where the name of the owner 174

174

of the user comes from. 175

175

So we take that, 176

176

so account.owner 177

177

and create or username from that. 178

178

So that's what we do here. 179

179

And then we create a new property on 180

180

that account element. 181

181

And yeah, 182

182

and that will then contain the username 183

183

that we create here. 184

184

Here we have some kind of error, 185

185

and of course, it's not user, 186

186

it is account.owner. 187

187

And now that's it, 188

188

and in this function, we do not return anything, 189

189

because again, what we're doing here 190

190

is to produce a side effect. 191

191

So we are doing something to this account object here. 192

192

And so there is no need to return anything. 193

193

We are just doing some work here, basically, 194

194

we are not creating a new value to return. 195

195

If we want to see if this actually worked, 196

196

we can lock this accounts object, or this accounts array 197

197

to the console. 198

198

And so in there, we should now see our objects 199

199

with a new property. 200

200

And indeed, we get the username of js. 201

201

And this one should be jd, 202

202

and here or Stephen Thomas Williams, 203

203

and indeed, it is the stw, 204

204

that we had previously worked with. 205

205

So in this lecture, it was very important to understand 206

206

the use case for the map method here, which was perfect, 207

207

because it allowed us to create a new simple array, 208

208

which only contains the initials of whatever name 209

209

it is used on. 210

210

And then on the other hand, the for each method, 211

211

it was a great use case to produce 212

212

some so called side effects. 213

213

So in other words, to simply do some work 214

214

without returning anything. 215

215

And so that's what we did here, 216

216

we simply looped over the accounts array, 217

217

and in each iteration, 218

218

we manipulated the current account object, 219

219

and edit a username to it 220

220

based on the account owner, 221

221

plus all of these transformations 222

222

that we had already done before. 223

223

So a couple of interesting and important takeaways 224

224

from this video. 225

225

So make sure to review it properly, 226

226

and then let's move on to our next transforming method, 227

227

which is the filter method.