Original subtitles

1 1

Welcome back, it's great to still have you here 2

2

in this project. 3

3

And now that we have a good grip on the find method, 4

4

let me introduce you to a close cousin of the find method, 5

5

which is the findIndex method. 6

6

And the the findIndex method works 7

7

almost the same way as find. 8

8

But as the name says, findIndex returns the index 9

9

of the found element and not the element itself. 10

10

So, let's see a great use case for findIndex 11

11

in our Application here, 12

12

which is the close account feature that we have here. 13

13

And in our Application here, 14

14

closing an account, means to basically just delete 15

15

that account object from the accounts array. 16

16

So from this one here, okay? 17

17

So for example, if Sarah decides to close her account, 18

18

then this account for will simply be deleted, 19

19

and that's it. 20

20

Now, to delete an element from an array, 21

21

we use the splice method, remember, 22

22

but for the splice method, 23

23

we need the index at which we want to delete, 24

24

and where could that index come from, 25

25

and you guessed it from the findIndex method. 26

26

So, let's first select this button here, 27

27

and attach an event handler to it. 28

28

And so that's the button close here. 29

29

So let's come down here to our event handlers, 30

30

now we have multiple, 31

31

and button, Close.addEventListener, 32

32

click, and then as always, 33

33

or function in which we need the event object, 34

34

so that we can call a preventDefault. 35

35

All right, let's just test, 36

36

if this connection works here, 37

37

let's login, 38

38

and now as we click this here, we get delete. 39

39

So that's great. 40

40

And now let's take a look at our flowchart here. 41

41

And so, yeah the first thing that we need to do, 42

42

is to check if the credentials are correct. 43

43

So basically, if the username that is inputted here, 44

44

is equal to the current user and the same for the pin. 45

45

So, that doesn't sound too hard, does it? 46

46

So actually, let me leave that for you as a challenge. 47

47

So just write this condition here to again, 48

48

check if both the user is correct and the pin. 49

49

All right, I hope you did that. 50

50

So let's first take a look at the element names 51

51

that we have up here. 52

52

And so that's inputCloseUsername and inputClosedPin. 53

53

So I hope you figured these names out here too. 54

54

And so let's now say, 55

55

inputCloseUsername.value, 56

56

needs to be exactly the same as the username 57

57

in the current account. 58

58

So currentAccount.username. 59

59

So this needs to be true, 60

60

and the same thing for the pin. 61

61

So that's inputClosePin.value, 62

62

and once again, converted to a real number. 63

63

And this one, also needs to be equal 64

64

to the currentAccount.Pin. 65

65

And now let's actually do the deletion itself here. 66

66

So as I already said, we are going to use the splice method 67

67

to delete the current account. 68

68

So let me actually start by writing that part. 69

69

So, we will take our accounts array 70

70

and splice it at a certain index, 71

71

which is the index that we're gonna calculate in a second, 72

72

and we will remove exactly one element, all right? 73

73

And then the splice method actually mutates 74

74

the underlying array itself, 75

75

and so there is no need to save 76

76

the result of this anywhere, all right? 77

77

And so now let's actually calculate that index 78

78

at which we want to delete. 79

79

So we take the accounts, and now instead of find, 80

80

we use findIndex, 81

81

and once again, this one takes a callback function, 82

82

which is very similar to all the other callback functions, 83

83

we have been using. 84

84

So it's gonna loop over the array essentially, 85

85

and in each iteration, we get access to the current account. 86

86

And then we want to find the one 87

87

where the account has the username, 88

88

equal to the currentAccount.username, all right? 89

89

And so let's then take a look at that index. 90

90

And for now, let's actually take out this part. 91

91

Okay, and we will then come back 92

92

and maybe explain this a little bit better. 93

93

So as I click this here without anything, nothing happens. 94

94

So just as we intended, 95

95

then with the correct user, and with a wrong pin, 96

96

also nothing happens. 97

97

And notice that here, 98

98

you cannot see the numbers I'm typing now, 99

99

because this is a different format in HTML. 100

100

But I'm still using the four ones, the 1111. 101

101

And now something should happen. 102

102

And indeed, we get to the index number of the JS account, 103

103

in the accounts array. 104

104

So let's take a look at that array here. 105

105

And indeed, the Jonas one is number zero, right? 106

106

Now, if we logged in here as Steven, STW, with 3333. 107

107

And now we need to confirm that here. 108

108

So STW again and 3333. 109

109

Hit enter and then the result should be down here, 110

110

and indeed, it is. 111

111

So that's element number two. 112

112

So zero, one and two, 113

113

so that is correct, and so or splice here 114

114

would now indeed delete the user. 115

115

Okay, so let's see here what we did in the findIndex. 116

116

So just like before, in find, we passed in a condition, 117

117

so something that will return either true or false. 118

118

And the findIndex method will then return the index 119

119

of the first element in the array 120

120

that matches this condition. 121

121

So for which this condition here returns true. 122

122

So again, similar to find, but it returns the index, 123

123

and not the element itself. 124

124

Now, you might notice that this is actually similar 125

125

to the indexOf method that we studied before. 126

126

So, indexOf, 127

127

and then here we can pass in some value, all right? 128

128

Now, the big difference here is that with indexOf, 129

129

we can only search for a value that is in the array. 130

130

So, if the array contains the 23, then it's true, 131

131

and if not, then it's false. 132

132

But on the other hand, with findIndex, 133

133

we can create a complex condition like this one, 134

134

and of course, it doesn't have to be 135

135

the equality operator here. 136

136

It can be anything that returns true or false, okay? 137

137

And here we can simply check 138

138

if the array contains this value or not, 139

139

and if so, return the indexOf it. 140

140

So both return an index number, 141

141

but this one here is a lot simpler. 142

142

And so now let's actually delete this element here. 143

143

So this current user, on the current account. 144

144

And now let's get back here to our flowchart, 145

145

which I closed for some reason. 146

146

And so, we just did this part. 147

147

Now, we also need to log out the user. 148

148

So that just means to hide the UI. 149

149

And so that's similar to what we did here, 150

150

where we showed the UI. 151

151

Now we want to set it back to zero. 152

152

So, down here. 153

153

So hide UI, 154

154

and here delete account, 155

155

Okay, and then, of course, as we reload the page, 156

156

as I said before, the user will then be back of course, 157

157

because we do not persist this data anywhere, all right? 158

158

Well, the UI is still there. 159

159

Oh, that's because we didn't change this here to zero. 160

160

But anyway, let's still take a look at the accounts object 161

161

in this moment. 162

162

And we see that we now only have three accounts left, 163

163

and one of Jonas is nowhere to be found. 164

164

So this means that it actually worked, 165

165

now we just need to fix this here and set it to zero. 166

166

And we also just like before, 167

167

I want to clear these fields here. 168

168

So that's the same as we did before. 169

169

So, similar to this one, 170

170

let me just copy it here. 171

171

And this one we can paste right here outside 172

172

of the IF statement, 173

173

and then just copy these two inputs here. 174

174

So close username and close pin. 175

175

This is set to zero. 176

176

And now, this should actually be complete. 177

177

So let's see. 178

178

Well, nothing happened. 179

179

So let's see here. 180

180

Oh, okay, this is a bug that I just introduced here. 181

181

So basically, before even reading the data from this field, 182

182

I'm already setting it back to empty here, 183

183

Okay, and so therefore of course, nothing can work. 184

184

So this needs to be after the IF-Else statement, all right? 185

185

But it's still a good thing 186

186

that these small bugs keep happening here. 187

187

So that I can fix them, 188

188

and show to you that everyone makes this kind of mistakes. 189

189

So let's try it again 1111. 190

190

And now it's gone. 191

191

And as I try to log in now as this user, 192

192

you see that nothing happens, 193

193

and we get undefined down here, 194

194

and that's because this user no longer exists now 195

195

in our accounts array. 196

196

Great, so one more feature implemented successfully. 197

197

Now, there's just a couple of things 198

198

I want you to note here, 199

199

both the find and findIndex methods 200

200

get access to also the current index, 201

201

and the current entire array. 202

202

So as always, besides the current element, 203

203

these other two values are also available. 204

204

But in practice, I never found these useful. 205

205

And second, the both the find and findIndex methods 206

206

were added to JavaScript in ESX. 207

207

And so they will not work in like super old browsers. 208

208

But don't worry, there is going to be a lecture 209

209

a little bit later on how to support 210

210

all of these old browsers.