Original subtitles

1 1

In this video, we're gonna talk about 2

2

the third data transformations method, 3

3

which is the reduce method. 4

4

And as you will remember, 5

5

we use the reduce method to essentially boil down 6

6

all the elements in an array to one single value. 7

7

And we talked about the example of 8

8

adding up all the numbers in one array, right? 9

9

And so let's try that now with all movements array. 10

10

And remember that array looks like this. Okay. 11

11

And then by adding up all these numbers, 12

12

so both the deposits and the withdrawals, 13

13

we end up with the global balance of the account, basically. 14

14

So let's start using the reduce method here. 15

15

And so, as I just said, 16

16

we're gonna call it on the movements array. 17

17

And the results of the reduce method will be, 18

18

as I just said, the global balance of the account. 19

19

So let's call the result, balance. 20

20

And remember that in this case, 21

21

this balance will be simply one value 22

22

and not an entire array. 23

23

Okay. So the reduce function also gets a callback function, 24

24

but this one is a little bit different from the other ones, 25

25

like the one in map or for each. 26

26

So in these other callbacks, 27

27

the first parameter is always 28

28

the current element of the array. 29

29

Let's call it current. 30

30

The second one is the current index 31

31

and the third one is the entire array. 32

32

But here in the callback function of the reduce method, 33

33

the first parameter is actually 34

34

something called the accumulator. 35

35

So let's call it acc like this 36

36

as an abbreviation of accumulator. 37

37

And this accumulator is essentially like a snowball 38

38

that keeps accumulating the value 39

39

that we ultimately want to return. 40

40

So in the case of adding all the elements 41

41

or all the numbers of an array together, 42

42

that will be the sum. 43

43

So let me write that here. 44

44

Oops. 45

45

So let me write accumulator 46

46

it's like a snowball. 47

47

All right. 48

48

But anyway, let's not write the actual function block here. 49

49

So as always, this callback function here 50

50

will be called in each iteration 51

51

of a looping over the array. 52

52

So reduce also loops over the array 53

53

and calls this callback in each iteration, 54

54

but now what will we actually do 55

55

in each of these iterations? 56

56

Well, since the accumulator is the value 57

57

that we will keep adding to what we're gonna do here 58

58

is to add the current value to the accumulator. 59

59

So the accumulator plus the current value. Okay. 60

60

And this works because in each call of 61

61

the callback function, 62

62

the accumulator will be the current sum 63

63

of all the previous values. 64

64

And so we will really keep adding to this accumulator 65

65

in each iteration of the loop. 66

66

Finally, we also need to return this value here 67

67

from the callback. 68

68

And so this is how the new accumulator 69

69

can then be used in the next iteration of the loop. 70

70

So basically in each loop iteration, 71

71

we return the updated accumulator 72

72

so the current one, plus the new current value. 73

73

And so like this, we can then keep adding to it 74

74

in the next iteration. 75

75

Okay? 76

76

So this callback function is the first argument 77

77

of the reduce method, 78

78

but the reduce method actually has a another, 79

79

so a second parameter, 80

80

and that is the initial value of the accumulator. 81

81

So the value that we specify here, 82

82

which in this case is gonna be zero is the initial value 83

83

of the accumulator in the first loop iteration. 84

84

And so in this example, we want to start counting 85

85

or we want to start adding at zero. 86

86

And so therefore we simply specify zero here. 87

87

Okay, and with this we should be able 88

88

to already take a look at our balance. 89

89

And yeah, so we have one single number. 90

90

So indeed everything was boiled down to this one number, 91

91

which we can suppose is all of these values here 92

92

added together, all right. 93

93

And to make this even more clear to see, 94

94

that's actually always log the accumulator to the console. 95

95

So let's say iteration number I 96

96

and enter the accumulator in there. 97

97

Okay, so we see that in iteration zero, 98

98

the accumulator is zero. 99

99

And so this is the value that we specified here 100

100

as the starter so as the initial value. 101

101

Then in the second iteration, 102

102

the accumulator is already at 200 103

103

and that's because that is the initial value 104

104

plus the current value in the previous iteration. 105

105

So that was 200 there. 106

106

And so this zero plus the 200 creates the new accumulator, 107

107

which is done in the next iteration, 200. 108

108

Then in this iteration, we add the current value again, 109

109

which is 450. 110

110

So that result is 650. 111

111

And therefore in the next iteration, 112

112

that's the value of the accumulator. 113

113

Okay. And so here you can really see 114

114

like the snowball effect of all of these values, 115

115

adding up to one final value. 116

116

And in the end, that value is essentially the accumulator. 117

117

Now here we see the value of going down 118

118

because in this iteration, 119

119

we are adding minus 400 120

120

and so 250 is 650 minus 400. 121

121

Okay, so in the last iteration the value is 2,540, 122

122

and then adding 1,300 will eventually result 123

123

in this value here. 124

124

Great. So this is really how the reduce method works. 125

125

And I think this a log here 126

126

is a great visualization of that. 127

127

Let's give it all the space we need. 128

128

And let me just change this one here to 100, 129

129

so that you see the effect of changing this. 130

130

And so now we can expect this accumulator 131

131

in the beginning being 100. 132

132

And so we already start with a small snowball here, 133

133

which then we keep adding to, 134

134

and therefore our final balance is now 100 euros 135

135

or whatever it is larger. 136

136

Okay. And yeah, 137

137

let's one more time do the same thing manually, 138

138

basically with a four loop. 139

139

So of movements. 140

140

And so we need one more time, an external variable here, 141

141

which is gonna be the sum. 142

142

Well, let's call it balance two. 143

143

So balance two starts at zero. 144

144

And so essentially this is, 145

145

or initial accumulator value just like this zero 146

146

and then sum plus equal the current movement. 147

147

And if we lock balance two, we will get, okay. 148

148

Now of course this has to be balance two, 149

149

but now we get indeed the same result. 150

150

And so here you can see this common pattern 151

151

that we always need an external variable 152

152

whenever we want to use a for loop. 153

153

And that's fine if you only need one loop, 154

154

but it starts to become really cumbersome 155

155

and unpractical when we use many loops 156

156

for doing many operations. 157

157

So these methods that we've been studying, 158

158

they completely avoid this extra variable 159

159

and they simply return the variable 160

160

or the value actually right away. 161

161

All right. 162

162

And of course we can write here in an even simpler way. 163

163

So using an arrow function 164

164

and I will still keep this here 165

165

so that we can see the return that's happening. 166

166

So first we can get rid of this. 167

167

Then we get rid of this. 168

168

We also don't need any of this, 169

169

but here we always use or need the accumulator 170

170

and the current value. 171

171

So here we need parenthesis 172

172

then the arrow. 173

173

And then as always, we can get rid of all of this. 174

174

And so now still, or balanced is the same. Awesome. 175

175

So understanding how the reduce method works 176

176

is something really important, 177

177

but it's also way more confusing than the other ones, 178

178

but I'm sure you're well underway 179

179

of really understanding it. 180

180

And now that we know how it works, 181

181

we can actually now also calculate the balance 182

182

of these movements here and then print that balance 183

183

right here to our application and user interface. 184

184

And so let's go ahead and do that here. 185

185

So finally back to our application here. 186

186

And so let's do that down here. 187

187

So calc and print, balance. 188

188

And so this function here will once again, 189

189

receive the movements as an input. 190

190

So any array of movements will work. 191

191

And so now let's calculate the balance based on this array. 192

192

And essentially this is exactly what we wrote to before. 193

193

So that's movement dot reduce, 194

194

but it doesn't hurt to write it here again. 195

195

So remember the first parameter is now the accumulator 196

196

and only the second one is the current value. 197

197

So let's call it the movement now. 198

198

And so here simply we return the accumulator 199

199

plus the current movement and we start at zero. 200

200

Great. And now all we need to do is to display it 201

201

here in this element. 202

202

So let's check this out and it is called the balance value. 203

203

And just like before I already have it selected here, 204

204

and this is a label, so balance value is here. 205

205

So I called it label balance 206

206

and so label is basically all the things 207

207

where we simply want to put some text, all right? 208

208

So let's say label balance dot text content. 209

209

And this one we already know equals the balance 210

210

and let's actually do a template string here, 211

211

or a template literal and also display the Euro sign. 212

212

Well, I don't know where it is, 213

213

so let's just write EUR, which also means EURO. 214

214

And so now let's see of course 215

215

we didn't call the function yet. 216

216

So let's do that here as well. 217

217

And actually let's put this function here 218

218

where it makes a little bit more sense 219

219

because it kind of belongs to this display movements here. 220

220

Okay. So let's actually also call this one here, 221

221

calc and display balance. 222

222

So to give it a similar name as that one. 223

223

And so now I'm gonna call it, calc display balance. 224

224

And once again, I'm calling it with account one. 225

225

So account one dot movements, 226

226

and then later on, as we keep developing this application 227

227

of course these movements here that we're gonna use 228

228

will be from the account that locked into the application. 229

229

So if Jonas locked into the application, 230

230

then Jonas's movements will be shown and Jonas balance. 231

231

But if Steven locks in then of course 232

232

Steven's movements and Steven's balance will be shown here. 233

233

And right now we already see our balance up here. 234

234

And so this actually happens to be exactly the same 235

235

we calculated before. 236

236

So also 3,840, 237

237

because the movements are indeed also exactly the same. 238

238

Great. So that's beautiful with this, 239

239

we actually already completed some parts here 240

240

of our flow chart. 241

241

So let's also keep this one handy here 242

242

so that we can keep looking at it. 243

243

And so we already did calculating the balance 244

244

and displaying the balance. 245

245

So we did all this in just one function 246

246

and we also already have this playing the movements. 247

247

So indeed we are making some nice progress here. 248

248

And the rest that you see here 249

249

will be even easier as we go on. 250

250

Now, just to finish this lecture here about reduce 251

251

let me show you one final example 252

252

because we can also do other stuff, 253

253

than just adding up values 254

254

that would become boring at some point, right? 255

255

And so we can also do other stuff. 256

256

So this time, what I want to do is to get the maximum value 257

257

of the movements array here. 258

258

Okay, so in this case, 259

259

the result we're looking for is this 3,000. 260

260

Okay. And so for that, we can also use reduce, 261

261

because remember reduce is for boiling down the array 262

262

into just one single value, 263

263

but that value can be whatever we want. 264

264

So it doesn't have to be a sum. 265

265

It could be a multiplication 266

266

or even something completely different, 267

267

like a string or an object, 268

268

but here we will keep working with numbers, 269

269

but this time we want the maximum number. 270

270

So let's kind of go manually through this array 271

271

to determine what the reduce method should do. 272

272

So let's start here at 200. 273

273

Is this the maximum value at this point? 274

274

Well, we don't know yet because we just started, 275

275

so let's save 200 here mentally as our current maximum, 276

276

then we move on to the next value and we see 450. 277

277

So is this greater than our current maximum, 278

278

which was 200? 279

279

Well, yes it is, it is greater. 280

280

And so 450 is now our current maximum 281

281

then minus 400 is of course less than our current maximum. 282

282

Then we move on even further. 283

283

So 3,000 is a greater than our current maximum? 284

284

Yes it is. 285

285

And so that becomes our current maximum. 286

286

So we store this 3,000 287

287

and then we keep going through the array. 288

288

And as you see, there is no other value greater than 3,000. 289

289

And so in the end or maximum was this one, so 3,000. 290

290

Okay. And now all we need to do is to 291

291

essentially translate this into code, 292

292

using the reduce method. 293

293

So let's call it max movements to reduce. 294

294

And as always, we need the accumulator 295

295

and the current value. 296

296

So I'm calling it movement here again. 297

297

All right. 298

298

And now this time, what should be the purpose 299

299

of this accumulator value? 300

300

So that's always the big question that we have to ask 301

301

when we use reduce. 302

302

So up here, when we wanted to add all the numbers together, 303

303

the purpose of the accumulator 304

304

was to keep track of the current sum. 305

305

And so here, the accumulator will be the one 306

306

that will keep track of the current maximum value. 307

307

So let's just start by writing the logic here 308

308

in a bigger way so we can understand what's happening. 309

309

And then I will simplify it 310

310

to make this a one-liner function one more time. 311

311

So translating the logic that we just went over here 312

312

is to say, if the accumulator is greater 313

313

than the current value, 314

314

which is the movement, then return the accumulator, right? 315

315

Because in the reduce method, 316

316

we always have to somehow return the accumulator 317

317

to the next iteration. 318

318

And in this case, we simply want to keep the accumulator 319

319

at the value that it already is and not change it. 320

320

Okay. We want to change it in the other scenario, basically. 321

321

So when the current value is greater than the accumulator, 322

322

so that would be this case here. 323

323

So here, remember the current value is 450, 324

324

but the accumulator is 200. 325

325

And so now the movement is greater than accumulator. 326

326

And so what we want to return here as the accumulator 327

327

in the next iteration is the current movement. 328

328

And so that's it, okay. 329

329

And now we also need the initial value. 330

330

And so the initial value make sense to be 331

331

this first value here of the array. 332

332

Okay. And so that's movements at position zero. 333

333

Now we could have used zero here, 334

334

but that would not be correct 335

335

because imagine that the first value 336

336

would be like a negative, 337

337

then this might not work as expected. 338

338

Maybe it might work with the maximum, 339

339

but not with a minimum, for example. 340

340

So don't just put zero here 341

341

when you're trying to find a maximum or a minimum value, 342

342

always just go with the first value of the array. 343

343

Okay. And that's it. 344

344

Let's see if it works 345

345

and then we can maybe go over this again. 346

346

So indeed we get 3,000. 347

347

So we started at 200. 348

348

So in this iteration, 349

349

is the accumulator greater than the movement? 350

350

Well, it is not. 351

351

And so return the current movement. Okay. 352

352

But the first iteration is not that important. 353

353

It gets interesting here in the second one. 354

354

So now our accumulator is at 200 355

355

and the current movement is at 450. 356

356

So this one here is false again. 357

357

And so now we return to movement 358

358

as the new accumulator in the next iteration. 359

359

All right. And so in the next iteration, 360

360

that accumulator is 450 now, 361

361

then here, the current movement is minus 400. 362

362

And so here is 450 greater than minus 400. 363

363

Yes, of course it is. 364

364

And so let's simply return the accumulator 365

365

so that it stays the same in the next iteration. 366

366

And so that's the logic all the way 367

367

until the end of the array. 368

368

And, by this, we then end up with this maximum value. 369

369

All right. So I hope that made sense. 370

370

And in fact, there is a ton of things 371

371

that we can do with this reduce method. 372

372

It is by far the most powerful array method there is. 373

373

And because of that, 374

374

it can also be the hardest one to use. 375

375

So we always need to think exactly what we want 376

376

the accumulator and the core value to be 377

377

and how they should interact. 378

378

But I hope that with this exercise here 379

379

I could demonstrate the thought process a little bit 380

380

and throughout the section and the rest of the course, 381

381

there will be some more exercises of the reduce method 382

382

so that you can also learn better and better 383

383

how to use it yourself one day.