Original subtitles

1 1

Welcome back. 2

2

Let's begin this section with a couple of very simple 3

3

and very easy to understand array methods, 4

4

just to expand our array toolkit a little bit more. 5

5

And as always, at the beginning of a new section, 6

6

make sure to grab your starter files 7

7

and open them up in VS Code. 8

8

So that's the folder called arrays banquest. 9

9

And then open up script.js, which is gonna contain 10

10

a lot of stuff here. 11

11

But for now, don't worry about any of that, 12

12

I will explain what all of this is, 13

13

and also what else we have in our starter files 14

14

in a couple of videos from here. 15

15

All right, so up there, we have the application part 16

16

for the app we're gonna build in this section. 17

17

And then here we have the lectures part, 18

18

which is a bit more for the concepts themselves. 19

19

And by the way, this yellow part here comes 20

20

from a VS Code extension that I use. 21

21

And I think I showed it to you in the beginning. 22

22

But anyway, let's now talk about array methods. 23

23

Now before we start, let's quickly talk about why arrays 24

24

do actually have methods. 25

25

Well, remember that methods are simply functions 26

26

that we can call on objects. 27

27

So basically, they are functions attached to objects. 28

28

So if we have array methods, that means that 29

29

arrays themselves are also objects. 30

30

And so these array methods are simply functions 31

31

that are attached to all arrays 32

32

that we create in JavaScript. 33

33

Now, we will learn why all arrays have access 34

34

to this methods in a later section 35

35

when we talk about prototypal inheritance. 36

36

But for now, I just want you to understand that arrays 37

37

are objects, and that they get access to special 38

38

built in methods that we can essentially 39

39

see as tools for arrays. 40

40

And so as I mentioned, in this lecture, we're gonna start 41

41

by learning some very simple tools 42

42

that we can use on arrays. 43

43

So let's start by defining a simple test array 44

44

that we can work with. 45

45

And I'll make it as simple as possible 46

46

just with these letters, because that will help us 47

47

understand some of the things we're gonna do here. 48

48

Alright, the first method we're gonna talk about 49

49

is the slice method. 50

50

And this one is very similar to the slice method 51

51

that's available on strings, remember? 52

52

So with the slice method, we can extract part of any array, 53

53

but without changing the original array. 54

54

So essentially, we can take a slice of an array. 55

55

And so that's why it's called slice. 56

56

So array.slice, and now just like in strings, 57

57

we have the begin parameter. 58

58

And so this is the index at which we will start extracting. 59

59

So when we say two here, we should start extracting 60

60

here at C, and then all the way to the end, okay? 61

61

And then this slice method will return a new array. 62

62

And so we need to log that to the console 63

63

in order to actually see it, okay. 64

64

So as I said, this does not mutate the original arr, array. 65

65

Instead it returns a new array. 66

66

So a copy of the array, but only with the extracted parts. 67

67

So let's open up a terminal here again, and live server. 68

68

And here we go. 69

69

So this is already on banker's page, 70

70

but nothing is gonna work here yet. 71

71

So for now, let's just open up the console 72

72

because that's really all we are interested in for now. 73

73

Let's reload here again. 74

74

And so now we indeed get this array, which is a slice 75

75

of the original array starting at position number two. 76

76

So zero, one and two, right. 77

77

Now, of course, we can also define the end parameter. 78

78

So when we write two and four 79

79

then let's see the result here. 80

80

And so what this means is that just like in strings, 81

81

the end parameter here is not included in the output. 82

82

So index four is this one here. 83

83

And so yeah, as I just mentioned, this one is not 84

84

gonna be included in the output. 85

85

So two to four is really just two and three, okay? 86

86

And so the length of the output array right here 87

87

will be the end parameter minus the beginning one. 88

88

And so that's exactly the length we get here. 89

89

Then next, again, just like in strings, 90

90

we can define a negative begin parameter, 91

91

and then it will start to copy from the end of the array. 92

92

So minus one will basically take the last two elements 93

93

of the array, so D and E. 94

94

And so with this, it's pretty easy to simply get 95

95

the last element of any array. 96

96

So if we just duplicate this, so minus one is always 97

97

just the last element of any array. 98

98

So this is a very nice trick that sometimes useful. 99

99

And now to make this complete, 100

100

we can also use a negative index as the end parameter. 101

101

So let's start extracting at position number one, 102

102

until minus one, basically. 103

103

So let's see if that returns B and C. 104

104

And that's because it now starts extracting at position one, 105

105

which is here, and it extracts everything 106

106

except the last two here. 107

107

So that's what the minus two here means. 108

108

Alright, and if you find this a bit confusing, 109

109

then just experiment a little bit more with this. 110

110

Now finally, we can use the slice method 111

111

to simply create a shallow copy of any array. 112

112

So to do that, we simply call it 113

113

without any arguments at all. 114

114

And then indeed, we get here the exact same array. 115

115

And if you remember it correctly, we already did 116

116

something similar in one of the previous sections, 117

117

but using the spread operator, remember? 118

118

So back then we did this. 119

119

So creating a new array, and then expanding 120

120

the original array into that. 121

121

And so that gives us the exact same result. 122

122

So the question is, should you use the spread operator 123

123

or the slice method, in order to create a shallow copy? 124

124

Well, that's actually entirely up to you. 125

125

So it's just a matter of personal preference. 126

126

The only time you really need to use the slice method here 127

127

is when you want to chain multiple methods together, 128

128

so calling one after the other. 129

129

And we will do that, of course, later in this section. 130

130

All right. 131

131

So that is the slice method. 132

132

Next up is a method with a very similar name, 133

133

which is called splice. 134

134

And a splice method works in almost the same way as slice. 135

135

But the fundamental difference is that 136

136

it does actually change the original array. 137

137

So it mutates that array. 138

138

So let's again, log the result to the console anyway. 139

139

But now, we use splice. 140

140

And then with the same argument, as we use before here, 141

141

and so the result here, looks exactly the same. 142

142

So this one here is the same as this first one. 143

143

Let's give it even more space here. 144

144

But now, watch what happened to our original array, 145

145

and we see that all that remains here in our original array 146

146

is the first two elements. 147

147

And so now the extracted elements are actually gone 148

148

from the original array. 149

149

So splice deleted them. 150

150

And so what we can see is that splice actually does mutate 151

151

the original array, so it takes part of the array 152

152

and returns it and then the original array itself 153

153

loses this part that was extracted. 154

154

Now in practice, most of the time the value that 155

155

the splice method returns, doesn't even interest us. 156

156

All we are usually interested in is to just delete 157

157

one or more elements from an array using splice. 158

158

And one pretty common use case is to simply remove 159

159

the last element of an array. 160

160

So let's actually do that here. 161

161

So let's say arr.splice, and then minus one. 162

162

So just like in the slice method, minus one here 163

163

is the last element. 164

164

So the begin and end parameters, works exactly the same 165

165

as in the slice method. 166

166

Let's just get rid of this one here, 167

167

so that we see our original array. 168

168

And so indeed, as we log here arr to the console. 169

169

It is the original array, except for the last element, 170

170

which was e. 171

171

So that's exactly what we did here. 172

172

Alright. 173

173

And as always, in case you want to learn more 174

174

about any particular method, for example, 175

175

you can always use the MDN documentation. 176

176

So let's say MDN array splice. 177

177

So this one. 178

178

And so now here are some more examples on how to use this. 179

179

And so you have the name of the parameters. 180

180

And actually, the second parameter is called delete count. 181

181

So it's actually not the begin parameter. 182

182

So it works a little bit different than in the slice method. 183

183

So let me just show that to you. 184

184

So going back here. 185

185

So if we do dot splice, let's say at position number one, 186

186

and then we want to take exactly two elements, 187

187

and so then we write two, okay, 188

188

and so the result now of the resulting array 189

189

should be that a and c are deleted. 190

190

And so indeed, only a and d now remain. 191

191

Let's log arr to the console here to see the process 192

192

a little bit better. 193

193

So here, we removed the first one. 194

194

And then here, we went to position one, 195

195

and extracted or deleted two elements. 196

196

And so position one and then two elements. 197

197

So this first parameter here works the same 198

198

as in the slice method but the second one 199

199

is really the number of elements that we want to delete. 200

200

All right, so that is splice. 201

201

Next up, we're gonna talk about reverse. 202

202

So that's a very simple one. 203

203

Let's just restore our array here at this part 204

204

so that we can work with the original one here. 205

205

Or actually, let's also create a new array here. 206

206

Let's call this one, arr two. 207

207

And here, we will have five more letters of the alphabet 208

208

but this time, in a wrong order. 209

209

So let's say for some reason, 210

210

we are working with this array and we need to reverse it. 211

211

And so that's exactly what we use reverse for. 212

212

So arr2.reverse. 213

213

And indeed, it now returns the reverse array. 214

214

Here I actually want F. 215

215

And so now it is correct. 216

216

So f, g, h, i, j. 217

217

But now what's important to note here is the fact 218

218

that the reverse method does actually mutate 219

219

the original array. 220

220

So you see, as we log in the original, 221

221

it is now reversed two, okay. 222

222

So this one here does mutate the array. 223

223

So that's important to keep in mind. 224

224

So maybe you're noticing that in each of the methods, 225

225

I always mentioned which one mutates, 226

226

and which one does not mutate the original array. 227

227

And that's because this is a very important characteristic 228

228

of each of these methods. 229

229

That's because in a certain situation, 230

230

we might not want to mutate the original array, 231

231

and then we cannot use any of these methods. 232

232

Now, okay. 233

233

Next up, is the concat method. 234

234

And so this one is used to concatenate two arrays. 235

235

So let's create a variable called letters. 236

236

And letters will be the result of calling 237

237

the concat method on array. 238

238

And here, we have to specify the second array. 239

239

So let's take a look. 240

240

And now we have the 10 first letters of the alphabet here. 241

241

So the first array will be the one 242

242

on which the method is called. 243

243

And the second one is the one that we pass 244

244

into the concat method. 245

245

And once again, we already did this before, 246

246

in another way, remember? 247

247

So we could simply also do this, right, 248

248

arr and then arr two. 249

249

This gives us the exact same result 250

250

and it also does not mutate any of the involved arrays. 251

251

So just like concat, which also doesn't mutate 252

252

the original array here, alright. 253

253

And finally, just the join method 254

254

that we already talked about before, 255

255

but just for the sake of completion here, right. 256

256

And by the way, here in this concat method, 257

257

so if you prefer to do this one is of course perfectly fine. 258

258

And once again, it is just a matter of personal preference, 259

259

whether you prefer to use the spread operator, 260

260

or the concat method. 261

261

All right. 262

262

And now here, let's just join all the letters 263

263

of the alphabet together that we have here in our array 264

264

by using this separator here. 265

265

Okay, and so as you already know, the result here 266

266

is a string with the separator that we specified. 267

267

Great. 268

268

So your array tool set is rapidly growing here. 269

269

And remember that you already know push on shift, 270

270

pop shift, index of n includes from the intersection. 271

271

Now if you ever lose track of all these different methods, 272

272

and how they work, you can always come back to these videos. 273

273

Or of course, check the documentation on MDN, 274

274

just like we did here. 275

275

So no developer in the world knows all of this by heart. 276

276

So sometimes I even have to look up how the splice 277

277

or the slice method works, 278

278

because it's just too many methods to keep track of. 279

279

And, yeah, it's very hard to know everything by heart. 280

280

But anyway, let's now move on to the next lecture, 281

281

where we will take array methods to a whole new level.