Original subtitles

1 1

Welcome back. 2

2

Let's now talk about our first data structure. 3

3

And that's gonna be Arrays. 4

4

And let's say, I want it to store my friends' names 5

5

in variables so that I could use them later in my program. 6

6

And so with the knowledge that we have so far 7

7

this is how we would do it. 8

8

So const 9

9

friend one 10

10

let's say Michael, 11

11

and let's spell this correct. 12

12

Then friend two 13

13

Steven and then 14

14

friend three 15

15

let's say Peter. 16

16

Now this isn't really fun to do, right? 17

17

Because imagine that 18

18

we actually wanted to represent 10 friends 19

19

and then we would have to create 10 variables. 20

20

So that doesn't sound like fun. 21

21

Instead, wouldn't it be great 22

22

to essentially bundle all of these values together 23

23

into some bigger container? 24

24

Well, that's why we have data structures in JavaScript. 25

25

And Arrays are such a data structure. 26

26

So an Array is like a big container 27

27

into which we can throw variables 28

28

and then later reference them. 29

29

And that's super important. 30

30

Because programming is most of the time, 31

31

all about data. 32

32

So we get data from somewhere we store and process data 33

33

and then we give some data back. 34

34

And that data, it has to go somewhere. 35

35

So it has to be stored in some place. 36

36

And for that, we use data structures, just like Arrays. 37

37

So in case we have more, than just a single value. 38

38

The two most important data structures 39

39

at least in JavaScript, are Arrays and Objects. 40

40

And so now let's learn all about Arrays. 41

41

So instead of doing this 42

42

let's create a variable, 43

43

which I'm gonna call a friends 44

44

and then we use the brackets, to create a new Array. 45

45

And then in there, we can put different values, 46

46

separated by commas. 47

47

And so let's now use the exact same friends. 48

48

So Michael comma, 49

49

then Steven comma 50

50

and Peter. 51

51

And make sure that these commas here 52

52

are outside of the string. 53

53

So that's an error I see people do. 54

54

And so this needs to be one string. 55

55

So you need to start and finish it, 56

56

then the comma and then another value then another comma 57

57

and then another value. 58

58

Okay. 59

59

And now let's take a look at it in the console. 60

60

Okay. 61

61

And so this is what the Array looks like, in the console. 62

62

So basically just as we wrote it in our code. 63

63

And that is the absolute basics about Arrays. 64

64

So that's how we create one. 65

65

At least that's the way that we use the most 66

66

but there's actually another way. 67

67

So let me show that to you as well. 68

68

So let's say we wanted an Array of years. 69

69

And so instead of the brackets, 70

70

we could also write 71

71

new, Array and then parenthesis. 72

72

And in there we would then specify all our values. 73

73

Let's say 1991, 74

74

1984, 75

75

2008, 76

76

and let's say 2020. 77

77

So on the rate can hold as many values as we want. 78

78

And also values of any type that we'd like. 79

79

So it doesn't have to be strings like here, 80

80

of course, numbers work just the same. 81

81

And so here we used a different way of creating the Array, 82

82

which was using this Array function. 83

83

So you see that it's a function because we called it here 84

84

basically using these parenthesis. 85

85

And we also needed to use the new keyword 86

86

because otherwise it's not gonna work. 87

87

But anyway, it's way more usual to just use the brackets 88

88

like I did up here, which is called the a literal syntax. 89

89

Great. 90

90

So now we know how to create Arrays. 91

91

So basically how to put elements into an Array, 92

92

but of course we need to have a way to get them out. 93

93

And for that, we use the square bracket syntax again. 94

94

So let's say that we want to log to the console, 95

95

the first element of this friend's Array. 96

96

So that would be Michael. 97

97

So console.log, 98

98

and now we write friends. 99

99

So that's the name of the Array. 100

100

And then we use the square brackets 101

101

and then the number zero. 102

102

That's because Arrays are zero-based, 103

103

which means that this first element 104

104

is the element number zero. 105

105

Then this one is element number one 106

106

number two, and so on and so forth. 107

107

And so if we want the element at position zero, 108

108

so this first one, 109

109

then we write friends square bracket zero. 110

110

And that's it. 111

111

And now let's say we wanted Peter here as well. 112

112

So that would be element zero, one, two. 113

113

And so, let's just write two. 114

114

And check it out. 115

115

And indeed we get Michael and Peter. 116

116

Cool. 117

117

Now we can also get the actual number of elements 118

118

that is in the Array. 119

119

So let's also log that one to the console. 120

120

And this one works by saying, 121

121

friends.length. 122

122

Okay. 123

123

And this dot length is something called a property 124

124

which we're gonna talk about a little bit later 125

125

in the section when we talk about objects. 126

126

Anyway what matters, is that this is gonna be the exact 127

127

amount of elements that is in the Array. 128

128

And it's not zero based. 129

129

So it will not be two, 130

130

even though the last one here is element number two. 131

131

Instead it really gives us the number 132

132

of elements in the Array. 133

133

So we should expect this to log three 134

134

and yeah, here we go. 135

135

Now we can use this to 136

136

automatically get the last element of any Array. 137

137

And that is useful so that we don't have to count 138

138

how many elements are in the Array. 139

139

So let me show you how we could do that. 140

140

Friends, 141

141

and then remember to retrieve an element from the Array, 142

142

we need to square brackets. 143

143

So just like this. 144

144

And then to get the index of the last element in the Array 145

145

all we need to do, is friends.length minus one. 146

146

So friends.length 147

147

minus one. 148

148

And that's because again, 149

149

friends.length is not zero based. 150

150

So this is three I remember, 151

151

but this last element is two. 152

152

And so we always need to subtract one from this number here. 153

153

Okay. 154

154

So what this also means, 155

155

is that inside of these brackets, we can put any expression. 156

156

It doesn't just have to be a number 157

157

literally like we did here and here. 158

158

So here we have this expression 159

159

and remember that an expression 160

160

is something that produces a value. 161

161

And so this one here is gonna be calculated first. 162

162

So it will compute friends.length 163

163

which is three minus one is two, 164

164

and then it will get friends at position two. 165

165

And that's also one of the reasons 166

166

why it's important that you know 167

167

what is an expression and what is a statement. 168

168

Because once again, we could not put a statement in here. 169

169

So inside of these square brackets, 170

170

JavaScript expects an expression, not a statement. 171

171

Anyway, we got to the correct element from the Array, 172

172

which is the element number two. 173

173

And so that means that this automatic retrieval 174

174

of the last element works just fine. 175

175

All right. 176

176

And moving on, there is more stuff that we can do. 177

177

So this square bracket syntax, that we used here 178

178

is not only for retrieving elements from the Array 179

179

but we can also change it to add elements to the Array. 180

180

So let's say that for some reason, 181

181

I'm no longer friends with Peter 182

182

and that I want to replace him with some other friends. 183

183

And so now we can change or mutate the Array 184

184

in the same way. 185

185

So we can say 186

186

friends at position number two 187

187

and I'm doing it manually here again. 188

188

So we can say that this should be equal to, something else. 189

189

And let's say Jay. 190

190

And if we now log this friends Array to the console, 191

191

then we should already see the new Array. 192

192

So, 193

193

friends and let's see, 194

194

and indeed the element number two. 195

195

So this one here, is now replaced with Jay, 196

196

okay. 197

197

So in the beginning, when we first logged 198

198

the friends Array to the console, 199

199

it was still in this state. 200

200

So it still had Peter. 201

201

And that's why here in the beginning, 202

202

we still see that original state. 203

203

But then as we move on through the code, 204

204

at some point here, we changed that Array. 205

205

And so when we then log the Array again 206

206

that change is of course reflected here in the output. 207

207

But wait! 208

208

Didn't I say in the last section, 209

209

that variables declared with const, cannot be changed. 210

210

And we did in fact declare the friends variable 211

211

here with const, right? 212

212

But I was still able to change one element 213

213

of the Array here from Peter to Jay, right? 214

214

So isn't that a contradiction? 215

215

Well what I didn't tell you at the time, 216

216

is that only primitive values, are immutable. 217

217

But an Array is not a primitive value. 218

218

And so we can actually always change it so we can mutate it. 219

219

And it works this way 220

220

because of the way that JavaScript stores things in memory. 221

221

And once more we will have a whole lecture 222

222

just on that topic alone, 223

223

in a special section about how JavaScript works 224

224

behind the scenes. 225

225

So what you need to know for now 226

226

is that we can actually mutate Arrays 227

227

even though they were declared with const. 228

228

Now what we can not do 229

229

is to actually replace the entire Array. 230

230

So we cannot do this. 231

231

We cannot say that the entire friends' Array should now be 232

232

Bob and Ellis. 233

233

That would be illegal. 234

234

So let's see. 235

235

And now we get assignment to constant variable. 236

236

And so that's why 237

237

that we can not do. 238

238

But let's just keep it here anyway. 239

239

So you get this as a reference. 240

240

Next up, I want to show you that an Array 241

241

can actually hold values with different types 242

242

all at the same time. 243

243

So let's experiment with that. 244

244

So let's create an Array which holds 245

245

all kinds of information about me. 246

246

So let's say Jonas, so that would be the first name 247

247

then the last name, then the age. 248

248

And here we can actually calculate the age 249

249

from other values. 250

250

And that works because in each position, 251

251

JavaScript simply expects an expression. 252

252

And so if we do this, 253

253

then this is perfectly fine. 254

254

Okay. 255

255

So this will here produce a value. 256

256

And so that's the value that will then be stored 257

257

at position number two of the new Array. 258

258

And that also works for variables. 259

259

So we could, for example do 260

260

first name equal Jonas. 261

261

And then 262

262

here instead of literally writing that, 263

263

we could use this variable name. 264

264

And so this would then be replaced, with the actual string. 265

265

So let's put some more data 266

266

and actually we could even put other Arrays 267

267

inside of an Array. 268

268

So that's really cool. 269

269

So let's put the friends Array here, 270

270

in the Jonas Array. 271

271

And then with this, 272

272

we have all the relevant data about Jonas 273

273

in one handy data structure. 274

274

And that's really convenient because 275

275

then we don't have to create one variable 276

276

for each of the data points. 277

277

So let's, 278

278

of course, inspect is now in the console 279

279

so that you can see 280

280

that all of these expressions here basically. 281

281

So this 282

282

and this here 283

283

and this, 284

284

so all of them are gonna be replaced 285

285

with the values that they produce. 286

286

And so 287

287

indeed, we now get Jonas. 288

288

We have to calculate at age, 289

289

and here have the Array at three. 290

290

And we can expand that 291

291

by clicking on this small triangle here 292

292

and then we can see the actual Array in here. 293

293

We also have the length. 294

294

So length is five. 295

295

And so that's where JavaScript 296

296

gets this friends.length from. 297

297

Jonas.length, 298

298

would of course also work. 299

299

And it would be this five that we see here. 300

300

Okay. 301

301

So that's the one. 302

302

Great. 303

303

So these are the very fundamentals of Arrays in JavaScript. 304

304

And now just to finish this video, 305

305

let's work on a very small Array exercise. 306

306

So that we can see why Arrays are actually so useful. 307

307

And to do that, let's bring back our old calcAge function. 308

308

So 309

309

it's gotta be somewhere here. 310

310

Yes. 311

311

Let's use this one. 312

312

We've coded this so many times 313

313

that I don't want to repeat it. 314

314

So exercise. 315

315

So calcAge. 316

316

And now let's say that we have an Array of birth years. 317

317

And then we want to calculate the ages for some of them. 318

318

So, 319

319

a new Array 320

320

and let's say 1990, 321

321

1967, 322

322

2002, 323

323

2010 and 2018. 324

324

And now we will be able to use the calcAge function 325

325

and then store the results of calculating the ages 326

326

for some of these years into a new Array. 327

327

So let's see how 328

328

and let's see first how we could not do it. 329

329

Okay. 330

330

So for example, if we wanted to use the calcAge function 331

331

for all of the elements in this Array, 332

332

we could not do this. 333

333

This would be 334

334

not illegal, I would say 335

335

but it's not gonna work 336

336

because this years is an Array. 337

337

And if we pass this years' Array as an argument 338

338

to the calcAge function, 339

339

it doesn't know what to do with it. 340

340

Because this operation here expects a single value 341

341

and we cannot do a number 342

342

minus and array. 343

343

So let me actually show you what's gonna happen 344

344

if we run this, 345

345

and well that's not the error I wanted to show you. 346

346

So what we get is, 347

347

"identifier 'years' has already been declared." 348

348

So this means that somewhere in the code, we already have 349

349

an Array called years and yeah, here it is. 350

350

So that's changed the name of this one to just Y. 351

351

So that one doesn't really matter anyway 352

352

but now let's see what happens 353

353

and well 354

354

not much did happen. 355

355

So we actually need to inspect the result, of this. 356

356

So console.log, 357

357

and then the result of this. 358

358

So let's see, and now we get the result, "not a number." 359

359

And so that's the result 360

360

of attempting to subtract a whole Array 361

361

which would be this year's Array, from a number. 362

362

Okay. 363

363

So let's actually do that here as well. 364

364

Remember that we have access to all the variables 365

365

that we declare in the script, 366

366

also in the console. 367

367

So that's the years Array, that we just declared. 368

368

But years, for example, plus 10 369

369

does not work. 370

370

At least not in a way that we expected it. 371

371

So the plus operator what it does here, 372

372

is to convert everything to a string, 373

373

just like I showed you before. 374

374

And so the string here, 375

375

is then basically this Array as a string, 376

376

and then it adds the 10 here. 377

377

So that's not meaningful at all. 378

378

And if we use it with minus 10, then it's even weirder. 379

379

So we get not a number. 380

380

So all of this is to say 381

381

that we cannot do operations with Arrays. 382

382

But we can still use the calcAge function 383

383

on individual elements of the Array of course. 384

384

So let's do that. 385

385

And we will assume that I want to calculate the ages 386

386

for the first, the second and the last Array element. 387

387

So this one, this one 388

388

and this one. 389

389

So let's 390

390

calculate this 391

391

and then store the result into a variable called age one 392

392

and we need to get rid of this parenthesis. 393

393

And so, as I said 394

394

I want to calculate the age for this first element. 395

395

And so what we do, 396

396

is to take years at position zero. 397

397

And so this year will then basically be replaced with 1990. 398

398

And then calcAge is called with 1990, 399

399

and to resolve the stores to age one. 400

400

Now let's do this some more times 401

401

and say, age two age three. 402

402

And here I'm using one. 403

403

So remember I want this, this and the last one. 404

404

But I don't want to count 405

405

the number of elements in the Array. 406

406

And so I used that trick, that I just showed you 407

407

in the beginning 408

408

which is to first compute the length of the Array. 409

409

So years.length, 410

410

and then minus one to account for the fact 411

411

that the index of the Array is zero based. 412

412

And now we can quickly check out if this actually worked. 413

413

So age one, age two, 414

414

age three. 415

415

And yeah. 416

416

So we got three values here, 417

417

which are these three ages. 418

418

But we can take this even a little bit further. 419

419

So since we started with an Array, 420

420

it's usually a good idea, to also end up with a new Array. 421

421

So let's create an Array 422

422

const ages, 423

423

and now what should I put in here? 424

424

Well, remember how I said up here 425

425

that any position of the Array 426

426

simply needs to be an expression. 427

427

So something that produces a value. 428

428

And as we already know, 429

429

this here produces a value as well, right? 430

430

It is an expression. 431

431

And so I can take this 432

432

and simply put it as a position in this Array. 433

433

And so JavaScript will then go ahead 434

434

compute this value and place it in the Array. 435

435

So basically we can place function calls 436

436

into an Array just fine, 437

437

because they will produce a value. 438

438

And now here. 439

439

We need to again, 440

440

do years.length minus one. 441

441

And now finally logging it to the console 442

442

and then we're done. 443

443

And indeed we get the three same values, 444

444

that we had up here separately. 445

445

Now, all nicely placed into this Array. 446

446

And this of course works 447

447

because JavaScript will start by 448

448

running these function calls, 449

449

these three function calls here 450

450

and then place all the results in an Array afterwards. 451

451

Nice. 452

452

And I think that should be enough for one video. 453

453

I hope that you see how fun Arrays can be, 454

454

and how useful they can be. 455

455

And in the next lecture, 456

456

we will make them even more useful 457

457

by doing some operations with them.