Original subtitles

1 1

Let's now explore some more features 2

2

of the for loop 3

3

and also create a somewhat more useful example. 4

4

And one of the most used applications 5

5

of for loops is to loop through a race. 6

6

So let's get back the array that we were using before. 7

7

So where is that? 8

8

So, I mean the one 9

9

where we talked about objects. 10

10

Yeah, this one. 11

11

So go to this lecture about introduction to objects 12

12

and then grab this Jonas array. 13

13

And maybe you didn't write it back then 14

14

but then you can just write it, right now. 15

15

Okay, and so now we can use a for loop 16

16

to loop through this array. 17

17

And let's say for now that we wanted to individually 18

18

log every element of the array to the console. 19

19

So very simple. 20

20

All we want to do is to log these five elements here. 21

21

So let's write a for loop. 22

22

And as always, we start with the counter. 23

23

So let... 24

24

And now a traditional counter variable name has been I 25

25

for a long time. 26

26

And so let's use that here as well. 27

27

So just I, and this time we need to start it at zero. 28

28

And that's because the array is zero based 29

29

when it comes to reading elements out of the array. 30

30

Remember, and this will make sense once we actually write 31

31

the code of this loop. 32

32

Let's now actually skip the condition for now. 33

33

So we're gonna deal with that a little bit later. 34

34

And so now updating the counter 35

35

is gonna work exactly the same as before. 36

36

So since we want to log all of the elements 37

37

we need to update the counter variable simply by one. 38

38

And so again, we use ++, okay. 39

39

And now let's write or loop here itself. 40

40

So console.log, 41

41

and remember all we want to log to the console 42

42

is each element of the array. 43

43

And so without a loop 44

44

we would write that like this, 45

45

so Jonas zero. 46

46

Right? 47

47

And then let's do that outside. 48

48

So we would do this 49

49

this, and then all the way to 50

50

number four. 51

51

All right. 52

52

So let's comment is out 53

53

but this is helpful to see what kind of code 54

54

we want to achieve. 55

55

So again, we want to start at Jonas zero 56

56

which is the first element. 57

57

Jonas one is this one, then two, three, and four. 58

58

And so that's the reason why we started the counter at zero 59

59

because that's the first element that we want to get. 60

60

It's Jonas zero. 61

61

And so here, instead of hard coding to zero, 62

62

of course, we are going to use or counter variable. 63

63

So, and that's I. 64

64

And now the trickiest part here, is the condition. 65

65

And so that's why we left it for the end, 66

66

but now we need to actually tackle it. 67

67

So for how long do we want to keep this loop running? 68

68

Well, it should run when I is zero. 69

69

Right? 70

70

It should also run when it's one two, three, and four. 71

71

Because four is the last element. 72

72

But when it's five, it's no longer run. 73

73

Right? 74

74

And that's because Jonas at five does not exist. 75

75

Let's just write that, 76

76

does not exist. 77

77

And so that means that the I counter variable 78

78

should always stay below five. 79

79

So let's write that here. 80

80

So I should stay 81

81

below five. 82

82

And so with this, 83

83

as soon as the counter variable is updated to five 84

84

then the next iteration of the loop will not run anymore. 85

85

So let's try this. 86

86

And here it's of course not Jonas 87

87

it's Jonas array. 88

88

So let's actually change the name up here, 89

89

in the array itself. 90

90

Try that again. 91

91

And yeah, we get a log of each of the elements 92

92

in the array. 93

93

So all of the five of them. 94

94

Great. 95

95

But there's actually still one problem with this, 96

96

which is that we hard-coded the length of the array 97

97

here with five. 98

98

So let's now say 99

99

that we add another element, 100

100

let's say just true. 101

101

And so if we try this now, 102

102

do you think that's true will be logged here as well? 103

103

Well, it will not. 104

104

Because of course we are still telling JavaScript 105

105

that I should stay below five. 106

106

And so it will not print the array at position number five, 107

107

which does now exist. 108

108

So now we do have Jonas at position five, right? 109

109

And so the solution to this, 110

110

is to not hard code the value here 111

111

but to compute this value. 112

112

So basically to get it from JavaScript itself. 113

113

And how can we get this number? 114

114

Well, actually this five is simply the length of the array 115

115

right? 116

116

Not of this one anymore, but off the original one. 117

117

So this array has a length of five. 118

118

And so five is exactly the number that we put here. 119

119

And so we can simply replace the hard-coded value 120

120

with a dynamically calculated one. 121

121

and that's Jonas.length. 122

122

Remember? 123

123

So, 124

124

let's try that. 125

125

And indeed it still works. 126

126

And if I now go back to adding something else 127

127

like true, 128

128

then Jonas.length 129

129

will now be six. 130

130

And that of course happens automatically. 131

131

And we don't have to manually change any code 132

132

in that loop. 133

133

So now we did true also appears here in our luck. 134

134

Great. 135

135

Let's now also log something else here. 136

136

Let's say the type of the variable. 137

137

So type of Jonas i. 138

138

And I hope that this part here makes sense. 139

139

So the fact that we're using the counter variable here 140

140

to retrieve all the elements of the array. 141

141

So now let's say, so string, 142

142

string, number, string, object. 143

143

So remember how I said that an array is in fact an object 144

144

and here we have the proof of that. 145

145

And then finally the last one is of course a boolean. 146

146

Okay. 147

147

So I hope that this logic here made sense. 148

148

And so this is in a nutshell, 149

149

how we loop race using the for loop. 150

150

Now, what we did here, was only to read values 151

151

from an array. 152

152

But now let's also at the same time, 153

153

create a new array which will contain 154

154

this type of each of the elements. 155

155

So basically this, all right? 156

156

So again, what I want to do now 157

157

is to create a new array which will contain all the types 158

158

for all these elements. 159

159

And if that sounds a little bit useless, 160

160

then just keep in mind that these are all just 161

161

educational exercises. 162

162

So I designed them to show you how these different features 163

163

of the language work. 164

164

So in real world, we would probably not create an array 165

165

with types of variables. 166

166

But this is excellent to show you, 167

167

how to create a new array based on the values 168

168

of one original array. 169

169

So to do that we start by creating 170

170

a new empty array outside of the loop. 171

171

And let's do that here, after this one. 172

172

So I will call this one types. 173

173

And now I think this is something we didn't do before, 174

174

which is to simply create an empty array. 175

175

And all we have to do is to basically create an array 176

176

with the usual syntax, but without any element inside of it. 177

177

And so now we have to go here to the same loop 178

178

because this new array types will be based 179

179

on the Jonas array. 180

180

So it's gonna have the same length. 181

181

And so we can use the exact same loop 182

182

that we used to read data from the Jonas loop 183

183

also to construct this new types array. 184

184

So let's say types, 185

185

at position I, should be equal to 186

186

type of Jonas 187

187

at position I. 188

188

And remember that this works 189

189

because we can essentially do this. 190

190

So we could do it again without the loop 191

191

and say types zero 192

192

is equals string. 193

193

So this would work, right? 194

194

And so of course it also works with the 195

195

index number here dynamically. 196

196

And so that's exactly what we're doing here 197

197

in the exact same way as we read data 198

198

from the Jonas array, 199

199

right? 200

200

So in iteration zero, 201

201

we will have type zero equals type of Jonas zero. 202

202

Then in the next iteration, 203

203

we will have types one 204

204

equals type of Jonas one 205

205

and then two, three, four, and five. 206

206

All right. 207

207

So just to see if that works 208

208

let's then log to the console, 209

209

this newly created 210

210

or to be more accurate, this newly filled array. 211

211

So let's see. 212

212

And indeed now we get this array 213

213

which has exactly the types that we can see here as well. 214

214

So string, string, number, 215

215

string, object, and boolean. 216

216

So these six that we also have here 217

217

which means that we achieved our goal here. 218

218

Now, this is just one way 219

219

of filling an array. 220

220

And let me write that down here, 221

221

filling the types array. 222

222

And here we do basically reading 223

223

from Jonas array. 224

224

But this is just one way of doing it. 225

225

So let's comment out this one 226

226

and do it in another way. 227

227

And do you remember how to add elements 228

228

to an array in another way? 229

229

Well, we could use the push method, right? 230

230

So that would be types.push. 231

231

And remember that push 232

232

adds a new element to the end of the array. 233

233

And so here, we now need to pass in the element 234

234

that we do want to add on to the array. 235

235

And so that's again 236

236

type of Jonas 237

237

at position I. 238

238

So off the current counter. 239

239

And so if we try this now again, 240

240

we should get to the same. 241

241

And it's important that we add the new element 242

242

to the end of array and not to the beginning. 243

243

So we really need to use pushier and not unshift. 244

244

So I think that this way of doing it here 245

245

is actually a little bit cleaner. 246

246

But if you prefer this first way here 247

247

then of course you can just use that one as well. 248

248

But what matters here, 249

249

is that we really understood the logic 250

250

of how to construct all the different parts of this for loop 251

251

in order to loop the array. 252

252

So it starts the counter being zero 253

253

because that's the first element of the array. 254

254

And then this condition here 255

255

which specifies that the current index always needs to stay 256

256

below the length of the array that we're looping through. 257

257

And then in the loop itself 258

258

we always get the current element using the current counter. 259

259

Which is gonna go from zero 260

260

to the length of the array minus one basically. 261

261

All right. 262

262

And to make sure we really get this 263

263

let's try another, maybe more practical example. 264

264

So let's go back to having an array of birth years. 265

265

So 1991, 266

266

2007, 267

267

let's say 1969 268

268

and 2020. 269

269

And now what we want to do is to calculate the ages 270

270

for all these four birth years here. 271

271

And we want to store them in a new array. 272

272

And that's a very common type of operation, 273

273

which we actually already did before 274

274

but without using loops. 275

275

So essentially that's what we did 276

276

in the tip calculator challenge. 277

277

So, 278

278

yeah, here. 279

279

So here we had an array of three bills 280

280

and then we manually calculated the tip for each of them. 281

281

So manually we specified index zero, 282

282

one and two, 283

283

and created a new array based on these values. 284

284

But in the real world, we would have used a loop to do that. 285

285

And so that's what we will do now. 286

286

Okay. 287

287

Just with another, a bit more simple example. 288

288

Years is the array which contains the birth years, 289

289

and now let's create another 290

290

and again, empty array, which will then hold the ages. 291

291

And so what we're gonna do now 292

292

is to loop through years and then fill up these ages array. 293

293

So four, 294

294

and then once more, 295

295

let's define the counter at zero 296

296

for the same reasons that we did it before. 297

297

And it's not a problem that discounter variable here 298

298

has exactly the same name. 299

299

Then the condition is also gonna be the same. 300

300

And actually the whole loop 301

301

always kind of looks the same, 302

302

when we loop over an array. 303

303

So now here the difference 304

304

is that it's of course, years.length. 305

305

And then at the end, 306

306

we as always increased the counter by one. 307

307

And now what we need to do is to calculate the age 308

308

of the current year. 309

309

So that's gonna be, 310

310

2037. 311

311

So as always that's the year that we're currently in, 312

312

let's say, and then minus the current birth here. 313

313

So how do we get that? 314

314

We say years, at the current loop position. 315

315

Okay? 316

316

So that's nothing new. 317

317

I hope now at this point, okay. 318

318

So we have this calculation now 319

319

and now we want to add it to this new empty array. 320

320

So we say we want to push it, 321

321

to that array. 322

322

And so we use the push method to do that. 323

323

So ages.push. 324

324

And so this is the value 325

325

that we want to push into this empty array. 326

326

And that's actually it. 327

327

So let's check it out in a console 328

328

and 329

329

here we go. 330

330

So just to confirm, 331

331

2037 minus 1991 is of course 46. 332

332

And that's just do it with 27 as well, 333

333

2007 I mean. 334

334

And so that's 30, which is this one. 335

335

And so this array result, is correct indeed. 336

336

So what we essentially did is this. 337

337

We cannot do an operations 338

338

between simple values and an array. 339

339

So that I showed you earlier, right? 340

340

We can not do 2037 341

341

minus the years array. 342

342

That will just give us not a number. 343

343

And so here in this loop, 344

344

we basically did it individually. 345

345

So we did to calculation one by one. 346

346

In each iteration of the loop 347

347

we calculated 2037 348

348

minus this year and then added it 349

349

to the first position in the ages array. 350

350

Then we did 2037 minus this 351

351

and put it at the end of the ages array again. 352

352

And then the same for this one and for 2020. 353

353

Great. 354

354

So that is a very very useful 355

355

and important application of the for loop. 356

356

And now to finish, 357

357

let's learn about two important statements 358

358

for loops. 359

359

And that's the continue and to break statement. 360

360

Let me just write that here, 361

361

continue and break. 362

362

And let's start with continue. 363

363

So continue is to exit the current iteration of the loop 364

364

and continue to the next one. 365

365

On the other hand, break is used 366

366

to completely terminate the whole loop. 367

367

So let's see two quick examples for that. 368

368

And let's go back to actually this loop 369

369

that we had here. 370

370

Where we looped this Jonas array. 371

371

So I will just copy this, 372

372

because we already learned how to loop through the array. 373

373

And now I'm just interested in showing you 374

374

how continue and to break a work. 375

375

So let me delete this 376

376

and this as well. 377

377

And now let's say that for some reason, 378

378

we only wanted to print elements to the array 379

379

that are strings. 380

380

And the continue statement is perfect for this. 381

381

Because again, 382

382

with continue we can exit the current iteration of the loop. 383

383

So what we can do here, is to say, 384

384

if the type of the current element 385

385

so of Jonas I, 386

386

is not a string, 387

387

then continue. 388

388

And so that's how we write the continue statement. 389

389

It's really just this continue keyword. 390

390

So again, what we want to do here, 391

391

is to only log strings to the console. 392

392

Which means that everything else, 393

393

should basically be skipped. 394

394

And that's what we do here. 395

395

So we say, if the type of the current element, 396

396

so that's this one here. 397

397

So if the type of the current element 398

398

is not a string then continue. 399

399

Which again means, 400

400

that the current iteration of the loop is exited, 401

401

and then the next one starts immediately. 402

402

So let's just write some other note here 403

403

to the console just so we know 404

404

what we're doing here, like 405

405

all the strings 406

406

because otherwise the output here 407

407

is gonna start to look a little bit confusing. 408

408

But anyway, let's test this now. 409

409

And indeed, we only get strings now. 410

410

So these three are strings 411

411

and all the other ones are not strings. 412

412

So this number, this array and this boolean, 413

413

so they will now not get printed. 414

414

Because we basically skipped them. 415

415

For example, that eight number, 416

416

which is 46 here. 417

417

So the third element, does have to type number here. 418

418

Right? 419

419

So it's not a string. 420

420

And so this year will be true 421

421

because of course number is different than string. 422

422

And so this is true. 423

423

And so this code here, will run. 424

424

And what continue will do 425

425

is that it will immediately exit the current iteration. 426

426

And so this line of code here, 427

427

will not be executed in the current iteration. 428

428

It will not even be reached. 429

429

Okay. 430

430

And now finally, let me just show you how break works. 431

431

And remember that what break does 432

432

is to completely terminate the whole loop. 433

433

So not just the current iteration. 434

434

So what we want to do now, is to log no other elements 435

435

after we found a number. 436

436

So essentially after a number is found 437

437

which will be this 46 here, 438

438

nothing else should be printed. 439

439

So let's do that. 440

440

And i will again, copy all of this. 441

441

And so let's say here 442

442

break 443

443

with number. 444

444

So let's translate a logic that we just said into the code. 445

445

So as soon as a number is found, 446

446

we want to break the loop. 447

447

So, our if condition here should be 448

448

type of Jonas I, 449

449

so the current element, 450

450

if it's equal to a number, 451

451

so now that's number then break. 452

452

Now, okay. 453

453

Let's see the result here. 454

454

And indeed, that's exactly what we wanted. 455

455

So after the first number is found 456

456

which is this 46 here, 457

457

nothing else is printed. 458

458

So in this iteration where the number is found 459

459

not even this line of code is printed anymore 460

460

and then the loop is terminated completely. 461

461

All right. 462

462

Now this might not sound very practical, 463

463

but believe me there are some important use cases 464

464

for continue and break. 465

465

It's just hard to create some small and isolated 466

466

code examples to show you just how useful they can be. 467

467

But anyway I wanted to let you know 468

468

that continue and break exist. 469

469

But the most important takeaway from this lecture, 470

470

is definitely to understand, 471

471

how we can loop through a race 472

472

using this kind of logic here. 473

473

Okay, so this one here is really important 474

474

that you understand this snippet of code.