Original subtitles

1 1

Let's now start seeing 2

2

the three data transformation methods in practice, 3

3

starting with the map method in this video. 4

4

And as we just learned, the map method 5

5

is yet another way that we can use to loop over a race. 6

6

But unlike for each, the map method will give us 7

7

a brand new array 8

8

and this new array will contain in each position 9

9

the results of applying a callback function 10

10

to the original array elements. 11

11

So let's see how that works. 12

12

And let's start by bringing back our movements array here, 13

13

so this one, so we will once more work with these movements. 14

14

And in this one, we will try to convert them to US dollars. 15

15

So let's suppose these movements are in euros 16

16

and we now want to convert them to US dollars. 17

17

And let's suppose that one Euro is worth $1.1, 18

18

so let's just store that conversion rate here first 19

19

to a separate variable. 20

20

So Euro to USD is 1.1 and so now what we want to do 21

21

is to basically multiply each element 22

22

of the movements array by this 1.1. 23

23

So let's say movements.map, and then just like 24

24

in a, for each method, we need a callback function. 25

25

And this callback function also gets as an argument, 26

26

the current array element. 27

27

So again just like in a, for each method 28

28

that we studied before 29

29

and that's why I said back then 30

30

that once you understood the for each method, 31

31

all the other methods will then become 32

32

a lot easier to understand. 33

33

So let's call this one here, a Mov one more time. 34

34

And then here in the callback function 35

35

we need to return the value that we want the new array 36

36

to have in the current position. 37

37

And so in this case, we want the original array 38

38

times the euro to USD conversion rate. 39

39

And this will make sense when we now see this result. 40

40

And so let's actually store it to a variable. 41

41

So we already know that the map method will return 42

42

a brand new array. 43

43

And so we need to store that somewhere. 44

44

So let's call it movements USD, and then let's log both 45

45

to the console movements and movements USD, 46

46

give it a safe and sometimes we need 47

47

to reload the page as well. 48

48

But anyway, here is the result. 49

49

Now, nevermind these multiplication errors here. 50

50

I'll explain you a little bit later where they come from, 51

51

but essentially this new value here is now 220 52

52

which is exactly 200 times 1.1. 53

53

And so indeed we ended up with a new array 54

54

containing all the movements 55

55

but convert it from euros to US dollars. 56

56

And again that's because that is exactly 57

57

what we returned here from this callback function 58

58

we could of course have returned simply something else. 59

59

So we could have returned simply 23. 60

60

And so what do you think we will end up in this situation? 61

61

Well, we now simply have an array of the same length 62

62

which in each of the position contains 23 63

63

because that's what we returned from the callback function. 64

64

And so in each iteration of the original movements array 65

65

it simply put 23 into the new array at the same position. 66

66

But of course that's a little bit useless. 67

67

And so let's go back to the example that we're working with. 68

68

Great, and of course you can also see 69

69

that the original movements array 70

70

was not mutated at all right? 71

71

And so indeed the map method really only returns 72

72

in new array with the new elements. 73

73

And this really is the fundamentals 74

74

of how the map method works. 75

75

So we can use this 76

76

and we will use it in all kinds of different situations. 77

77

Now, just for fun let's write the same thing here 78

78

using a for off loop, so we can create another Muff. 79

79

And then we are looping the movements, of course. 80

80

And so in this loop, we want to create a new array. 81

81

And so in this case 82

82

actually, we first need to create that new array. 83

83

So let's call it again, movements USD, 84

84

but then for, so here we first need to define that MTRA 85

85

and then as we loop over movements 86

86

we keep pushing a value to the new movements USD for array. 87

87

So push mov current element times euros to USD, 88

88

Let's log that as well, 89

89

and it should look exactly the same, 90

90

and in fact it does. 91

91

And so, yeah, we could have written this here 92

92

and it doesn't look too bad either 93

93

but it's a completely different philosophy. 94

94

So here in the map method, we use a function 95

95

to solve this problem of creating a new array. 96

96

While here we simply loop over one array 97

97

and then manually create a new one. 98

98

So these are completely different philosophies 99

99

or we can also say paradigms. 100

100

So this here is more in line with functional programming 101

101

which is something that I have mentioned 102

102

a couple of times in this course. 103

103

And we will talk about it later in greater detail 104

104

and in modern JavaScript, there is definitely 105

105

a push going on in the direction of functional programming. 106

106

So over a more functional language. 107

107

And therefore in modern JavaScript this here 108

108

is the way to go. 109

109

So using methods together with callback functions 110

110

like this, is the new and modern way of doing stuff. 111

111

All right, but now let's actually make 112

112

our callback function here, look a little bit cleaner. 113

113

So this callback function we can simplify it greatly. 114

114

So do you remember arrow functions. 115

115

We could perfectly use an arrow function here 116

116

and simplified as here into just one line of code. 117

117

So here is my challenge for you. 118

118

Do you think that you can do that yourself? 119

119

So basically replacing this callback with an arrow function 120

120

take a minute and see if you can do that for yourself. 121

121

And I'll see you back here in a second. 122

122

So let's just copy this and then replace this by parts. 123

123

So first we can remove the function keywords 124

124

and then replace it with an arrow. 125

125

Then we can also remove these parenthesis here 126

126

because there's only one argument. 127

127

And finally, since we only have one line of code, 128

128

we can remove the curly braces 129

129

and we can even remove the return statement. 130

130

And so this code that we have here now 131

131

is exactly the same as before. 132

132

So we can comment out this one here. 133

133

And of course I'm leaving it here for reference, 134

134

but as I save it now you see that the result 135

135

is exactly the same. 136

136

And so here we now have a nice and clean 137

137

one liner callback function, just like this. 138

138

However many people don't like the way that this looks. 139

139

So they argued that this lacks the function 140

140

and the return keyword which they say 141

141

it leads to bad readability. 142

142

And that it makes this whole thing 143

143

more difficult to understand. 144

144

And while I can see that, that might be true. 145

145

I actually do prefer the fact how much smaller 146

146

and cleaner this code is. 147

147

So in my opinion if you understand well enough 148

148

how the arrow function actually works 149

149

then you will become familiar with this pretty quickly. 150

150

And so then there is no problem in writing code like this. 151

151

Okay, the main thing that you need to keep in mind 152

152

is that here we are actually returning this value. 153

153

So you need to remember 154

154

that this is like writing return here. 155

155

And so if you understand that, then you're good to go. 156

156

So I will actually use arrow functions in this situations 157

157

in the rest of the course, because I believe 158

158

that they are perfect for these small callback functions. 159

159

In my opinion they were really developed 160

160

for this kind of application. 161

161

But as always, if you do prefer the irregular 162

162

function syntax then please feel 100% free 163

163

to keep using them instead. 164

164

And with that being said, let's now experiment 165

165

a little bit more and explore the map method some more. 166

166

So just like to for each method, 167

167

the math method also has access 168

168

to the exact same three parameters. 169

169

So besides the current array element 170

170

which is this one here, we also get access 171

171

to the current index as well as the whole array. 172

172

So let's now use the map method to loop again 173

173

over the movements array. 174

174

But this time we're gonna create a string similar 175

175

to the one step we printed 176

176

to the console earlier using for each. 177

177

So let me actually get that logic. 178

178

And so it's this one here. 179

179

So let's specify a callback function 180

180

and indeed now I will actually use an arrow function. 181

181

And so, as I said, we get access to the current element 182

182

but also to the index and to the entire array 183

183

this time we do need a block, at least for now. 184

184

And then here we have our logic. 185

185

Now in this case, we will not lock something to the console. 186

186

So instead we want to return the string 187

187

so that it then gets put into the new array, 188

188

that results from the map method. 189

189

So let's say here movementsDiscriptions 190

190

so that's a long name, but anyway 191

191

again, here we do not want to lock something to the console. 192

192

So we don't want to simply do something with this value. 193

193

Like we do when we console.log instead 194

194

we really want to return it. 195

195

And so that will then place this value into the new array. 196

196

So let's save that. 197

197

Let's then also log this 198

198

to the console movementDescriptions. 199

199

And so indeed we get to this array 200

200

with these strings that we previously logged to the console. 201

201

And by the way it's completely acceptable 202

202

to have to return statements 203

203

or even more in the same function 204

204

as long as only one of them is executed, right? 205

205

So in this case either this one here is executed 206

206

or this one, it's impossible for both of them 207

207

to return at the same time, right? 208

208

And actually we can even simplify this whole thing here 209

209

because these two strings are essentially 210

210

the exact same thing, except for this word here. 211

211

And so let's do something else here, right. 212

212

Now you also have this math.absolute value 213

213

but if the value is already positive as it is here, 214

214

then that simply makes no difference. 215

215

And so let's use a ternary operator here, 216

216

to put either withdrew or deposited right here. 217

217

And so this has nothing to do with the map method, 218

218

but yeah, it's a good way to also keep practicing 219

219

the other skills that we have been learning. 220

220

So we can check if the movement is greater than zero. 221

221

So the same condition as here. 222

222

And if it is then at this part of the string, 223

223

it should say deposited. 224

224

And if not, well, then it should say withdrew. 225

225

And so like this, we built this string all in one go. 226

226

And so we can get rid of this. 227

227

We can get rid of this. 228

228

And so therefore we don't need the return keyword anymore. 229

229

And so it works just the same. 230

230

Okay, now, in this case, we don't need this array here. 231

231

So that's actually also get rid of it. 232

232

And it's a good idea to keep in mind why we actually 233

233

get access to these two parameters here. 234

234

So one more time, all we do here is to pass 235

235

this callback function into the map method, right? 236

236

But we do not call this function by ourselves. 237

237

It is the map method who we'll call this function 238

238

for each of the array elements in the movement array. 239

239

Okay, now each time that the map method calls or callback 240

240

it will simply pass in the current array element as well 241

241

as the current index and the whole array. 242

242

And off these three, here we are only using the first two, 243

243

just the current element and the current index, all right? 244

244

And with this, I hope that by now 245

245

it is really crystal clear how this all works. 246

246

Now you could say, that what we did here 247

247

with this map method is essentially the same 248

248

as what we did with the, for each method. 249

249

But in fact, there is a big, big difference 250

250

between these two approaches. 251

251

So before we printed each line individually 252

252

to the console, as we were looping over the array. 253

253

So in each of the iterations, we performed some action 254

254

that was then visible in the console 255

255

and we can call this a side effect. 256

256

So the, for each method creates side effects. 257

257

But now here with this map method, 258

258

all we did was to return each 259

259

of the strings from the callback. 260

260

And so basically they got added into a new array. 261

261

And then finally we logged that entire array 262

262

to the console and not the elements one by one. 263

263

And so here in this map method 264

264

we did not create a side effect in each of the iteration. 265

265

All we did was to build a brand new array 266

266

and this idea of side effects will become important again, 267

267

as we talk more about functional programming. 268

268

Great, and this is how the map method works, 269

269

in the next video, we will see a more practical application 270

270

of it in the context of our Bankist application.