Original subtitles

1 1

The last thing that we're gonna learn in this section 2

2

is how to programmatically create and fill arrays. 3

3

So far we have always simply created arrays like this. 4

4

Right? 5

5

So basically writing them out by hand, literally. 6

6

So just like this, 7

7

or maybe we might've done it also like this. 8

8

So using a new Array, a constructor, 9

9

and then passing in all the numbers here as arguments, 10

10

and then that also creates this array. 11

11

Now in this cases we basically already have all data. 12

12

So for example, one, two, three, four, all the way to seven. 13

13

So that's the data that we already have. 14

14

And so therefore we could then manually create these arrays. 15

15

However, we can actually also generate 16

16

arrays programmatically, 17

17

so without having to define all the items manually. 18

18

And there are many situations in which this is necessary 19

19

and there are also multiple ways of doing it. 20

20

And the easiest one is to again, 21

21

use the Array() constructor function. 22

22

So let's create a new array here like this, 23

23

and then I will pass an only one argument seven. 24

24

So what do you think is gonna happen? 25

25

Well, we might think that this is going to create an array 26

26

with only one element number seven. 27

27

But actually it doesn't, 28

28

instead it creates a new array with seven empty elements 29

29

in there and it simply contains nothing. 30

30

So this output is very weird indeed. 31

31

And the reason for that 32

32

is this weird behavior of this Array() function 33

33

which does it so that whenever we only pass in one argument, 34

34

then it creates a new empty argument with that length. 35

35

So if we don't know about this special particularity 36

36

of the Array() constructor function 37

37

then this can lead to weird errors. 38

38

Okay? 39

39

Now also we cannot really use this X array for anything. 40

40

For example, we cannot call the map() method on it 41

41

to now fill it up. 42

42

For example, we might want to do this map(). 43

43

And then in each element, 44

44

we might simply want to put something there like a five, 45

45

but then you will see, 46

46

well, actually we need to log it to the console. 47

47

But you will see that nothing happened here. 48

48

So this is not really useful except for one thing, 49

49

because there is one method that we can call 50

50

on this empty array and that is the fill() method. 51

51

So that's a new method that we haven't studied yet, 52

52

but it's very straight forward. 53

53

So let me show it to you. 54

54

So that's x.fill() and then all we need to do 55

55

is to pass in a value and it will then fill up 56

56

the entire array with this specific value. 57

57

And this does actually mutate the underlying array. 58

58

so we can just change it there 59

59

and then simply log the entire thing to the console here. 60

60

So this doesn't work, let's take it out. 61

61

And now we get this array full off once. 62

62

But let's actually turn this off 63

63

so we can experiment a little bit more with fill(). 64

64

Because this method is actually a little bit similar 65

65

to the slice() method. 66

66

So besides this value that we want to fill the array with, 67

67

we can also specify where we want it to start to fill. 68

68

So let's say only at index three. 69

69

And so we also can specify a begin parameter 70

70

and then it only starts at index three, which is this one. 71

71

So it will then fill it up until the end, 72

72

unless we specify an end parameter just like in slice(). 73

73

So let's say five, 74

74

And also just like in a slice(), 75

75

the final index here is not gonna be included in the array. 76

76

So just these two here are filled up. 77

77

And of course, we can also use the fill() method 78

78

on other arrays. 79

79

So it doesn't have to be an empty array. 80

80

Let's say we actually defined this here as an array, 81

81

and then we can also fill that array. 82

82

So let's say arr.fill() and let's fill it with 23 83

83

at position four to six. 84

84

And again, it will mutate the original one, 85

85

and so you'll see that we put these 23s 86

86

in these two positions. 87

87

So from four to six. 88

88

Let's say from two to six to put some more in there. 89

89

So this is the fill() method + empty arrays. 90

90

So empty arrays + fill method. 91

91

And with this, we created an array programmatically, 92

92

so without actually having to write it down manually. 93

93

So let's bring this part back also to see it. 94

94

So it's an entire new array that 95

95

we here just created with our code. 96

96

And indeed the fill() method can be very useful sometimes. 97

97

However, what if we actually wanted to recreate 98

98

the array from our first example? 99

99

So what if he wanted to create this arr array 100

100

programmatically? 101

101

Well, for that, we could use the Array.from() function. 102

102

So that's Array.from(), 103

103

and this is how we use it. 104

104

And this is actually something completely new. 105

105

And we didn't see this before. 106

106

So here we are not using 107

107

the from here as a method on an array. 108

108

Instead we are using it on the Array() constructor. 109

109

So that's why it's Array.from. 110

110

And this array here is exactly the same as this one. 111

111

So this function, so again, array here is a function 112

112

and then on this function object, we call the from() method. 113

113

So that sounds confusing, but we will make more sense of it 114

114

in the object oriented programming section. 115

115

But anyway, into this function here, 116

116

we can first pass in an object with the length property. 117

117

So let's set it to seven. 118

118

And then the second argument is a mapping function. 119

119

So it is exactly like the callback function that we pass 120

120

into the map() method. 121

121

So to start, let's also programmatically recreate 122

122

this array here of seven ones. 123

123

And so let's write a callback function here. 124

124

And in this case we don't even need any arguments, 125

125

but we still have to write a function. 126

126

So let's write an arrow function here, 127

127

which will simply return one in each iteration. 128

128

So no arguments, no current element, 129

129

no current index and nothing. 130

130

So all we want to return is a one 131

131

and that will then put a one in each of the array positions. 132

132

So let's call this one here Y 133

133

and then log it to the console. 134

134

And indeed we get here the exact same result 135

135

that we had before. 136

136

But in my opinion, 137

137

this is a lot cleaner than using this a weird new array 138

138

behavior than and together with the fill() method. 139

139

So in my opinion, this is way nicer. 140

140

But anyway, let's not take it one step further 141

141

and actually create this initial array from one to seven. 142

142

So Array.from{length: 7} 143

143

and then our callback function, 144

144

and as always, we get access to the current element. 145

145

So let's call it current first and then the current index. 146

146

And so the index will vary between zero and six. 147

147

And so all we have to return from this function is 148

148

i + one. 149

149

So again, this callback function here 150

150

is exactly like the one in a map() method. 151

151

So you can simply imagine that you're using this 152

152

as a callback function in calling the map() method 153

153

on an empty array. 154

154

And so as always, we get access to the current element 155

155

and the index. 156

156

And so adding one to the index will then give us values 157

157

from one to seven. 158

158

So Z meant... 159

159

Yeah, here we go. 160

160

Now, remember how earlier I used a variable like this. 161

161

So an underscore, which means a throwaway variable. 162

162

And so this is another use case for using this convention 163

163

because we do not need this current value at all. 164

164

But we still of course have to define something 165

165

as the first parameter because the index that we need 166

166

is only the second parameter. 167

167

But to denote that we are not using this current element, 168

168

we simply write an underscore. 169

169

And then other programmers 170

170

will also understand this convention 171

171

and automatically know that we don't use this parameter. 172

172

So this is how we create an array programmatically. 173

173

And I hope you can see all kinds of 174

174

different use cases for this. 175

175

For example, you could create an array 176

176

with 100 random dice rolls. 177

177

So maybe you want to try that out on your own, 178

178

and that is actually one of the assignments that I have 179

179

later here for this section. 180

180

So there's gonna be a couple of exercises 181

181

and this will be one of them. 182

182

But you can try it out immediately if you feel like it. 183

183

So try Array.from() to generate an array 184

184

with 100 random dice rolls. 185

185

See if you can do that, but anyway, 186

186

let's now move on and see a more real use case 187

187

of the Array.from() function. 188

188

Now, this Array.from() function 189

189

was initially introduced into JavaScript 190

190

in order to create arrays from array like structures. 191

191

So remember how I talked about so-called Iterables before, 192

192

so things like Strings, Maps or Sets, 193

193

they are all Iterables in JavaScript. 194

194

And so they can be converted to real arrays 195

195

using Array.from(). 196

196

And that's the reason also for the name of the function, 197

197

because we can create arrays from other things. 198

198

All right. 199

199

Now, besides these obvious Iterables that I just mentioned, 200

200

like Maps or Sets another great example 201

201

of an array like structure 202

202

is the result of using querySelectorAll(). 203

203

So maybe you remember that querySelectorAll() returns, 204

204

something called a NodeList, 205

205

which is something like an array, 206

206

which contains all the selected elements. 207

207

But it's not a real array, 208

208

and so it doesn't have methods like map(), for example. 209

209

But it's not a real array, 210

210

and so it doesn't have most of the array methods 211

211

like map() or reduce(). 212

212

So if we actually wanted to use 213

213

a real array method like that on a NodeList, 214

214

we would first need to convert the NodeList to an array. 215

215

And for that Array.from() is perfect. 216

216

So let's do something here now. 217

217

And let's say that we do not have the movements 218

218

or for application here stored in an array. 219

219

So let me show that real quick. 220

220

So again, let's pretend that we only have these values, 221

221

so all of these movements only stored here 222

222

in the user interface, 223

223

but we do not have them somewhere in our code. 224

224

So we don't have an array containing these values. 225

225

But now let's say we want to calculate their sum. 226

226

And so therefore we need to somehow get them first 227

227

from the user interface and then do the calculation 228

228

based on that. 229

229

So let's create a variable called movementsUI. 230

230

So the ones that we get from the user interface. 231

231

So Array.from() and now here, 232

232

the elements that we want to convert to an array. 233

233

And so that's gonna be document.querySelectorAll(), 234

234

and then it is the movements of value class. 235

235

I'm gonna show it to you in a second. 236

236

So movements_value, 237

237

so in our HTML, we can see that... 238

238

Exactly, this is where the value itself is stored. 239

239

And so that's what we want to get. 240

240

So these numbers, right? 241

241

And so we are selecting all of the elements 242

242

that have this class. 243

243

So let's just start by checking it out, movementsUI, 244

244

but now we only get two elements here, 245

245

and so that's the one that by the time we load 246

246

this script here are already in the user interface. 247

247

So it's this one here. 248

248

So not the seven that are loaded from the account object. 249

249

So it's not gonna be this seven here. 250

250

So if we wanted to actually select exactly these elements, 251

251

we would have to do this code here on some event handler. 252

252

So let's do that, actually. 253

253

Let's simply perform this action 254

254

when we click somewhere here. 255

255

Let's say here on this BalanceLabel. 256

256

So it doesn't matter where we click, 257

257

So that is called the Label Balance. 258

258

So we can attach a EventListeners to every object. 259

259

It doesn't have to be a button. 260

260

So I think we never did this actually. 261

261

But let's see what happens now. 262

262

So let's login again here. 263

263

And again, remember that we are doing this 264

264

so that we can now read these seven movements 265

265

from the user interface as we click here. 266

266

And indeed now it worked. 267

267

So now we get these eight movements here. 268

268

and you see that indeed, 269

269

it is these values that we see now on the screen. 270

270

All right. 271

271

But now let me also show you that we cannot 272

272

call the map() method on it 273

273

because the map() method would be useful to now actually get 274

274

to adjust the number, 275

275

because you'll see that here we also have 276

276

this C or sign and so we need to get rid of that. 277

277

And so the map() method would be perfect for that. 278

278

So what we would like to do is, 279

279

let's just do it here for now. 280

280

We would love to do take the current movement, 281

281

and so in this case, the movement here, 282

282

let's just call it element actually, 283

283

because right now it is a dumb element. 284

284

So we would take this movement, 285

285

which is, remember one of these elements here, 286

286

and so from this element, we need to take the text content. 287

287

And then we also want to replace the Euro sign 288

288

with nothing basically. 289

289

So I'm using the emoji picker here again on the Mac, 290

290

but you can just get a symbol from your text up there, 291

291

so from the code we already wrote. 292

292

And I want to replace it with nothing, 293

293

but now you will see as we try this again, 294

294

that is not gonna work. 295

295

And in fact it does actually work, 296

296

and that's because I was saying it wrong. 297

297

Of course it's gonna work because this one here is 298

298

already a real array at this point. 299

299

So we created this movementsUI using Array.from() 300

300

and so of course it is gonna work already. 301

301

It would not work if we did it directly on the results 302

302

of the querySelectorAll(). 303

303

So sorry for that mistake. 304

304

So it did indeed work already. 305

305

But we can make this even better. 306

306

First of course, we need to convert to a number, 307

307

but that is not the point here, actually. 308

308

So the point is that we can use now the second argument 309

309

of the Array.from() a function here, 310

310

which remember the mapping callback. 311

311

And so basically we can simply put this entire callback 312

312

right here as the second argument. 313

313

And now this movementsUI array is already the final array 314

314

as we see it here. 315

315

So let's just check that out 316

316

and then make really clear what just happened here. 317

317

So again, 318

318

and as we click here, we get indeed all the numbers 319

319

that we have here. 320

320

So let's recap. 321

321

We used a Array.from() to create an array from 322

322

the result of the querySelectorAll() 323

323

which is a NodeList, which is not really an array, 324

324

but an array like structure 325

325

and that array like structure 326

326

can easily be converted to an array 327

327

using Array.from(). 328

328

And then as a second step, 329

329

we even included a mapping function, 330

330

which then forms that initial array 331

331

to an array exactly as we want it. 332

332

So basically converting the raw element to its text content 333

333

and replacing the Euro sign with nothing. 334

334

And so then in the end, we end up exactly 335

335

with the array of numbers that we intended. 336

336

And by the way, I'm not sure if I mentioned it earlier, 337

337

but there is another way of converting 338

338

this here to an array, 339

339

so let me grab it here. 340

340

So movementsUI2, and then we can actually 341

341

spread the results of this querySelectorAll() 342

342

into a new array as well. 343

343

So this also creates the array, 344

344

but then we would have to do the mapping separately. 345

345

And so actually I prefer this. 346

346

So to me, the Array.from() function was a great addition 347

347

to JavaScript in ES6. 348

348

And that's actually all I had to tell you 349

349

here in this video. 350

350

So that was the last couple of methods and functions 351

351

that we learned about a arrays. 352

352

And indeed, we learned a lot of methods in the section. 353

353

Now, keeping all of them in your mind 354

354

to solve different tasks is of course, 355

355

a very hard thing to do. 356

356

And so to make sense of all this mess, 357

357

in the next video, I will help you decide which array method 358

358

you should use in each situation 359

359

to solve different problems.