Original subtitles

1 1

So up until now, 2

2

we have been using the map filter 3

3

and reduce methods kind of in isolation. 4

4

However, we can take this one step further 5

5

by chaining all these methods one after another. 6

6

For example, let's say that we wanted to take 7

7

all the movement deposits then convert them 8

8

from euros to dollars and finally add them all up, 9

9

so that we know exactly how much was deposited 10

10

into the account in US dollars. 11

11

Okay. 12

12

Now we could of course, 13

13

do each of these operations individually 14

14

and store each result in a new variable. 15

15

However, we can also do it all in one go. 16

16

So let's do that. 17

17

And I will start here with the filter method. 18

18

So as I said, we want to take all of the deposits. 19

19

So we get the movement here 20

20

and then we filter only for movements that are positive. 21

21

And so only these are the deposits. 22

22

And so the result of this 23

23

operation here will be in your array. 24

24

And so now we can call map on that array. 25

25

So here again, we then get a movement 26

26

and now we can convert that movement to US dollars. 27

27

So we can do that with that variable that we used before. 28

28

Let's see where that is. 29

29

So Euro to USD. 30

30

So, 31

31

movements times Euro to USD. 32

32

And so with this we converted 33

33

all of the deposits to US dollars, 34

34

but now we can take this even further 35

35

and on this result, we can also call a reduce. 36

36

And of course we could also call more filters or more maps, 37

37

but now let's just do a reduce here. 38

38

And so basically add all of these values together. 39

39

And so we already know how that works. 40

40

So accumulator and then the current movement, 41

41

and we just need to return accumulator 42

42

plus the current movement. 43

43

So that's movement and zero. 44

44

And so now let's store all of this into total 45

45

deposits in US dollar. 46

46

Okay. 47

47

So you see that we did three data 48

48

transformations here all in one go. 49

49

So let's log it to the console to see that we 50

50

actually get a result here. 51

51

And yeah, we do. 52

52

So this is the deposits that we did 53

53

into our account in US dollars. 54

54

And as I mentioned we could of course 55

55

chain many other methods here as well, 56

56

as long as they return new arrays. 57

57

So filter returns a new array. 58

58

So we could have added something else here 59

59

or the same goes for map, but reduce, 60

60

for example, will return a value. 61

61

So only this number in this case. 62

62

And so of course here we could now not have chained 63

63

a map or a filter after this. 64

64

So we can only chain a method after another one, 65

65

if the first one returns an array. 66

66

So you can imagine all of this 67

67

as a sort of pipeline that processes our data. 68

68

So we put data in at the beginning, which is here, 69

69

and then it goes through all these steps. 70

70

So in this case, 71

71

these three steps here and then in the end our input data 72

72

comes out processed on the other side of the pipeline. 73

73

So let's just write this here 74

74

because I think this is a nice analogy, right? 75

75

Now, when we chain all these methods together here, 76

76

it can be a little bit hard to debug 77

77

if one of the results is not what we expect. 78

78

For example, 79

79

if this result here would be something really weird, 80

80

we wouldn't really know from which step of this pipeline 81

81

it would come from, right? 82

82

And to solve this, 83

83

it would be good to check out the array 84

84

in each of these different steps. 85

85

So let's say we did a mistake here 86

86

and we wrote it like this. 87

87

And so our result would come out negative 88

88

and that would be strange. 89

89

So in this case, it will probably be nice to know 90

90

the result of this filter operation. 91

91

And so we can do that by using the array parameter 92

92

that we get access to in this callback function. 93

93

Remember? 94

94

So we have the current element, the index, 95

95

and the entire array. 96

96

And actually let's duplicate this here first. 97

97

Okay and set this back to what it was. 98

98

Okay. 99

99

So that's now locked to the console, this array. 100

100

And so now we need these curly braces 101

101

because we will have a code block 102

102

and we need to actually return our calculation here. 103

103

But anyway, we can now take a look 104

104

at the whole current array that 105

105

this map method here is being called on. 106

106

So let's take a look. 107

107

And so indeed, it is this array 108

108

of the three negative movements. 109

109

So let's log the movements here one more time. 110

110

So you see that indeed 111

111

we get to these three negative movements now. 112

112

And so that is the result of this filter here. 113

113

And so again, 114

114

if we want to see that result of only this operation, 115

115

we can check out the current array 116

116

and the next array method that has chained on that filter. 117

117

And so in this case, it's the map. 118

118

And so this is one of the great use cases 119

119

of having access to this current array. 120

120

Because as you see, of course, 121

121

this array has to be the result of the previous operation. 122

122

So of this filter. 123

123

It is not this initial movement array 124

124

because that's not what we called the map method on, 125

125

right? 126

126

The map method was called on 127

127

the result of movements, that filter, 128

128

and therefore that is the value here of this array. 129

129

That makes sense? 130

130

Now it was of course logged here three times 131

131

because this callback function here is called three times. 132

132

So once for each of these three values. 133

133

Okay, so let's put it back to what it was 134

134

and now we get to correct array. 135

135

This one is now printed five times 136

136

because there are five values in the array. 137

137

Let's just turn this one off here as well. 138

138

And so this was just to show you that we can 139

139

inspect the current array at any stage of the pipeline 140

140

using the third parameter of the callback function. 141

141

All right. 142

142

And so now that we know how this chaining works 143

143

we can go back to our application here. 144

144

Let's give us some more space 145

145

and we can now calculate these statistics down here. 146

146

So that's all of the deposits. 147

147

So incomes here basically. 148

148

Then we have the outcomes. 149

149

So that's the sum of all the withdrawals 150

150

and then also an interest that the bank might pay us. 151

151

And so let's go back up here to the application. 152

152

And so we already have display movements, 153

153

calcDisplayBalance. 154

154

And now here I will create another 155

155

function called calcDisplaySummary. 156

156

And just as our previous function here 157

157

to calculate the balance 158

158

this one also receives the movements data. 159

159

And so we will also call it 160

160

with the account one dot movements. 161

161

And once again, we will then later change this 162

162

to the user that is logging into the application. 163

163

Okay, so let's start by calculating the incomes. 164

164

So that's this first value here. 165

165

And so that's all the movements. 166

166

And then we filter them for only the positive ones. 167

167

And so this is now exactly what we did before. 168

168

So greater than zero. 169

169

And now onto this one, we simply chain another reduce 170

170

because now we want to add all these 171

171

positive numbers together. 172

172

So there's no mapping involved here. 173

173

It's just filtering and then adding together. 174

174

Give it a safe and now we can put it here 175

175

inside of this label, so this HTML element. 176

176

So it's always a good idea to check out the name of it. 177

177

So this one is called summary value in. 178

178

So as before I already have that here, 179

179

so it's this one and it's called labelSumIn. 180

180

We will also then need labelSumOut and labelSumInterest. 181

181

So keep these in mind for a bit later. 182

182

So here we have 183

183

labelSumIn 184

184

and then our old text content property. 185

185

So incomes and then the Euro sign. 186

186

And now I know how it works. 187

187

At least on Mac, you can use the emoji picker 188

188

and then you just search for a Euro like this. 189

189

And here you go. 190

190

And I'm sure there is something similar on Windows as well. 191

191

Let me actually copy it and put it 192

192

also here instead of this Euro, 193

193

and to same also here in this movement. 194

194

So here where we display all the movements 195

195

so that the Euro sign also appears here on all these. 196

196

Okay, this should now already be working. 197

197

So let's give it a safe, but nothing happened here. 198

198

That's because I am calling the wrong function here. 199

199

So this has gotta be summary. 200

200

So I was calling calcDisplayBalance for a second time. 201

201

Now it works, so that's 5,000 Euros. 202

202

And you see that also now here we have the Euro sign 203

203

which makes it look a little bit more 204

204

like a bank application, right? 205

205

And now do the same for the outgoing money. 206

206

So we're going to calculate a variable called out. 207

207

And now I want to leave this one here again 208

208

as a challenge for you. 209

209

So that's a very simple one. 210

210

Just don't look at the rest of the code 211

211

and I'm sure you can do this one without any problem. 212

212

So that's just movements dot filter. 213

213

And so now it's basically just the opposite. 214

214

So the negative movements. 215

215

Okay, and then labelSumOut, 216

216

set to out, 217

217

and data did not work. 218

218

I see we have an error here. 219

219

And so assignment to constant variable. 220

220

Oh, I see. 221

221

We are forgetting here the text content property. 222

222

Maybe you saw that coming and now it works here beautifully. 223

223

Okay, now I just want to get rid of this minus sign here. 224

224

We already know that the money is going out, 225

225

so there's no need for the negative sign. 226

226

So let's just take the absolute value here. 227

227

So we did that before. 228

228

So math dot abs and this is going to remove the sign. 229

229

Yeah, beautiful. 230

230

Now finally, the interest here. 231

231

And so let's say that this bank pays out an interest 232

232

each time that there is a deposit to the bank account. 233

233

And that interest is 1.2% of the deposited amount. 234

234

Unfortunately in the real world, it's nothing like that. 235

235

But here in our fictional bank, 236

236

we can do whatever rules we want, right? 237

237

So as I said, the interest is paid on each deposit. 238

238

So first we need to get these deposits. 239

239

And so that's this filter here. 240

240

Let me just copy it. 241

241

Okay. 242

242

And so now on each of these deposits, we will receive 1.2%. 243

243

So what do we do here? 244

244

Well, we're going to create a new array 245

245

which contains all of these interests. 246

246

And then in the end we can just add them together. 247

247

And so map is the way to go here. 248

248

So we take the current movement 249

249

and we could even call this array a deposit. 250

250

Let's do that. 251

251

We know that this has to be a deposit. 252

252

And so let's call it that to make it a bit more explicit. 253

253

We could do the same here, but that's not necessary. 254

254

So we get 1.2%. 255

255

So we multiply this by 1.2 divided by 100. 256

256

So that's how you calculate percentages. 257

257

And then finally we just edit all together. 258

258

So let's just take this one here, chain it here, 259

259

and now each of the current elements 260

260

is no longer a movement. 261

261

So let me just call it here an interest, so int. 262

262

All right, and now let's also just copy this one here. 263

263

So labelSumInterest 264

264

and then here of course it is the interest. 265

265

And you see we got six Euros and 24 cents of interest. 266

266

Great, but now let's say that the bank 267

267

introduces a new rule. 268

268

So now the bank only pays an interest 269

269

if that interest is at least one Euro 270

270

or whatever other currency. 271

271

So where do we put that in our calculation? 272

272

So again, only if one interest is at least one 273

273

only then it will be added here to this total. 274

274

And so this sounds like it's gotta be somewhere 275

275

between this place where we actually 276

276

calculate the individual interests 277

277

and here where we then add them together. 278

278

So let's add a new method here in the chain 279

279

between the map and the reduce. 280

280

And it is going to be a filter 281

281

because we basically want to exclude 282

282

the interests that are below one. 283

283

So this one here is an array of interests. 284

284

And actually let's take a look also 285

285

at the current array here. 286

286

So interests then I, which we're not going to need, 287

287

and the whole array. 288

288

And so let's log to the console the whole array, 289

289

just to see what's happening. 290

290

But anyway, what we will have to do here 291

291

is to filter the results of culling these interests here 292

292

for values that are at least one. 293

293

So interests greater or equal one. 294

294

And only these interests will make it 295

295

into the final calculation. 296

296

So into the next step here of the pipeline, 297

297

which is this reduce. 298

298

So you see that the interest now decreased a little bit 299

299

and that's because indeed 300

300

here in this array of interests, 301

301

we have one value that is below one. 302

302

So this 0.84, and therefore it will get filtered out 303

303

in this new step that we added here to the processing. 304

304

And so then the final interest 305

305

that's going to be paid by the bank 306

306

is only these other four values added together. 307

307

So these three plus this one, 308

308

but this one here has been excluded. 309

309

All right, that makes sense? 310

310

So anyway, 311

311

this was another great part here of our bankers application. 312

312

So with this, we now also completed this part here. 313

313

And hopefully you can start to really appreciate 314

314

the huge advantage that working with these array methods 315

315

gives us over simply working with more traditional loops. 316

316

And now just to finish this lecture, 317

317

let me just give you a couple of remarks about chaining. 318

318

So first we should not overuse chaining, 319

319

so we should try to optimize it 320

320

because chaining tons of methods one after the other 321

321

can cause a real performance issues 322

322

if we have really huge arrays. 323

323

So if we have a huge chain of methods, 324

324

chained one after the other, 325

325

we should try to compress all the functionality 326

326

that they do into as little methods as possible. 327

327

For example, sometimes we create way more 328

328

map methods then we actually need, 329

329

where we could just do it all in just one map call. 330

330

So when you chain methods like this, 331

331

keep looking for opportunities of 332

332

keeping up your codes performance. 333

333

And second, it is a bad practice in JavaScript 334

334

to chain methods that mutate the underlying original array. 335

335

And an example of that is the splice method. 336

336

So again, you should not chain a method 337

337

like the splice or the reverse method. 338

338

I mean, you can do that, 339

339

and for a small application like this one, 340

340

it's not a big deal and it's not going to cause problems, 341

341

but in a large scale application, 342

342

it's usually always a good practice 343

343

to avoid mutating arrays. 344

344

And we will come back to this 345

345

when we talk a little bit more about functional programming. 346

346

Anyway, with that being said there is now 347

347

another coding challenge waiting for you.