Original subtitles

1 1

In this lecture we will loop over an array 2

2

using the forEach method. 3

3

Now we had already learned 4

4

how to loop over an array using the for of loop, 5

5

but the forEach method is really fundamentally different. 6

6

And from now on we will start working 7

7

with our bank account data, 8

8

but still in a very simplified way. 9

9

So let me get this data here into the present lecture 10

10

so that we can see what we're actually working with. 11

11

So let me comment it out from here 12

12

and just move it here. 13

13

So let's say that we wanted to loop 14

14

over this movement's array, 15

15

in order to print a message 16

16

for each movement in this bank account. 17

17

So these positive values here are basically deposits 18

18

and the negative values are withdrawals. 19

19

And so we can print something to the console 20

20

saying whether the user deposited or withdrew some money, 21

21

and let's actually start by doing this using a for of loop, 22

22

just so that we can then compare 23

23

the forEach loop to this one. 24

24

So let's create a variable movement of movements 25

25

and then we will log something to the console 26

26

according to the movement value. 27

27

So basically if the current movement is greater than zero 28

28

then log to the console, you deposited, 29

29

and then the movement and else 30

30

you withdrew 31

31

and then the movement again. 32

32

And actually we can use a nice maths function here 33

33

which is to take the absolute value, 34

34

so basically removing the sign. 35

35

So let's see, 36

36

and yeah. 37

37

That looks nice. 38

38

So of course this solution here works perfect, 39

39

but now let's finally learn how to use the forEach method 40

40

to achieve the exact same thing 41

41

but in my opinion in an easier way. 42

42

So to loop over the movements array 43

43

we use forEach, 44

44

and that's with a capital E, don't forget that. 45

45

And then the forEach method 46

46

actually requires a callback function here. 47

47

So forEach is technically a higher order function 48

48

as we learned in the last section, 49

49

which requires a callback function 50

50

in order to tell it what to do. 51

51

So it's the forEach method here 52

52

that will call this callback function. 53

53

We are not calling it ourselves as always. 54

54

And that's of course important to keep in mind once again, 55

55

But when exactly will forEach actually 56

56

call this callback function. 57

57

Well what the forEach method does is to loop over the array, 58

58

and in each iteration it will execute 59

59

this callback function here. 60

60

Also as the forEach method calls this callback function 61

61

in each iteration it will pass in the current element 62

62

of the array as an argument, 63

63

and we can specify that here 64

64

and let's call that again movement. 65

65

So again, each time this callback here is called, 66

66

so in each iteration, 67

67

it will receive the current element of the array 68

68

as an argument. 69

69

And here we can of course give this any name that we want, 70

70

but I'm just calling it movement 71

71

because that's what we did up here. 72

72

And so now we can do exactly the same thing 73

73

here in this callback function. 74

74

Give it a save, 75

75

and indeed we now get the same result twice, 76

76

so, 77

77

let me just 78

78

add like a separator here. 79

79

ForEach. 80

80

And so, yeah. 81

81

Indeed we get the same result 82

82

and also get ourselves more space 83

83

and yeah 84

84

so that's essentially how the forEach method works. 85

85

So basically behind the scenes, in iteration zero, 86

86

it will call this function here 87

87

so an anonymous function in this case without a name, 88

88

let's just call it function, 89

89

and it's gonna call it with the value of 200 90

90

then in the next iteration it will call it 91

91

with the value of 450 92

92

then with the value of 400, right. 93

93

And so on and so forth. 94

94

Until it reaches the end of the array. 95

95

And this part of the forEach function 96

96

passing in the current element of the array, 97

97

here like this, this and this 98

98

is especially important to understand. 99

99

So basically this is exactly the concept that I explained 100

100

In the last section 101

101

when I said that we use a callback function 102

102

to tell another higher order function 103

103

exactly what it should do, 104

104

and so in this case we tell forEach 105

105

that in each iteration 106

106

it should log one of these two strings here to the console 107

107

So we give the forEach method instructions 108

108

by giving it a callback function 109

109

which contains these instructions, alright. 110

110

And I really know and understand 111

111

that this is quite a hard concept to wrap your head around. 112

112

But if you just continue using this from now on 113

113

then eventually it will start to make sense, believe me. 114

114

Now anyway, which of the two version 115

115

do you think is cleaner 116

116

and easier to write and easier to read. 117

117

Well I think that we can both agree 118

118

that it is the forEach method, right. 119

119

And maybe you don't agree with that 120

120

and of course that's okay, 121

121

as I keep mentioning 122

122

it's always good to develop your own style of programming. 123

123

But using the forEach method here 124

124

and especially understanding the logic behind it here 125

125

with the callback function, 126

126

is still really important for all the other methods 127

127

that we're gonna learn later. 128

128

Anyways let's now learn some more stuff 129

129

about the forEach method, 130

130

because we are not done yet. 131

131

So what if we actually needed access 132

132

to a counter variable here. 133

133

So just like we can access the current index 134

134

off the array here in the for of loop. 135

135

So remember how we did that with for of, 136

136

let's just rewrite this part. 137

137

So in this case we loop over 138

138

movements dot entries, 139

139

remember? 140

140

So entries is in fact just another array method 141

141

and it returns an array of arrays, 142

142

remember, which in the first position 143

143

contains the current index 144

144

and then the value itself. 145

145

And so this is how we access 146

146

the counter variable in the for of loop. 147

147

And then here in our string we could use that to say 148

148

for example, 149

149

movement and then the number of the movement. 150

150

So that's the counter 151

151

which starts at zero, and so we just add one to that 152

152

and so 153

153

well something went wrong 154

154

so that's in line 121, 155

155

so unexpected token. 156

156

That's because we didn't open it here again, 157

157

so we were missing this part here. 158

158

And now this looks a lot nicer, 159

159

with the number of the movements here. 160

160

And so let's now do the same in the forEach method here. 161

161

And here, fortunately, it's a lot easier 162

162

to get access to the current index. 163

163

So to understand how it works we need to remember once more 164

164

that it is the forEach method 165

165

who calls this callback function in each iteration. 166

166

And as it calls this function 167

167

it also passes in the current element of the array, 168

168

but actually that's not all it passes in 169

169

in fact forEach passes in the current element, 170

170

the index and the entire array that we are looping. 171

171

And so therefore we can specify them here 172

172

in our parameter list. 173

173

So let's say index and array, 174

174

now of course we can just use one, like we have been doing, 175

175

or we can just use two, 176

176

or we can use all three together. 177

177

And as always the names here do not matter at all, 178

178

but what does matter is the order. 179

179

So the first parameter always needs to be 180

180

the current element, 181

181

the second parameter always the current index 182

182

and the third one always the entire array 183

183

that we are looping over. 184

184

Because that's the order in which the arguments, 185

185

so the actual values, are passed into our callback function. 186

186

Okay. 187

187

So now let's just copy this here, 188

188

so we can do the same here. 189

189

Give it a save, and oh. 190

190

Here we called it index and not I. 191

191

And in fact in the real world we actually use 192

192

shorter names. 193

193

So let's just call this one I, 194

194

this one R, 195

195

and this one here mov. 196

196

Which is just a shorter abbreviation of movement. 197

197

And so this is quite a common pattern 198

198

to just abbreviate a little bit. 199

199

So let's replace these three here with mov, 200

200

give it a save. 201

201

And now it does look the same 202

202

as with the for of method. 203

203

But I hope you can see 204

204

that it's a lot easier to get the current index 205

205

here in forEach. 206

206

Just notice that the order of the parameters is different 207

207

in both these scenarios. 208

208

So in forEach the first value here is the current element 209

209

and the second one is the index. 210

210

While when we use here the entries in the for off loop 211

211

then the first element is the index 212

212

and the second value is the current array element. 213

213

So just don't forget that here in this case. 214

214

So always first the current element and then the index. 215

215

Okay. 216

216

And this is how we loop over arrays 217

217

with the forEach method. 218

218

Now when should you use forEach 219

219

and when should you use the for of loop. 220

220

Well one fundamental difference 221

221

between the two of them is that you cannot break out 222

222

of a forEach loop. 223

223

So the continue and break statements 224

224

do not work in a forEach loop at all. 225

225

So instead, forEach will always loop over the entire array 226

226

and there is nothing that you can do about it. 227

227

So if you really need to break out of a loop 228

228

then you have to keep using the for of loop, 229

229

but other than that 230

230

it really comes down to your personal preference. 231

231

Just like so many other things in JavaScript. 232

232

So every programming language always has 233

233

many different ways or different tools 234

234

to achieve the same thing. 235

235

And specially as more things 236

236

keep getting added to the language 237

237

there will always be more options to achieve the same result 238

238

All right, and with this we wrap up this lecture. 239

239

SO in my opinion this is a really brilliant 240

240

and powerful mechanism, 241

241

but I know that it's also rather complex 242

242

to wrap your head around this, isn't it? 243

243

And it actually took quite some time for me 244

244

to fully understand this myself, back in the day. 245

245

So please don't become frustrated with this, 246

246

it will all become obvious with the practice. 247

247

So just keep using this and then you will be fine. 248

248

Once you do understand exactly how this works 249

249

so specially this mechanism of the callback 250

250

and of the passing arguments into this callback here 251

251

so once you understand this fundamental mechanism 252

252

then working with all other array methods 253

253

in this section will become really easy. 254

254

Because most of them follow the exact same principle 255

255

of the callback function that we just explored here. 256

256

So please review this lecture carefully, and yeah. 257

257

If you really understand 258

258

the role of the callback function here 259

259

then just move on to the next video. 260

260

See you there.