Original subtitles

1 1

JavaScript has some built in functions 2

2

that we can basically apply directly on arrays. 3

3

And these are called methods and we can think 4

4

of methods as array operations basically. 5

5

So let's now learn some useful array methods. 6

6

And there are actually countless array methods 7

7

in JavaScript and in fact, we have a whole section dedicated 8

8

to arrays alone. 9

9

That's how important they are in JavaScript. 10

10

But in this video we gonna learn just some basic ones 11

11

that you really need to know and also so that you start 12

12

to get used to the idea of using methods on arrays. 13

13

Now, let's start by bringing back the friends array 14

14

from the last lecture. 15

15

All right, and now let's start with a method called push. 16

16

So the push method adds elements to the end of an array. 17

17

And so let's say, friends dot and then push 18

18

and then the elements that we want to add 19

19

to the end of the array. 20

20

So let's say Jay here, so push is essentially a function 21

21

and we can see that by these parenthesis. 22

22

So it's a function that we call and we call 23

23

that function really attached to the friends array itself. 24

24

And that's what this dot here stands for, all right? 25

25

So again push is a method which technically is a function 26

26

and we call that function directly on the friends array. 27

27

So the push function is kind of attached 28

28

to the friends array and if you're wondering why that is 29

29

we will once more learn that a little bit later 30

30

in the course, but there is a good reason why this works 31

31

and it's actually a pretty fascinating stuff. 32

32

So I hope that you're excited to keep continuing 33

33

to explore this course, until you'll really learn how all 34

34

of this actually works. 35

35

Now anyway, let's now check out the friends array 36

36

in the console, because this is really all we need to do 37

37

to add an element to the end of the array. 38

38

And indeed now we get the original array 39

39

that we had before plus the Jay element. 40

40

And you see that the length is now also four, okay? 41

41

so this actually changed, so it mutated the original array, 42

42

but that's no problem at all just like I explained you 43

43

in the previous lecture, remember that? 44

44

All right, now since push is a function here, 45

45

it can also return something. 46

46

So we already know that we can pass arguments 47

47

into functions and we did that here with Jay, 48

48

then the function can do some work and in this case, 49

49

the work that the push function does is to add the element 50

50

to the array and actually the push function does return 51

51

a value and the value that it returns 52

52

is the length of the new array. 53

53

So if we want to capture that data or that value, 54

54

we can create a new variable for that. 55

55

So let's call it new length and let's 56

56

then also log it to console. 57

57

And indeed, it is four so most of the time 58

58

we actually don't do this. 59

59

So we just push an element and call it a day 60

60

because usually we don't immediately need the length 61

61

of the new array. 62

62

But in case we need it, we don't need 63

63

to then calculated separately, we can simply take the result 64

64

of this function here store it into a variable 65

65

and then use that. 66

66

Great, now besides the push method which adds elements to 67

67

the end of the array, there's also methods to add elements 68

68

to the beginning of the array so that is the unshift method. 69

69

So unshift and so let's say we wanted to add John 70

70

right to the beginning of this friends array. 71

71

So again, let's check it out and so now it should 72

72

have five elements and the first one should be John. 73

73

And yeah, it is and just like the push method, 74

74

the unshift method also returns the length of the new array. 75

75

But in this case we are just not saving it 76

76

because we don't really need it. 77

77

Next up we also have methods to remove elements from arrays. 78

78

So this one here add elements, so let me just write 79

79

that here, add elements 80

80

and then we have some to remove elements. 81

81

And let's start with the pop method which is basically 82

82

the opposite of the push method. 83

83

So this means that pop will remove the last element 84

84

of the array, so let's write that here. 85

85

And this time we don't need to pass in any argument 86

86

and that's because there is no information needed really 87

87

to just take out the last element. 88

88

So let's try that, oh we didn't log it again to the console. 89

89

So let's just grab it from here and now you see 90

90

that Jay is actually gone. 91

91

And if we did it twice for example, which of course 92

92

we can also do then Peter should also be gone 93

93

and indeed, we removed Jay and Peter. 94

94

Now, again this pop method also returns something, 95

95

but this one doesn't return the length of the new array 96

96

but instead, it returns the removed element. 97

97

And so that can sometimes be useful 98

98

so let's call this one popped, okay? 99

99

And so let's log that one to the console as well, 100

100

so that is the popped element and we could do the same for 101

101

this first call, but as I said earlier, we don't always do 102

102

this because it's not always that useful. 103

103

But here I just want to show you direct how it works 104

104

and so the pop element should now be Peter. 105

105

So this first one here is Jay and then 106

106

the last one becomes Peter. 107

107

And so here in the second pop call, Peter is the one 108

108

that's being removed and so that's the element that's 109

109

then going to be saved into popped 110

110

and yeah, here it is, okay? 111

111

And finally, let's also remove the first element 112

112

from the array and so that's friends dot unshift. 113

113

So let's copy this one again, give it a save 114

114

and so now only Michael and Steven should be left after all 115

115

this manipulation, right? 116

116

Oh, and actually that did not work and that's because I did 117

117

a mistake, so unshift is of course to add elements 118

118

to the array and so this one here is called shift 119

119

and not unshift, so now it should work, yeah. 120

120

Once again we didn't need any arguments and once again 121

121

this method here will return the element that was removed, 122

122

so if we need that, we can capture it. 123

123

Next up, there is a very useful method that tells us 124

124

in which position a certain element is in the array. 125

125

So let's work with this smaller array that we have left. 126

126

And what we want to log to the console now 127

127

is friends dot indexOf and then we pass the element, 128

128

which we want to reference. 129

129

So let's say we want Steven and so as I said 130

130

this should return the index at which this element 131

131

is located, so we know that Steven 132

132

is right now element number one, right? 133

133

So zero and one and we actually can see 134

134

that here in the console. 135

135

So zero is Michael, one is Steven so this indexOf function 136

136

call should return the value one, because again that's 137

137

the indexOf the element Steven and yeah, there we go. 138

138

Now, if we try the same thing for an element that 139

139

is not in there, let's say Bob, we will get minus one. 140

140

All right, and now finally to finish this lecture, 141

141

there is a very similar method to the indexOf, 142

142

but which is a bit more modern 143

143

and in my opinion also more useful. 144

144

So this one is an ES6 method and it's called includes. 145

145

So includes, instead of returning the index of 146

146

the element will simply return true if the element 147

147

is in the array and false if it's not. 148

148

So let's check that, so friends dot includes and now 149

149

we can actually do the same as up here. 150

150

So let me just copy that and the difference here is again 151

151

the includes method, so let's see what we get now. 152

152

And as expected with Stephen it is true because indeed 153

153

we have one element here Steven but Bob is false 154

154

because well, there is no element called Bob. 155

155

And this method actually uses strict equality 156

156

for this check. 157

157

So let's say that we pushed some value here to this array 158

158

so friends dot push which remember will add a value 159

159

to the end of the array. 160

160

So if we added 23 and then if we checked for 23 to string, 161

161

it would not work, so it would say false, right? 162

162

And that's because it is testing with strict equality 163

163

which means that it does not do type coercion. 164

164

And since 23 to string is different from 23 to number, 165

165

it gives us false, but if I test it directly for the number 166

166

then it should be true and yes, it is. 167

167

So we added it here to the array and so then of course 168

168

the array includes it, that makes sense. 169

169

And so we can use the include method to write conditionals. 170

170

So that's one of the very useful application of this method. 171

171

For example, just to test it out very quickly, 172

172

let's say friends dot includes Peter and then 173

173

if so we can log to the console, 174

174

you have a friend called Peter, okay? 175

175

So we already know that this here returns a Boolean 176

176

and we also already know how the if statement works 177

177

and so only if this is true. 178

178

So if the array does include a string with Peter, 179

179

only then this code is executed. 180

180

And so right now of course nothing happens 181

181

but if I ask for Steven then here let's say Stephen as well. 182

182

Then I get, you have a friend called Stephen. 183

183

So that's probably the most use case of the includes method. 184

184

Now right, and that's all I had to show you for 185

185

this lecture and as I said in the beginning, 186

186

there are many more useful methods for manipulating arrays. 187

187

But for now, I just wanted to show you the most basic ones. 188

188

And next up, there's yet another coding challenge 189

189

waiting for you.