Original subtitles

1 1

The fundamental building block 2

2

of real world JavaScript applications are functions. 3

3

They are one of the most essential concepts in the language 4

4

and so let's study functions over the next couple of videos. 5

5

So what actually are functions? 6

6

Well in the most simple form a function 7

7

is simply a piece of code that we can reuse 8

8

over and over again in our code. 9

9

So it's a little bit like a variable 10

10

but for whole chunks of code. 11

11

So remember a variable holds value 12

12

but a function can hold one or more complete lines of code. 13

13

So let's not declare our very first function 14

14

so we start with the function keyword 15

15

and then we define a function name 16

16

and let's now just create a simple logger 17

17

which is a function that will simply log 18

18

something to the console. 19

19

So I will call this one logger and then we need parenthesis 20

20

and we will see why in a next example 21

21

and then we use the curly braces 22

22

to create the so-called function buddy. 23

23

So all the code that is within this code block here 24

24

so within this block of curly braces 25

25

is called the function buddy 26

26

and it's this code that will 27

27

be executed when we run this function. 28

28

So let's say we needed to execute a log many times 29

29

somewhere in our program. 30

30

So let's simply console dot log my name is Jonas 31

31

and so somewhere in our program 32

32

we needed to reuse this line of code here multiple times 33

33

and so that's why we put it in a function, okay? 34

34

So we created the function and now we can use it 35

35

and we can use it as many times as we want. 36

36

So to use the function, we simply write the function name 37

37

followed by a parenthesis and that's actually it 38

38

and this process here of basically using the function 39

39

is called invoking the function, running the function 40

40

or calling the function. 41

41

So let me actually write these terms here 42

42

so calling running or invoking the function 43

43

and you will see me use these three terms here 44

44

interchangeably, okay? 45

45

So they basically mean the same thing you can think of them 46

46

as like executing or using the function 47

47

that we defined previously, okay? 48

48

And as I said, we can now use or call 49

49

or run this function as many times as we want 50

50

and each time that we call the function like this 51

51

then the code that is in the function 52

52

will get executed, all right? 53

53

So in this case, what should we expect here? 54

54

Let's see and indeed we get this 55

55

my name is Jonas log three times 56

56

because we call the function three times 57

57

and so this line of code here was executed three times. 58

58

Great, so we just wrote our very first function 59

59

and it's already working just fine 60

60

and I hope that this logic 61

61

of reusing code makes sense to you 62

62

but let's now take it to the next level 63

63

and really use some more functionalities of functions 64

64

because they can do a lot more 65

65

than simply reusing a line of code like we did here. 66

66

So usually when we write functions 67

67

we also pass data into a function 68

68

and additionally, a function can also return data as well 69

69

which means to give us data back 70

70

that we can then use for something else in the program. 71

71

So a function cannot only reuse a piece of code 72

72

like we did here 73

73

but it can also receive data and return data back 74

74

and so I like to think of functions as machines. 75

75

So I think that's a great analogy 76

76

so for example, let's imagine a food processor, 77

77

so we put foot into the processor 78

78

then the processor does something to our food 79

79

which is the function body basically 80

80

and then in the end 81

81

the food processor returns to processed food 82

82

for example, a juice 83

83

and so that's exactly what we can do with functions as well 84

84

and actually let's implement exactly this example. 85

85

So, again, we need to use the function keyword 86

86

and then we choose a function name 87

87

and just like with variable names 88

88

we should choose descriptive function names 89

89

so that we know exactly what they do. 90

90

So let's call this one a fruit processor 91

91

but in this function 92

92

we also specify something called parameters 93

93

and parameters are like variables 94

94

that are specific only to this function 95

95

and they will get defined once we call the function. 96

96

So let's give this fruit processor function 97

97

two parameters, apples 98

98

and then a second one separated by a comma called oranges 99

99

and again these two will get defined 100

100

once the function is called 101

101

and they represent the input data of this function, okay? 102

102

And this will make even more sense 103

103

when we then actually call his function 104

104

and let's start by logging these to the console. 105

105

So apples and also oranges 106

106

and so what I'm doing here 107

107

is to basically use these parameters here. 108

108

So apples and oranges just as if they were normal variables 109

109

here inside this function 110

110

and now let's actually do something more interesting 111

111

with these parameters 112

112

and so we want to kind of simulate that is fruit processor 113

113

produces a juice out of the apples and oranges 114

114

that we give it 115

115

and so let's just create a string, which says that. 116

116

So we wanna create a variable called juice 117

117

and then a template literal 118

118

and I'm gonna say juice with 119

119

and then I'm using actually the apples parameter here. 120

120

So apples and then apples 121

121

because this apples parameter will be a number 122

122

once we call this. 123

123

For example, if we set apples to three 124

124

then the string will be juice with three apples 125

125

and again this will really make sense 126

126

once we call this function 127

127

so oranges and oranges again, okay? 128

128

So here we build a string using the input data 129

129

that we get into the function 130

130

and now comes the really cool part 131

131

because now we can use the return keyword 132

132

and with this, we can return any value from the function 133

133

and so let's actually return the juice that we just produced 134

134

and so this value that we then return 135

135

can be used anywhere later in our code. 136

136

So basically this Jews will become the result 137

137

of executing this function and let's actually do that. 138

138

So let's call or run or invoke this function now 139

139

so fruit processor 140

140

and now we're gonna specify the actual values 141

141

for the parameters, apples and oranges 142

142

and so let's say for example, five apples 143

143

and zero oranges, okay? 144

144

And so these now will be the inputs 145

145

of the fruit processor function. 146

146

So you can think of these parameters here 147

147

like empty spaces that we still need to fill out 148

148

when we are writing the function 149

149

and when we call the function, then later in the code 150

150

here at this point, we then filled these blank spaces 151

151

by passing in the real specific values 152

152

which will then get assigned to the parameters 153

153

and this example, apples will become five 154

154

and oranges, which is the second parameter here, right? 155

155

Will become zero, and these actual values here 156

156

of the parameters are called the arguments. 157

157

Alright, so let's now basically run the script 158

158

and so now we get five and zero. 159

159

so this is coming from line 26, which is this line. 160

160

So it's this logging to the console of the apples 161

161

which is five and oranges which is zero 162

162

and apples are five because that's the value 163

163

that we specified here, okay? 164

164

So we specified apples as five 165

165

and so in this function the apple parameter 166

166

or you can think of this parameter as a variable 167

167

is now five and oranges is of course zero 168

168

but now you might wonder what about the juice 169

169

that just produced here? 170

170

Where is it? 171

171

Well, the juice was returned from this function. 172

172

So basically that means that the result 173

173

of running this function here 174

174

is the juice that we just returned. 175

175

Basically, once this function has been executed 176

176

this code here is then replaced 177

177

by the result of the function 178

178

and in this case that's gonna be the juice string 179

179

that we produced. 180

180

So if we want to use that value that was returned 181

181

we need to store it in a variable 182

182

so let's do that. 183

183

So let's call it apple juice 184

184

and then let's log that to the console, reload it here 185

185

and now we get juice with five apples and zero oranges. 186

186

So let's recap again, what happened here? 187

187

So we called the fruit processor function here 188

188

with two arguments, five and zero 189

189

and these arguments are the specific. 190

190

So the actual values of the functions parameters 191

191

which are apples and oranges 192

192

and so when the function is running now, 193

193

apples in here will be five and oranges will be zero. 194

194

Then we use these values to build this juice string here 195

195

and then we return that value from the function 196

196

and what that means is that basically 197

197

the result of calling this function here 198

198

will be the juice value that was just returned, okay? 199

199

And then we need to save that value somewhere 200

200

we need to capture it 201

201

and we do that by basically saving it 202

202

into this apple juice variable 203

203

and then we can simply lock that value to the console. 204

204

Of course we could have also directly logged it 205

205

to the console. 206

206

So basically without capturing the value anywhere 207

207

and simply log in it. 208

208

So let me just copy this one here 209

209

and so if I run this now. 210

210

we should see the same string twice 211

211

and yes, indeed. 212

212

Now the fruit processor function was executed twice 213

213

once here and once here 214

214

the only difference is that in this case here 215

215

we did not capture the value into any variable. 216

216

We simply log the result of running this function 217

217

to the console directly, okay? 218

218

So just to show you the difference. 219

219

Okay, and now thanks to the power of the function 220

220

we can reuse the function with different input values 221

221

and then get a different output. 222

222

So let's try that and let's create apple and orange juice 223

223

so apple orange juice 224

224

and so this time we can call fruit processor 225

225

let's say with two apples and four oranges. 226

226

So once again, we are defining specific values here 227

227

which are the arguments 228

228

which will get passed into the function 229

229

here as these parameters. 230

230

So essentially what we did here 231

231

was to create a very generic function 232

232

that works for any number of apples and oranges. 233

233

So it's really like we're leaving apples and oranges 234

234

as the blank spaces 235

235

and then when we call the function 236

236

we fill in these blank spaces using our arguments. 237

237

So two and four in this example 238

238

and now we can also then lock the results. 239

239

So apple orange juice 240

240

and actually we can get rid of this console dot log here 241

241

because we don't really need it. 242

242

All we want here is to produce this juice 243

243

and then return the juice from the function, okay? 244

244

And so now we get two juices, one with five apples 245

245

and zero oranges, which is this first one 246

246

and then finally the juice with two apples and four oranges 247

247

and so that's the second one that we just produced 248

248

and of course we could run this function 249

249

as many times as we want it 250

250

but we should call it at least once 251

251

because if we never called a function then the code 252

252

that's in the function will never be executed 253

253

and that makes sense, right? 254

254

So without executing the function it's kind of useless 255

255

because the code will never run 256

256

it will never be processed because that only happens 257

257

once we called a function like this or like this here also. 258

258

So as you see this function here has no parameters 259

259

and so here when we call the function 260

260

we do not specify any arguments, we could do that. 261

261

So let's just pass 23 but since there are no parameters, 262

262

it will not get used 263

263

and so specifying the argument here or not 264

264

will not have any effect. 265

265

You'll see that this function hear 266

266

also doesn't return anything 267

267

and that's not a problem at all, 268

268

not all functions need to return something 269

269

and not all functions need to accept parameters 270

270

like the fruit processor that we have down here. 271

271

So this is a very simple function here 272

272

and this is a more complete example 273

273

showing you everything that we can do with functions 274

274

and this kind of function is actually way more usual 275

275

than this simpler one here. 276

276

So function like this without parameters 277

277

and without a return we really only use 278

278

when there is a block of code 279

279

that we want to reuse over and over again. 280

280

Once more keep in mind 281

281

that this function does not return anything 282

282

all it does is to log something to the console 283

283

but that has nothing to do with returning a value. 284

284

This really only prints a message 285

285

here to the developer console 286

286

but it doesn't return a value. 287

287

So basically this here does not produce a value 288

288

because we don't return anything from the function 289

289

and that's why here we also don't save 290

290

the result of the function to any variable 291

291

because it doesn't produce any result 292

292

while technically it does produce undefined 293

293

but that's not really relevant here 294

294

and so of course we don't capture that undefined value. 295

295

Okay, great and that's basically 296

296

the fundamentals of functions 297

297

and I'm pretty sure that this was confusing for you 298

298

if this was your first contact with functions 299

299

and actually that's probably how it's supposed to be. 300

300

So what I want you to do is to review this lecture 301

301

very thoroughly and really understand 302

302

how all of this works together. 303

303

So how writing this generic function 304

304

with the parameters works together 305

305

with then calling a function with the specific values 306

306

and how the function then returns a value 307

307

and how in the end we then received that value here 308

308

and capture it into this variable. 309

309

So that's what I want you to think about 310

310

and to analyze, all right? 311

311

So as a conclusion to this lecture, we can say 312

312

that functions allow us to write more maintainable code 313

313

because with functions 314

314

we can create reusable chunks of code 315

315

instead of having to manually write 316

316

the same code over and over again. 317

317

So that's the most important thing 318

318

that you need to know about functions 319

319

and when you know that 320

320

you will know when you should actually use functions 321

321

and this is actually a very important principle 322

322

for writing clean code 323

323

that is used in programming all the time 324

324

and this principle is called don't repeat yourself or dry. 325

325

So we say that we should keep our code dry 326

326

which means that we should not repeat ourselves 327

327

and so functions are perfect for implementing dry code 328

328

because they are reusable code blocks 329

329

that together, make up all applications 330

330

and of course we will use functions 331

331

throughout the rest of the course 332

332

because as I said in the beginning 333

333

they are a fundamental building block 334

334

of JavaScript programs 335

335

and by the way, you can now understand 336

336

that console dot log here is actually also just a function 337

337

but a built in function 338

338

that we do not have to write ourselves 339

339

but you see that we just call it like our own functions. 340

340

So we call it using the parenthesis here 341

341

and then we pass in a value. 342

342

So apple, orange juice 343

343

and the result of calling the function is simply 344

344

this message then appearing in the developer console 345

345

and the same is true for the function 346

346

that we used to convert a string to a number. 347

347

So this is another built in function 348

348

that takes this 23 string in this case as a parameter. 349

349

So we pass this argument into the function 350

350

and this function will then be executed 351

351

and returned the string as a number 352

352

and then we can save that like we did before, okay? 353

353

So this is gonna work just the same 354

354

and of course we cannot see it 355

355

but we can still check it out by writing numb, okay? 356

356

But now, anyway I will leave you to really analyze 357

357

how all of this logic here works that we just wrote. 358

358

So do that now and only once you fully understand 359

359

how this example works move on to the next video.