Original subtitles

1 1

So we're almost finished with this section 2

2

and with our application 3

3

but one feature that is still missing in our application 4

4

is the ability to sort our movements. 5

5

And so in this lecture, let's talk about sorting arrays. 6

6

Now, sorting is a much-discussed topic in computer science 7

7

and there are countless algorithms and methods 8

8

of sorting values 9

9

and we might actually talk about this a little bit later 10

10

in the course. 11

11

For now though, 12

12

we're simple gonna use JavaScript's built-in sort method. 13

13

And let's start here with an array of strings. 14

14

And let's call it owners. 15

15

So Jonas, 16

16

Zach, 17

17

Adam, 18

18

and Martha. 19

19

Okay? 20

20

And now all we need to do is owners.sort, okay? 21

21

And so indeed, we now get our array here nicely sorted. 22

22

So alphabetically from A to Z. 23

23

So this works indeed just as expected, right? 24

24

Now, this actually mutates the original array. 25

25

So if we take a look at owners now, 26

26

you will see that it also now is mutated, okay? 27

27

And so we have to be very careful with this method. 28

28

So this is with strings. 29

29

Now let's try it with numbers as well. 30

30

So let's use our movements array here one more time. 31

31

So I'll start by logging it to the console 32

32

so we can see it. 33

33

And then let's also log movements.sort. 34

34

So give it some more space here, 35

35

and if we take a look at the result here, 36

36

this time, the result 37

37

is not really what we are expecting, right? 38

38

These numbers are not at all ordered in any way, are they? 39

39

And the reason for this 40

40

is that the sort method 41

41

does the sorting based on strings, all right? 42

42

So that might sound weird 43

43

but that is just how it works by default. 44

44

So basically, what it does 45

45

is to convert everything to strings 46

46

and then it does the sorting itself. 47

47

And if we look at the result as if they were strings, 48

48

then the result actually makes sense. 49

49

So the minus here you see always comes first, okay? 50

50

So first, you have all the minuses here 51

51

and so that's basically alphabetically 52

52

the first string that occurs. 53

53

And then afterwards, you have this one, 54

54

which starts with one before this four 55

55

and then before the six. 56

56

So these three are alphabetically ordered 57

57

if they were strings. 58

58

And the same here. 59

59

So you have one first, then two, then three, 60

60

then four and then seven. 61

61

So again, if they were strings, 62

62

then this result would make sense. 63

63

But they are not strings 64

64

and so we have to fix this 65

65

and in fact, we can fix this 66

66

by passing in a compare callback function 67

67

into the sort method. 68

68

So this here does not work. 69

69

Let's get rid of it 70

70

and so let's write movements.sort 71

71

and we need to give it a callback function, 72

72

and this callback function is called with two arguments 73

73

and let's simply call them a and b. 74

74

Okay? 75

75

And these two parameters here 76

76

are essentially the current value and the next value 77

77

if we imagine the sort method looping over the array. 78

78

However, in order to understand 79

79

how the compare function works, 80

80

so how this callback function here works 81

81

and how we have to write it, 82

82

let's just think of a and b 83

83

as simply being two consecutive numbers in the array. 84

84

And it doesn't matter which ones. 85

85

So let's simply take these two. 86

86

So 450 and 400. 87

87

Okay? 88

88

So let's just compare these two. 89

89

Now, in our callback function here, 90

90

if we return less than zero, 91

91

then the value a will be sorted before value b. 92

92

And the opposite, if we return a positive value, 93

93

then a will be put before b 94

94

in the sorted output array, okay? 95

95

So let's use that in practice 96

96

to sort the movements array in ascending order. 97

97

And first, let me just write what I did here. 98

98

So if we return something less than zero, 99

99

then A will be before B. 100

100

But on the other hand, if we return greater than zero, 101

101

then B will be before A, okay? 102

102

And so we can use this knowledge 103

103

to sort our movements array now in ascending order. 104

104

So ascending order means that we want to go 105

105

from small to large numbers, right? 106

106

And to make this easier to understand, 107

107

let's analyze the two numbers that we have here. 108

108

So we have 450 and -400 109

109

and so if we want to sort these two in an ascending order, 110

110

then we need to switch them. 111

111

So this is a and this is b, right? 112

112

But now we want to switch them 113

113

to make them in ascending order. 114

114

So what we want here is B and then A. 115

115

So B, A, right? 116

116

And so therefore, we need to return something 117

117

that is greater than zero, okay? 118

118

Because that's the rule 119

119

how the sort callback function works. 120

120

So again, in the case basically that A is greater than B, 121

121

which is what we have here, 122

122

then we want to return something that is greater than zero. 123

123

So let's write that. 124

124

So if a is greater than b, 125

125

return, and let's say one. 126

126

And the number here doesn't really matter 127

127

as long as it's greater than zero. 128

128

And else, or actually let's write it like this, 129

129

so if b is greater than a, 130

130

then return something negative. 131

131

So just -1, okay? 132

132

And that's actually it. 133

133

So let's log then the movements again here to the console 134

134

because here we are mutating the array 135

135

and then at this point, 136

136

it is already the mutated version 137

137

and now as we see here, the array is now indeed sorted 138

138

in an ascending order. 139

139

All right? 140

140

And so that is because basically the sort method 141

141

keeps looping over the array 142

142

and applying this callback function here 143

143

until everything is in an ascending order according 144

144

to the rules that we established here. 145

145

Okay? 146

146

So returning one here basically means 147

147

to switch the order and let's write that here. 148

148

Switch order 149

149

and keep order. 150

150

So maybe that makes it also a bit easier to understand. 151

151

So if we come back to one of these examples here, 152

152

so let's say we have a and b, 200 and 450. 153

153

So in this case, we want to keep the order, right? 154

154

And so therefore, that's the case 155

155

in which we return something less than zero. 156

156

So that's what we have here. 157

157

And maybe it's easier to read like this, 158

158

so a less than b 159

159

but of course, it's the exact same thing. 160

160

And then here again with our original example, 161

161

this first one is greater, 162

162

so the order has to be switched 163

163

and so here we have that situation 164

164

where a is greater than b. 165

165

Now, if we wanted to do it the opposite, 166

166

so sorting in a descending order, 167

167

we would simply do it exactly the other way around. 168

168

So all we would do is to return -1 in this case 169

169

and return one in this case. 170

170

And so now the array is nicely sorted the other way round. 171

171

So let's right that here. 172

172

So ascending and 173

173

descending. 174

174

Let's also log the movements here and great. 175

175

So this works beautifully 176

176

and it's also gonna work for strings 177

177

and you can try that out yourself if you want. 178

178

Now, if we are working with numbers, 179

179

then we can actually simplify this a lot 180

180

by simply using some simple math. 181

181

So let's take a look again here at our condition. 182

182

So we already know that if a is greater than b, 183

183

then a minus b would always be something positive, right? 184

184

And the same here with a less than b. 185

185

So if a is less than b, 186

186

then we know that a minus b 187

187

is always something negative 188

188

and something negative is exactly what we want 189

189

to return here, isn't it? 190

190

And so what we can do is take this 191

191

and improve it dramatically 192

192

because in fact, we don't need any of this. 193

193

All we need is to say a minus b. 194

194

And that's it. 195

195

And let's check the result and it still works the same. 196

196

So let's recap what we did here. 197

197

So again, we already know that if a is greater than b, 198

198

then this will be a positive number 199

199

and so here we then return that positive number. 200

200

It doesn't have to be exactly one. 201

201

Just something greater than zero. 202

202

Now, if it's the other way around, 203

203

if a is less than b, then this operation 204

204

will always be a negative number. 205

205

And so therefore, then something negative 206

206

is returned just as -1. 207

207

But again, it can be any number. 208

208

And by the way, if we return zero here, 209

209

so in case these two values are the same, 210

210

then their position simply remains unchanged. 211

211

All right? 212

212

So let's do the same here. 213

213

And so here it is the opposite, so b minus a. 214

214

And as always, keep in mind 215

215

that we are actually returning this value here. 216

216

But we don't have to write the return 217

217

because we're using an arrow function. 218

218

So you see, it still works the same. 219

219

All right, and this is basically most 220

220

of what you need to know about sorting arrays with numbers. 221

221

Now, if you have a mixed array, 222

222

like with strings and numbers together, 223

223

then this is not gonna work and I advise you 224

224

to simply not to use the sort method 225

225

in these cases anyway. 226

226

And that's because there's not really a point 227

227

in doing so. 228

228

But anyway, now that you know how the sort method works, 229

229

let's go back to our application 230

230

and implement it there. 231

231

So let's first see in the demo version what I mean. 232

232

So down here we have this Sort button. 233

233

And so this sort will basically sort these movements. 234

234

So as we click the button, 235

235

it will sort them in this descending order, 236

236

which actually is an ascending order 237

237

because remember, we are starting 238

238

to display these movements here from the bottom up. 239

239

Okay? 240

240

Then as we click it again, it goes back to normal. 241

241

So as we keep clicking, 242

242

it orders and goes back to normal. 243

243

And so let's implement that now. 244

244

So we can give us some more space here. 245

245

And now we will actually implement the sorting functionality 246

246

right in the function that displays the movements. 247

247

Okay? 248

248

So let's first implement the sorting itself 249

249

and then after that, we will implement the clicking 250

250

on the button. 251

251

So that's right here. 252

252

So displayMovements. 253

253

All right? 254

254

Now, what we're gonna do here 255

255

is to add a second parameter, 256

256

which is the sort parameter and by default, 257

257

we will set it to false. 258

258

And now depending on this parameter, 259

259

whether it is true or false, 260

260

we will then order our movements or not. 261

261

So sort the movements or not. 262

262

And of course, it is false by default 263

263

because well, by default, 264

264

we do want to show the movements 265

265

just in the order they appear in the array 266

266

but then as we click that Sort button, 267

267

we will then call this function displayMovements 268

268

with sort set to true. 269

269

So let's now create a new variable called movements here. 270

270

And this variable here, we will define it conditionally. 271

271

And actually, we cannot call it movements 272

272

because that's already the name here 273

273

of the parameters, right? 274

274

So let's just call it movs, all right? 275

275

And again, we will define it conditionally. 276

276

So we say if sort, 277

277

and so that's if sort is true, 278

278

then we actually want to sort the movements. 279

279

So the movements array that we get here as an input. 280

280

So movements 281

281

but now we cannot do this. 282

282

And that's because, keep in mind that the sort method 283

283

will then order the actual underlying array. 284

284

So the actual movements array as it is 285

285

in the account object. 286

286

But that's not what we want at all. 287

287

All we want is to display a sorted movements array 288

288

but we do not want to sort the original underlying data. 289

289

So what do we do here? 290

290

Well, we simply take a copy of the movements array 291

291

and sort that. 292

292

And so that's what we use now slice for 293

293

and this is one of these situations 294

294

that I was telling you about earlier 295

295

where we need to actually create a copy, 296

296

using the slice method 297

297

and not the spread operator 298

298

because here we are in the middle of a chain. 299

299

And so we want to keep going after this 300

300

and so it's a lot better 301

301

to simply use the method here 302

302

so that we can then simply chain the sort method onto that. 303

303

And now all we need here is our compare function. 304

304

And now remember how in the user interface, 305

305

so in our application, 306

306

how the movements appeared in a descending order. 307

307

However, that is because we start to display the values 308

308

from the bottom up 309

309

and so actually, we want to now sort this array 310

310

in an ascending order. 311

311

And to do that, remember, we do a minus b. 312

312

So I explained before why it works this way. 313

313

Okay, but now if sort is false, 314

314

so that's the default value, 315

315

then movs should simply become movements. 316

316

Right? 317

317

Let's get rid of this comment here. 318

318

Give it a save 319

319

and now here, of course, we then need to use that movs 320

320

that we just created. 321

321

And with this, we have essentially adapted 322

322

our displayMovements function to support sorting. 323

323

And again, we did that by allowing a second parameter, 324

324

which is an optional parameter called sort 325

325

and then if sort is set to true, 326

326

then the movements that we're gonna use 327

327

to display them will be sorted like this 328

328

and if it's set to false, 329

329

then simply the regular movements as they are passed in 330

330

will be displayed. 331

331

And now all we need to do 332

332

is to call this function here 333

333

with sort set to true 334

334

whenever the user clicks that sort button. 335

335

So that button is called btnSort 336

336

and so let's now create our final event listener 337

337

or event handler here. 338

338

So btnSort.addEventListener 339

339

and as always, we start by preventing the default. 340

340

So you can get used to this. 341

341

And then here, we want to call print 342

342

and then here we want to call displayMovements 343

343

and of course, with currentAccount.movements as always 344

344

and then the second parameter we will set to true. 345

345

So that's the sort parameter. 346

346

And if we ever are in doubt, 347

347

then again in VS Code, it nicely shows us 348

348

what we can pass in to the function. 349

349

So movements and sort. 350

350

Now, this is not yet the 100% working solution 351

351

and let me show you why. 352

352

So as I log in, 353

353

let me almost remove this here, 354

354

so let's click now the Sort button and beautiful. 355

355

That worked. 356

356

So the movements are now indeed sorted 357

357

but now, if I click the button again, 358

358

it will not go back to normal. 359

359

Right? 360

360

And how could it? 361

361

We never told it to do so. 362

362

So let's find a way of solving this. 363

363

And we will solve this by using a state variable, 364

364

which will monitor if we are currently sorting 365

365

the array or not. 366

366

Okay? 367

367

So that variable needs to live outside 368

368

of this callback function 369

369

so that its value can be preserved 370

370

after clicking this button here, right? 371

371

Because as you know, this function here 372

372

is executed each time that we click the Sort button. 373

373

And so if we defined a variable here in this function, 374

374

then it would be created newly each time 375

375

that we click that button. 376

376

And so we want to preserve that sorted state 377

377

throughout all the clicks. 378

378

So we start with this state variable set to false. 379

379

And so that's because in the beginning, 380

380

our array is not sorted. 381

381

So sorted is false. 382

382

And so if it is false, 383

383

then here this should be true. 384

384

So we then want to actually sort the array. 385

385

So basically, here we want the opposite of sorted, right? 386

386

And so that's where our not operator comes 387

387

in handy, all right? 388

388

So we're doing the opposite of sorted. 389

389

When sorted is false, 390

390

then we want to sort it. 391

391

So we need true here. 392

392

But if it is already sorted, 393

393

then we again want the opposite 394

394

and so then sort should be back to false. 395

395

Now, the only thing that's missing 396

396

is to actually flip this variable, okay? 397

397

And so for that, 398

398

we do sorted equal the opposite of sorted once again. 399

399

And so this is what then allows everything here to work. 400

400

Otherwise even as we would click, 401

401

this sorted variable would then never change. 402

402

And so with this, each time that we click, 403

403

we change sorted from true to false, 404

404

then from false to true and so on and so forth. 405

405

So let's try it now finally. 406

406

And 407

407

yes, 408

408

great, that works beautifully 409

409

and so our job here is done. 410

410

And in fact, this application 411

411

is now complete, at least for this section. 412

412

So great job, congratulations for reaching this point, 413

413

for finishing this application. 414

414

This is really an amazing achievement 415

415

and you can pat yourself on the back for making it this far. 416

416

Now, there's still one or two array methods to learn 417

417

and so let's do that in the next video.