Original subtitles

1 1

Now that we know what higher order functions are, 2

2

let's actually create our own, 3

3

just to demonstrate how they work. 4

4

So in this lecture, we're going to create 5

5

a function that accepts other functions as an input. 6

6

But to start, let's write two very generic 7

7

functions that do simple string transformations. 8

8

So one I'm going to call one word 9

9

and this will simply replace all the spaces in a word. 10

10

So string 11

11

dot replace 12

12

and then we're going to select all these spaces. 13

13

And remember for that, 14

14

we need to use this regular expression 15

15

with the G flag and then replace them 16

16

with simply an empty string. 17

17

And then we also convert that to lowercase. 18

18

Okay, 19

19

so this function here, 20

20

what simply work anywhere in our code with any string 21

21

and it takes in one string and returns 22

22

a new one without any spaces in it. 23

23

Okay, let's create another one upper first words, 24

24

which also takes in a string. 25

25

And so these two functions, 26

26

they will later be the functions that we pass 27

27

in into another function. 28

28

Okay, so we first need these. 29

29

So as the name says, this function 30

30

here will simply transform the first word 31

31

of the input string to uppercase. 32

32

So let's just first split the string. 33

33

So by the empty string, 34

34

and then we will take the results 35

35

and restructure it into the first word. 36

36

And then all the other words, 37

37

And then return a new array that we will join. 38

38

So that's first to uppercase 39

39

and here I'm not explaining exactly how this all works, 40

40

because we already talked about this stuff, 41

41

in the last video. 42

42

So we spread the others and also in the array 43

43

and then we join. 44

44

And so you see that everything that we learned before 45

45

is actually pretty helpful, 46

46

again as always, especially helpful, 47

47

is to spread operator and destructive assignment. 48

48

Like we use it here. 49

49

Right, and here it's actually the rest pattern. 50

50

All right, So we have these two generic functions 51

51

and now we can create or higher order function. 52

52

And that function will be called a transformer. 53

53

and these function we'll take in also a string, 54

54

but as a second argument, 55

55

it will take in a function. 56

56

Okay, and therefore this is a higher order function. 57

57

So that's the definition that we 58

58

learned about in the last video. 59

59

So it takes in a function 60

60

and air for it is a higher order function. 61

61

And so now let's see how 62

62

we would actually call this function. 63

63

So that's how I like to do it many times. 64

64

So let's say JavaScript is the best. 65

65

And as a second argument, 66

66

I will now pass in the upper first word function. 67

67

And so basically what I want the transformer function 68

68

now to do with this string, 69

69

is to transform the string using these function here. 70

70

So this function that we created here in the beginning. 71

71

All right, 72

72

and once again notice 73

73

how we are only passing in the function value itself. 74

74

So really just the value, 75

75

we are not calling this function here. 76

76

Okay, We are only passing it in and it will be to 77

77

transformer function calling this function. 78

78

So let's actually do that. 79

79

So we will simply look to the console transformed 80

80

string meant and here goes our expression. 81

81

And so this is where we will now call the function. 82

82

Now, inside of the transformer function, 83

83

this upper ward is now called F N right? 84

84

So that's the second parameter here. 85

85

And so F N and then with the past in string. 86

86

Okay, 87

87

and when we see the result, 88

88

this will make even more sense. 89

89

Okay, that's also a lock to the console, 90

90

the original string. 91

91

And so that's just STR okay. 92

92

And they also want to show you something else. 93

93

So let's look transformed by, 94

94

and in the last video I told you 95

95

that functions even have methods remember, 96

96

and besides methods, 97

97

functions can even have properties. 98

98

And one of them is the name property. 99

99

So again we take F N, 100

100

which is the function that 101

101

this higher order transformer gets as an input. 102

102

And then on that we can read the name property. 103

103

And so now let's see the result of this operation. 104

104

And so let's take a look at our interesting output. 105

105

So of course the original string looks familiar, 106

106

but then the transformed string indeed, 107

107

was transformed just as we hoped it would. 108

108

So the first word is the uppercase. 109

109

And so that is of course the work of this function here. 110

110

Finally, we can also see that 111

111

it was transformed by upper first word. 112

112

And so that's FN.Name. 113

113

So as the property says, 114

114

it is really just the name of the function. 115

115

And so this one here we can actually 116

116

use on any functioning that we have in JavaScript. 117

117

And now let's try the same, 118

118

here with our other function. 119

119

So one word, and let's see the result. 120

120

Let's give it some more space here. 121

121

And so here is the second output. 122

122

So to transform string is now this one here, 123

123

all in one word and indeed it was 124

124

transformed by the one word function. 125

125

So this one here, 126

126

alright? 127

127

So let's recap, we're calling the transformer function here 128

128

and into that function we are passing the callback function 129

129

and remember that we call these functions that we pass. 130

130

So this one and this one, 131

131

the callback functions. 132

132

And that's because we do not call them ourselves. 133

133

But instead we call JavaScript to basically tell them later. 134

134

And in this case, 135

135

calling them later happens right here. 136

136

So it's the transform of function 137

137

that will call these callback functions. 138

138

And the callback functions, 139

139

in here are of course called F N. 140

140

And so, that's the name of the function in here 141

141

that we then have to call. 142

142

All right, 143

143

and in fact this is exactly the same idea 144

144

that we already talked about, 145

145

using the add vent listener function. 146

146

Right? 147

147

So, let's say we had this 148

148

very simple function high five, 149

149

which doesn't really do much except off 150

150

logging something to the console. 151

151

Let's just put an emoji here, 152

152

this waving one and so now let's say, 153

153

document.Buddy.End event listener click 154

154

and then this function. 155

155

So nevermind about this part here. 156

156

We're gonna to learn later what this means, 157

157

but what matters is the add event listener? 158

158

And so just like, 159

159

or a transformer function we pass in a callback function. 160

160

Okay, and does callback function in this, 161

161

is also called the event handler or event listener, 162

162

but that doesn't really matter. 163

163

What matters is that conceptually, 164

164

this year is the callback function, 165

165

and this is the higher order function. 166

166

So this one is just like our transformer function. 167

167

And this one is just like the one word or upper first word. 168

168

Okay. 169

169

So it's just a callback that JavaScript, 170

170

will call as soon as we click on the body. 171

171

So you'll see down there now they appear. 172

172

And so only then they call back is really called. 173

173

And there are many other examples 174

174

in the JavaScript language. 175

175

And this concept of callback functions is used 176

176

all the time in built in JavaScript functions. 177

177

So there are many more examples, 178

178

for example the for each 179

179

function and that we call on a race. 180

180

So let's create an array here. 181

181

Jonas, Martha and Adam. 182

182

And on that array, we can call 183

183

something called D for each method. 184

184

And we will learn about this 185

185

one in the next section actually. 186

186

And then again, 187

187

we pass in a callback function into for each. 188

188

So let's again use high five. 189

189

And so as I reload this now, 190

190

then we get here these three wave okay. 191

191

And that's because we have three elements in this array. 192

192

And so as the name of the method says, 193

193

for each of them this callback will be called. 194

194

And therefore we have three waving sphere, 195

195

but we will learn all about the 196

196

for each method in the next section. 197

197

What matters here is that once again, 198

198

we use the concept of the callback function here. 199

199

And so this is something really common in JavaScript. 200

200

Let me just write that here, 201

201

callbacks all the time. 202

202

And so let's now actually take a minute or two 203

203

to understand why that is. 204

204

Why our callback functions so much used in JavaScript 205

205

and why are they so helpful? 206

206

Well, the first big advantage of this 207

207

is that it makes it easy to split up or code 208

208

into more reusable and interconnected parts. 209

209

So that's exactly what we have here, right. 210

210

We have all of this functionality here, 211

211

nicely split up into their own functions, 212

212

and that itself is really helpful. 213

213

But there is a second and way more important advantage, 214

214

which is the fact that callback functions 215

215

allow us to create abstraction. 216

216

So let me explain what that means. 217

217

So what we did here in our code example was to create a 218

218

level of abstraction and abstraction 219

219

is something really important in programming. 220

220

So basically what abstract and means, 221

221

is that we hide the detail of some code 222

222

implementation because we don't really care 223

223

about all that detail. 224

224

And this allows us to think 225

225

about problems at a higher more abstract level. 226

226

And so that's why it's called an obstruction. 227

227

So coming back to our example here, 228

228

this transform a function does not care at all, 229

229

how the string is transformed. 230

230

It doesn't care about this level of detail. 231

231

Okay, all that wants to do is to transform a string, 232

232

but it doesn't care how it should do it. 233

233

So what I mean is that we could have taken, 234

234

this coat here and written it directly into transformer, 235

235

or even this coat here, 236

236

right. 237

237

That would have worked just the same, 238

238

but instead we abstracted this 239

239

coat away into other functions. 240

240

So again, we created a new level of obstruction 241

241

and by doing this or main transformer function, 242

242

here is really only concerned 243

243

with transforming the input string itself. 244

244

But no matter how that transforming itself actually works. 245

245

So it's basically delegating the string transformation 246

246

to the other lower level of functions, 247

247

which are these two. 248

248

Okay, and I hope this makes sense for you, 249

249

but we will also come back to this idea of abstraction 250

250

later when we talk about object oriented programming. 251

251

But it's good for you to think 252

252

and to talk about this stuff as soon as possible, 253

253

so that you can start to get an idea for this really, 254

254

important concept of abstraction. 255

255

And now with this idea of obstruction 256

256

and higher levels and lower levels of obstruction, 257

257

here is called a higher order function. 258

258

Right, and again that's basically because this function 259

259

here operates at a higher level of obstruction, 260

260

leaving the low level details to this low level functions. 261

261

Okay. 262

262

Now they are not really called 263

263

hello order or low level functions, 264

264

but that's just how I like to call 265

265

them in this circumstance. 266

266

All right, 267

267

so understanding this 268

268

is absolutely crucial for your process. 269

269

And I actually consider this one of the most 270

270

important lectures here of the course 271

271

because callback functions are really, 272

272

a vital part of the JavaScript language. 273

273

And that's one of the main takeaways from this video. 274

274

They allow us to create this kind of logic here. 275

275

And so, I think it's probably a good idea, 276

276

that who really reviewed us really well 277

277

and maybe even write your own example, 278

278

of something that you see in the real world 279

279

using the same concept, 280

280

okay. 281

281

I think that's a really good idea that you should try out. 282

282

Then here in the built in functions like 283

283

add event listener and for each, 284

284

these callback functions are so important 285

285

and so useful because we use them, 286

286

to tell these functions what exactly they should do. 287

287

For example, the add event listener function 288

288

on its own would have no idea 289

289

of what to do whenever the click event happens here. 290

290

Right? 291

291

And so that's why we pass in the callback function here, 292

292

to tell the add event listener function exactly what to do. 293

293

And as you already know, 294

294

this is the higher order function here 295

295

with the high level of obstruction. 296

296

And this here is the function with, 297

297

the more lower level of obstruction. 298

298

All right. 299

299

But enough talk, 300

300

please take a minute to really review this lecture 301

301

and build an example of your own maybe. 302

302

And then I see you in the next video, 303

303

where we will basically do the opposite of this one. 304

304

So having functions return other functions.