Original subtitles

1 1

Now, before we go to that coding challenge 2

2

that I just promised you, 3

3

let's actually practice this array methods 4

4

a little bit more. 5

5

And again, that's because I had many people actually request 6

6

yet another practice lecture of these array methods. 7

7

And so you asked for it. 8

8

And so here goes that lecture. 9

9

So again, here you can already see 10

10

the next coding challenge, 11

11

but let's for now focus a little bit more 12

12

on some array exercises. 13

13

And of course we're gonna continue working on 14

14

or accounts examples. 15

15

And the first exercise I wanna do here 16

16

is actually a very simple one 17

17

in which all we want to do is to calculate 18

18

how much has been deposited in total in the bank. 19

19

So in all the accounts across the bank. 20

20

So let's call that 21

21

bankDepositSum. 22

22

And so as always let's take our accounts variable, 23

23

which is that array which contains 24

24

all the four bank account objects. 25

25

Now, the first thing that we need to do here, 26

26

is to somehow get all these movements 27

27

that are in these different objects, 28

28

all into one big array 29

29

so that we can then from there filter the deposits 30

30

and then add them all together. 31

31

Just like we have been doing many times 32

32

throughout this section. 33

33

So let's use the map method here 34

34

because we basically want to create a new array 35

35

out of the accounts array. 36

36

But now we want to create an array 37

37

which only has all the movements. 38

38

And so, as you know, already whenever we want a new array 39

39

with the same length as the previous one 40

40

or as the original one, 41

41

then we use map. 42

42

And our callback function here, again, 43

43

each account is called like this 44

44

and then all we want to take out is account dot movements. 45

45

And let's start 46

46

by immediately taking a look here at 47

47

this variable 48

48

and of course, missing the log here. 49

49

And indeed we get an array of arrays 50

50

and here are all the different movements. 51

51

Now, how do we get all of these values 52

52

out of the arrays and into the main arrays? 53

53

So whenever we have an array of a arrays, 54

54

how can we basically remove all the values 55

55

into the parent array? 56

56

Well, remember that for that, we can use the flat method. 57

57

So just like this. 58

58

And now indeed, we got a big array 59

59

with all of the movements that we had previously. 60

60

However, I hope that you remember 61

61

that we can even simplify this here, even further. 62

62

So this map and flat, because as it turns out, 63

63

it's very common that we want to do these two operations 64

64

at the same time. 65

65

And so that's the case here. 66

66

And so instead of map, we can simply use flatMap like this 67

67

so that will apply or a map callback function 68

68

and then flattened the result. 69

69

And so you will see here 70

70

that the result looks exactly the same. 71

71

And now all we need to do is to filter for the deposits. 72

72

So basically for the positive values. 73

73

And so this is nothing new at this point 74

74

and the same for now adding them all together. 75

75

So we have done that many times before 76

76

so that's just write it out here 77

77

as we already know how it works. 78

78

And here we go. 79

79

So the result is 25,180. 80

80

And let's say that there are all in the same currency, 81

81

so all dollars or all euros. 82

82

So this part here was the same as we had done before. 83

83

The only trick was really this part here. 84

84

So getting all the different movements array 85

85

out of the accounts array 86

86

and then putting them in one flat array 87

87

so that we could then filter and add them all together. 88

88

Let me just add here numbers. 89

89

So that was exercise number one. 90

90

And now in exercise number two, 91

91

I want to count how many deposits there have been 92

92

in the bank with at least $1,000. 93

93

So let's call this here, numDeposits$1000. 94

94

And there are actually two ways of doing this. 95

95

So I will start with the way that is probably easier. 96

96

But then after that, I will actually save the same problem 97

97

using the reduce method. 98

98

So many people have asked me for advanced use cases 99

99

of the reduced method 100

100

because it is probably the most difficult of all of them. 101

101

And so therefore I want to show you 102

102

how we can basically count things, 103

103

we're using the reduce method, 104

104

but again, let's start with the easier solution here. 105

105

And so if we want to count the deposits 106

106

basically now we have to do the same thing 107

107

as we did here. 108

108

So we have to take all of the movements 109

109

and put them all into one array. 110

110

And let's lock that here already 111

111

and here it's accounts. 112

112

And so you see, we have a similar result to previously. 113

113

And now what we could do here is to filter 114

114

for movements greater than a thousand, 115

115

like this. 116

116

So movement greater than 1000 117

117

which leaves us only with these. 118

118

And then from that, you can simply take the length. 119

119

And so this will then return five. 120

120

And indeed this shows us that we get five deposits 121

121

over $1,000. 122

122

Let's say at least, so greater equal. 123

123

All right. 124

124

So that was one way of doing it. 125

125

Let's comment it out 126

126

because as I mentioned before, 127

127

I actually want to show you 128

128

how we could do the same thing using reduce. 129

129

So let's get rid of this part 130

130

because the flat map, of course, we still need that. 131

131

We still need that array with all the values themselves. 132

132

Now, okay, so you're already know 133

133

that the callback function of the reduced method 134

134

always has as a first parameter, 135

135

basically the accumulator. 136

136

So that's like the snowball 137

137

onto which we want to accumulate a certain value. 138

138

So here that is the sum which we started at zero 139

139

and then onto that sum, 140

140

we keep adding the current element 141

141

and then basically in each iteration we returned 142

142

the entire new value. 143

143

So the previous sum plus the current value. 144

144

So again, this year is the accumulator, 145

145

which is like the snowball onto which we keep adding 146

146

our snow which in this case here was the sum. 147

147

But now in this case, our snowball, 148

148

so our accumulator will be the number of movements 149

149

that are greater than a thousand. 150

150

So let's call that the count. 151

151

And then here again, the current. 152

152

And here we're gonna have the function body. 153

153

And again, we will start counting at zero. 154

154

So this initial value right here 155

155

is just like having any value outside of a loop 156

156

where we keep storing a new value. 157

157

And that new value might very well be a counter 158

158

that we only update on a certain condition 159

159

which is exactly what we're gonna do now. 160

160

So we will say that whenever the current value 161

161

is greater or equal than 1000, 162

162

then we want to return the count plus one. 163

163

And otherwise we just want to return the count. 164

164

So give it a save and here we get our result. 165

165

I think it was five previously. 166

166

Let's just take a look at the array itself 167

167

by simply logging into the console here like this 168

168

or we should probably even do this 169

169

to actually see the whole array. 170

170

And you see that it is indeed six. 171

171

So before it was just five because I had it like this. 172

172

And so you'll see, there is one movement with a thousand. 173

173

And so then it is only five, 174

174

but matters here, 175

175

and let's get rid of this. 176

176

So what matters is that or reduce function here works 177

177

so we can even use reduce 178

178

to basically simply count something in an array. 179

179

So what's important to keep in mind 180

180

is that we have this value here outside. 181

181

So this accumulator, which we can use 182

182

to reduce the array down to anything that we want. 183

183

And in this case, it is a counter 184

184

but it could really be anything. 185

185

And we will actually do something even more sophisticated 186

186

in the next example. 187

187

But for now I want to bring your attention 188

188

to this part here of the code. 189

189

So this adding one. 190

190

So you know that there is an operator for simply adding one. 191

191

So let me duplicate this here. 192

192

Then I will comment it out. 193

193

And again, you know that we can simply use a plus plus here 194

194

like this. 195

195

Or at least we think so, because now as I reload, 196

196

we are back to this being zero. 197

197

So why do you think that is? 198

198

Well, there is actually something that I didn't tell you 199

199

about the plus plus operator. 200

200

And so I thought that this was a good opportunity 201

201

to maybe clear that up. 202

202

And for that, 203

203

let's simply do a very simple example down here. 204

204

Let's say, let a equal 10, 205

205

then let's log to the console a plus plus. 206

206

And so again, you see that a is actually still 10 207

207

even though we used this plus plus here. 208

208

So why is that? 209

209

Well, the plus plus operator 210

210

does actually increment the value 211

211

but it still returns the previous value. 212

212

So if we now log the a again here, you will see that now 213

213

it is indeed 11. 214

214

So the plus plus operator did its job here. 215

215

But the thing is that when we use it like this, 216

216

it will still return the all to value, which here was 10. 217

217

And so the same thing happened here. 218

218

So we did count plus plus 219

219

which then increased the value from zero to one. 220

220

But the result of this expression here is still zero. 221

221

And so zero was returned here to the next iteration. 222

222

And therefore in the end we will always have zero. 223

223

So like this, it's impossible to increase the value 224

224

to one, two, three, four, five, and six. 225

225

So this is actually something really important to understand 226

226

about the plus plus operator 227

227

and which I didn't make really clear before. 228

228

Now fortunately for us, there is an easy solution 229

229

because we can simply use the so-called 230

230

prefixed plus plus operator. 231

231

So we can write it before the operand. 232

232

So plus plus a, and so now the result of this here 233

233

should already be 11. 234

234

So both of these should now be 11. 235

235

And indeed they are. 236

236

And so if we do the same thing here 237

237

then that will now finally increment or counter here 238

238

and we are back to seeing six as our result here. 239

239

So let me keep this one here, actually 240

240

just as a reference 241

241

again because I didn't talk about this before. 242

242

So that was exercise number two. 243

243

And now let's go to exercise number three 244

244

which will be an even more advanced case 245

245

of the reduce method. 246

246

And in this one what we're gonna do 247

247

is to create a new object instead of just a number 248

248

or just a string, 249

249

because why not? 250

250

So we already know that reduce boils down a array 251

251

to just one value. 252

252

And so that value might very well be an object. 253

253

It could even be a new array as well. 254

254

And in fact, we could use reduce to replace many 255

255

of the other methods that we have. 256

256

So reduce really is like the Swiss knife of array methods. 257

257

We could use it for everything. 258

258

Okay and with that being said, let's get started 259

259

on this exercise of which the goal is to create an object 260

260

which contains the sum of the deposits 261

261

and of the withdrawals. 262

262

So basically we want to calculate these two sums 263

263

all at the same time, all in one go using the reduce method. 264

264

So let me call this one sums 265

265

and then we have to start again this way. 266

266

So we need to get all of our movements into just one array. 267

267

So I'm just copying that. 268

268

And then here comes the reduce method. 269

269

So here the first element as always, it's the accumulator 270

270

which again, I will just call sums 271

271

and then the second one is the current value. 272

272

Here we will actually need a function body 273

273

to write our code. 274

274

And then we need the initial value 275

275

of the accumulator as always. 276

276

And as I was saying, 277

277

the goal of this exercise is to create an object. 278

278

And so our starting point then of course also needs 279

279

to be an object. 280

280

And this could be an empty object just like this 281

281

or we could of course also already start filling it. 282

282

So let's say that we want to start with deposits of zero 283

283

and withdrawals at zero as well. 284

284

Okay. 285

285

And now here in our function body, 286

286

we can simply basically ask 287

287

if the current value is a deposit or a withdrawal. 288

288

And once again, we do that by checking if the value 289

289

is greater or below zero. 290

290

So if it's greater than zero, 291

291

and here again, using the turnery operator. 292

292

So if it is, then we want to add the current value 293

293

to the deposits. 294

294

So to this value here in our object, right? 295

295

Now here in this callback function, 296

296

what actually is this object here. 297

297

Well, it is simply sums, which is or accumulator, right? 298

298

Because this year is always the initial value 299

299

of debt accumulator. 300

300

So of this variable. 301

301

So we can access the deposits on sums 302

302

that deposits and we can then add the current value 303

303

on to that. 304

304

And if not, so if current is below zero 305

305

then we can add it to the withdrawals. 306

306

Now we're actually not yet done here 307

307

because remember that in an array function, 308

308

the value is only automatically. 309

309

So implicitly returned when we don't have a function body 310

310

with curly braces. 311

311

But right now we do here. 312

312

Right? And so therefore we have to explicitly 313

313

so to manually return the accumulator from the function. 314

314

So that's how the reduce method works. 315

315

We always have to return the accumulator 316

316

from each iteration. 317

317

Now, usually that happens implicitly like here 318

318

but you already know that this here has an implicit return. 319

319

But this is easy to forget in these cases. 320

320

So that's why I'm emphasizing it here. 321

321

So again, we always need to return in the end, 322

322

the accumulator. 323

323

And so now this should actually already work. 324

324

So sums 325

325

and indeed we get all the deposits and all the withdrawals 326

326

and this value should be the same. 327

327

Yeah, as this one here. 328

328

But now we calculated it in a different way 329

329

and put it directly in an object 330

330

by using the reduce method like this. 331

331

So that's great. 332

332

And let's actually distract this object immediately 333

333

so we can do this. 334

334

So we need to now use the exact same names as here. 335

335

So deposits and withdrawals. 336

336

And so here we can now log these two to the console. 337

337

And indeed, we now get these two values here. 338

338

Now this works just fine already 339

339

but I don't really like this part here so much. 340

340

So let me just show you another way in which we could do it. 341

341

So I'm just commenting it out here. 342

342

Maybe you actually like this part here more 343

343

but we actually have some duplication here. 344

344

And so let's fix that. 345

345

So this part here is very similar to this part here. 346

346

All that changes is the deposits and the withdrawals. 347

347

And so we can actually do this. 348

348

So here we can now conditionally say 349

349

that we want to select either deposits 350

350

or withdrawals based on this condition. 351

351

So using here the brackets notation instead 352

352

of the dot notation. 353

353

So in this case, we will want to get the deposits 354

354

and otherwise the withdrawals. 355

355

And so then it's onto this value that we want to add 356

356

the current one. 357

357

And here I probably have some spelling error 358

358

and yeah so we get the same result. 359

359

But I think that this way here is just a little bit cleaner 360

360

but in any way, what matters here is that we were able 361

361

to create a brand new object based on the reduced methods. 362

362

And this can be really helpful in many situations. 363

363

And so please take some time to review this exercise 364

364

because this was really a great use case 365

365

on how to use something other than a primitive value 366

366

as the accumulator of the reduced method. 367

367

And I would even challenge you to do this with arrays. 368

368

So as a challenge would challenge you to recreate 369

369

any of the examples that we did previously 370

370

in the section with map filter and reduce 371

371

to use only the reduce method. 372

372

And that is totally possible. 373

373

And so, yeah, you can try that out. 374

374

You don't have to, and I will certainly not do that now 375

375

but as an exercise and to get an even better understanding 376

376

of the reduced method, you could totally do that. 377

377

Now, this lecture is already running a bit long 378

378

but I still have one more exercise here for you. 379

379

So let's quickly do that. 380

380

And this one will not have anything to do 381

381

with the accounts now, but instead, what I want to do now 382

382

is to create a simple function to convert any string 383

383

to a title case. 384

384

So title case basically means that all the words 385

385

in a sentence are capitalized except for some of them. 386

386

So there are some exceptions. 387

387

Let me try an example here. 388

388

So this is a nice title 389

389

would be converted to this 390

390

is and the a is lowercase. 391

391

So this is one of the exceptions and then nice title. 392

392

So let's get to work here. 393

393

So convert title case, 394

394

it's gonna be a function which takes a title 395

395

and will then convert it. 396

396

And so this is gonna be a nice exercise combining string 397

397

and array methods, all in one function. 398

398

Let me start by writing 399

399

an example of a string here that we might 400

400

want to capitalize. 401

401

So convert title case, and let's actually try this one. 402

402

Let's also try some more, 403

403

this is a long title, 404

404

but not too long. 405

405

So just to see what happens here 406

406

and also just to put some of the different exception words 407

407

in there 408

408

and 409

409

is another title with an example 410

410

like this. 411

411

And so now we can worry about writing our function here. 412

412

And let's start by creating an array, 413

413

which contains the exceptions. 414

414

So the words that should not be capitalized 415

415

and the exceptions are a, n, 416

416

the, 417

417

but 418

418

or 419

419

on 420

420

in and with. 421

421

And there might be some other exceptions here 422

422

but this is just an example. 423

423

Or you can always search for title case on Google 424

424

and see the exact rules if you want to make sure 425

425

that this really works. 426

426

now, right? 427

427

And by the way, it is a bit of a common pattern 428

428

to create an array of exceptions and then use that 429

429

for some computation further down the road. 430

430

I've done this myself many times. 431

431

That's all keep this technique in mind 432

432

but now let's go on to the actual conversion. 433

433

So let's call it title case. 434

434

And so of course, we must work on this title argument 435

435

that comes in. 436

436

And so what should be start by doing. 437

437

Well, first of all, let's do something 438

438

that we should many times do with our input strings, 439

439

as I mentioned before 440

440

which is to convert them all to lowercase. 441

441

And this is especially important in this case 442

442

because we are now working with capitalization. 443

443

So we will capitalize some of the words. 444

444

And so they should of course all be lowercase to start with. 445

445

So that's then going to affect like this or this board here. 446

446

Then we need to capitalize each word here individually 447

447

of course. 448

448

And so we need to be able to work individually 449

449

on each of the words. 450

450

And so whenever that is the case, we need an array. 451

451

So we need to split this string into an array 452

452

so that these words, which are separated by spaces, 453

453

each of them are going to be one of the elements 454

454

of the array. 455

455

So split and then by the empty string 456

456

and then by the space character. 457

457

And this is of course far from being done, 458

458

but that's none of the less already returned us 459

459

just to see if it works. 460

460

So this is exactly what we just did. 461

461

And so now let's work on these words. 462

462

So basically we want to now go through the array 463

463

and capitalized each of the words 464

464

that is not in the acceptance array. 465

465

So here, for example, the a is in the exceptions array. 466

466

So we don't want to capitalize this word 467

467

but we want to do it for all the ones. 468

468

So basically we want a new array 469

469

which all of these same words here. 470

470

So the same five elements, but some of them capitalized. 471

471

And so again, whenever we want a new array 472

472

of the same size as before, we use map. 473

473

And so now finally, or old friend map comes into play again. 474

474

So in this array, each element is a word 475

475

so let's call it that. 476

476

And so again, we want to capitalize it. 477

477

So let's just do it for starters, for all of them. 478

478

And remember that one of the techniques to doing that 479

479

is to take the first character of the string 480

480

so like this and put it to uppercase 481

481

like this. 482

482

And then we simply add the rest of the string to it. 483

483

Remember? 484

484

So we did that previously. 485

485

And so the rest of the string is basically taking everything 486

486

starting at position number one. 487

487

So let's check that 488

488

and indeed it worked beautifully. 489

489

Now, the only problem is that we have these exceptions here. 490

490

So we have an a here and a but, 491

491

and here is a width. 492

492

And so you want to now use the exceptions array 493

493

to exclude them. 494

494

So how should we do that? 495

495

So excluding kind of sounds like filtering maybe 496

496

but that's not what we want here 497

497

because we still want to keep an array of the same length. 498

498

We just don't want to apply this year to all the words. 499

499

And so what we're gonna do here is another logic. 500

500

So we will do 501

501

exceptions and then we are going to check 502

502

if the current word is included in that array. 503

503

And so for that, we have another array methods 504

504

which we studied many times before 505

505

which is called includes. 506

506

So here we are checking for that word. 507

507

And then as you notice, we'll return a boolean. 508

508

So true, false. 509

509

And then we can use that boolean to basically ask 510

510

if the word is an exception or not. 511

511

So if the word is indeed included in the exceptions, 512

512

then we want to simply return that word. 513

513

And only otherwise we want 514

514

to then return the capitalized version. 515

515

So let's check and indeed that already worked. 516

516

So a and but, and down here do you with 517

517

are now no longer capitalized. 518

518

Let's actually change or fixed that here 519

519

exceptions 520

520

like this. 521

521

So that looks better. 522

522

So again, let's go over that logic here. 523

523

So if the current word, so for example, this a here 524

524

is included in this exceptions array 525

525

then simply return that word. 526

526

So without any modifications, 527

527

but if not, well then capitalize it 528

528

according to this rule or just technique here 529

529

that I demonstrated earlier. 530

530

And so after that, it is actually really easy. 531

531

Now, all we have to do is to join the array back 532

532

with the space and there we go. 533

533

That's actually it. 534

534

I noticed that I just forgot one word here, which is and. 535

535

So that's also an exception. 536

536

Let's give it a save. 537

537

And so this creates this weird situation 538

538

where the first word of the title 539

539

is actually not capitalized. 540

540

And of course we don't want that 541

541

but that's actually an easy fix. 542

542

All we have to do is in the end 543

543

then capitalized that entire title case. 544

544

So basically doing this here on the final output 545

545

that we have here. 546

546

But let's not copied this. 547

547

Let's instead re-factor this into a standalone function. 548

548

Let's put it in here actually 549

549

because we don't need this function anywhere else. 550

550

So capitalize, 551

551

it takes a string. 552

552

And then here, instead of words, 553

553

we will use string to make it a general function. 554

554

And then here we will call it with word. 555

555

So everything works the same. 556

556

And then as I mentioned earlier 557

557

when we returned the title case, 558

558

we simply capitalize it again. 559

559

So just to make sure that a situation 560

560

like this here does not happen. 561

561

So title case 562

562

and here we go, 563

563

problem solved. 564

564

Nice. 565

565

So I hope that these were four nice examples 566

566

for you to practice these array methods even more 567

567

so that you are not ready finally 568

568

for the final coding challenge of this section. 569

569

So let's go there right now.