Original subtitles

1 1

So we're getting closer 2

2

to the end of this section 3

3

but there are still a couple of array methods left to learn. 4

4

And so in this lecture, 5

5

we're gonna look at the some and the every methods. 6

6

And to start learning about the some method, 7

7

let's look back at the includes method 8

8

that we studied earlier. 9

9

So let's log to the console here movements.includes -130. 10

10

And let's also log our movements array so we can see it 11

11

and so indeed, the value of -140 that we're testing here 12

12

is in the array 13

13

and that's why we get true here. 14

14

And so we can use the includes method 15

15

to test if an array includes a certain value. 16

16

Now, however, we can only really test for equality, right? 17

17

So basically includes here returns true 18

18

if any value in the array is exactly equal to -130, right? 19

19

And so again, this is essentially testing for equality 20

20

but what if we wanted to test for a condition instead? 21

21

And so that's where this some method comes into play. 22

22

So let's say that we would like to know 23

23

if there has been any deposits on this account. 24

24

So in other words, we want to know 25

25

if there is any positive movement in this array. 26

26

So any number above zero. 27

27

So how would we do that? 28

28

Well, we can say movements.some 29

29

and now we can specify our condition here as always. 30

30

So the same callback function, 31

31

which has to return either true or false. 32

32

And so a deposit is a movement greater than zero. 33

33

So let's call this here anyDeposits 34

34

and log it to a console. 35

35

And so indeed here we get true. 36

36

So we have, of course, more than one deposits here. 37

37

But let's say we wanted to test 38

38

if there is any deposit above 5,000. 39

39

So easy enough, we can check if there is something 40

40

above this value and then it is false. 41

41

Or we can check if these is something above 1,500. 42

42

And so now it's true because there is one movement here 43

43

in that condition. 44

44

And so you can see that these two methods here 45

45

are kind of similar. 46

46

The difference is that here it checks only for equality. 47

47

So equality but here, we can specify a condition now, right? 48

48

So basically, this one here, 49

49

we could rewrite it like this. 50

50

So let's log it to the console here. 51

51

So movements.some, 52

52

minus 130. 53

53

So this would be exactly the same. 54

54

And so that's why we also get true in this one. 55

55

Now, for equality, this doesn't make much sense. 56

56

We could then simply use the includes method 57

57

but for the case we need a condition like this one here, 58

58

or really this one, 59

59

then the some method is perfect for that, okay? 60

60

And probably if I would have named this method, 61

61

I would have called it like any. 62

62

But of course, that's not the real name 63

63

but that's really what it does. 64

64

And so if there is any value 65

65

for which this condition is true, 66

66

then the some method will return true. 67

67

Now, right and now let's actually use this some method 68

68

to implement our missing functionality, 69

69

which is to request a loan to the bank. 70

70

So we will do that right here 71

71

between the transfer button and the close button. 72

72

And the some method will become helpful 73

73

for this loan feature 74

74

because our bank has a rule, 75

75

which says that it only grants a loan 76

76

if there at least one deposit 77

77

with at least 10% of the requested loan amount. 78

78

So that sounds complicated 79

79

but we will implement this here in a second. 80

80

So btnLoan.addEventListener click 81

81

and this is now always the same as you can see. 82

82

So starting by preventing the default action, 83

83

so that's always gonna be the first thing 84

84

and then let's have a look here at the user interface 85

85

because right now it is hidden. 86

86

So you see that here we only have this one field. 87

87

And this field is called the inputLoanAmount, okay? 88

88

So inputLoanAmount, so that's the element 89

89

with this long class name. 90

90

So let's copy that actually. 91

91

And so let's start by actually getting that amount here. 92

92

So we already know we will have 93

93

to convert this input .value, okay? 94

94

And now we need to create our condition here. 95

95

So first of all, 96

96

that amount should be greater than zero, okay? 97

97

And now let's take a look here at our flow chart again. 98

98

So this is what I was saying earlier. 99

99

The loan is only granted if there is any deposit 100

100

that's greater or equal 10% of the requested amount of loan. 101

101

Now, right? 102

102

So here we need now our second condition, 103

103

which translates that. 104

104

And so whenever we see or hear the word any, 105

105

we can already know that it's probably a good use case 106

106

for the some method. 107

107

So let me show it to you. 108

108

So as always, we get the movements 109

109

from the currentAccount object .movements 110

110

and now on there, we call the some method. 111

111

So we already know by now 112

112

how this callback function feature here works. 113

113

So we get the current movement 114

114

in the current iteration 115

115

and now here the condition is that movement needs 116

116

to be greater or equal than 10% of the amount. 117

117

So that's the amount divided by 10. 118

118

Okay? 119

119

Or we could also do times 0.1 120

120

and so that's exactly the same thing. 121

121

So 0.1 here stands for 10% 122

122

and so let's keep it like this. 123

123

Give it a save so that it looks nicer 124

124

and so yeah, if at least one of the elements 125

125

in the movements array has this condition, 126

126

so it's true, so basically it's greater than 10% 127

127

of the requested amount, 128

128

then all of this here will become true. 129

129

And so the some method is perfect 130

130

to be used in a condition like this. 131

131

So when we need to test for something, okay? 132

132

So in case this is true. 133

133

Oh and I closed our flow chart again. 134

134

So in case this is true, 135

135

then add a positive movement to the current data 136

136

and update the UI. 137

137

So that's easy enough. 138

138

So add the movement here. 139

139

So currentAccount.movements.push 140

140

and then of course, the amount that was requested. 141

141

And then update the UI 142

142

and for that, we already created our nice function, 143

143

which does all of the functionalities in one go. 144

144

And so that's updateUI 145

145

and we simply pass the currentAccount into it. 146

146

Okay. 147

147

And that's it. 148

148

Finally, let's also then clear the input field. 149

149

So that value equals empty value. 150

150

So we did that here and here and also up here. 151

151

Okay. 152

152

Let's log in. 153

153

And so you see, my deposits, my largest deposit 154

154

is 3,000 and so the loan that I can request 155

155

can be maximum 30,000, okay? 156

156

Because 3,000 here is 10% of that. 157

157

So let me try something bigger. 158

158

So something really huge. 159

159

And so now nothing happened. 160

160

And again in the real world, 161

161

we would then probably get some error message 162

162

somewhere here at the top or so 163

163

but in this case, we're not gonna do that. 164

164

Let's just try 5,000 now. 165

165

And so now indeed it appeared here in our movements 166

166

and also as you see, our balance was updated 167

167

and also here our total income. 168

168

Okay? 169

169

Now let's request 50,000 170

170

and so with this, you can now actually cheat. 171

171

You can always create a little bit of a larger number. 172

172

So now I can even request half a million 173

173

and so that's cheating our algorithm, 174

174

which is way too simple. 175

175

But of course, this is just for testing purposes. 176

176

All right. 177

177

So that's how the some method works. 178

178

I hope that makes sense. 179

179

And so let's now actually go back here 180

180

and talk about the close cousin of the some method, 181

181

which is the every method. 182

182

So let's write here some 183

183

and every. 184

184

So again, the every method is pretty similar 185

185

to the some method 186

186

but as you might guess, the difference between them 187

187

is that every only returns true 188

188

if all of the elements in the array satisfy the condition 189

189

that we pass in. 190

190

So in other words, if every element passes the test 191

191

in our callback function, 192

192

only then the every method returns true 193

193

and that's why the method is called every 194

194

in the first place. 195

195

So let's test it out here now. 196

196

So let's log to the console movements.every 197

197

and then with the same condition. 198

198

So let's essentially check 199

199

if all of our movements here are deposits 200

200

and well, indeed, they are not 201

201

and that's why we get false. 202

202

However, we do have one account, 203

203

which only has positive moments. 204

204

So let me show that to you. 205

205

That's account4. 206

206

So account4, all the movements are positive. 207

207

So let's check it out now. 208

208

So account4 and then the same condition 209

209

and every is not a function 210

210

and that's, of course, 211

211

because we are still missing the movements array. 212

212

And now it is true, all right? 213

213

And so that indeed proves that the every returns true 214

214

if all the elements in the array satisfy this condition 215

215

because in this movements array, 216

216

all of the values are in fact above zero, okay? 217

217

So that's how the every method works 218

218

and I think it's quite straightforward, isn't it? 219

219

And now to finish, there is now more cool thing 220

220

that I want to show you. 221

221

So up until this point, 222

222

we have always written the callback function directly 223

223

as an argument into our array methods, right? 224

224

However, we could also write this function separately 225

225

and then pass the function as a callback. 226

226

So let's say 227

227

separate callback 228

228

and so we could do this. 229

229

So let's call deposit to this function. 230

230

All right? 231

231

And so this function here is exactly the same as these ones 232

232

but as I just said, 233

233

there is no reason for them to being directly written here 234

234

in all of these array methods. 235

235

We could simply write them like this 236

236

and then all we would have to do 237

237

is to call movements.some, for example, 238

238

and then deposits or deposit. 239

239

And now we could reuse the same function 240

240

for all kinds of different methods 241

241

that require callbacks with a true/false condition. 242

242

So that could be every or filter as well. 243

243

Okay? 244

244

And so here is the result of these three operations 245

245

and so here we get the expected results. 246

246

And all by reusing the same function. 247

247

Then if we wanted to change the function, 248

248

all we would have to do is to change it here in one place 249

249

and then all the results 250

250

would become different according to that. 251

251

So in practice, that's something that we do sometimes 252

252

because this is, of course, better for the DRY principle. 253

253

So don't repeat yourself. 254

254

That's always important and it is important here as well. 255

255

But anyway, with this small detour that we did here, 256

256

let's now move on to learning about two more array methods.