Original subtitles

1 1

To finish this part about functions, 2

2

let's review everything important that we learned so far. 3

3

In order to make sure that you really understand functions 4

4

before we move on to other topics. 5

5

And let's start by bringing back and rewriting the function 6

6

that we wrote before, 7

7

which is the years until retirement function. 8

8

So I think that was, 9

9

yeah it was here in the lecture about arrow functions. 10

10

So let's copy this one and paste it here. 11

11

And the first thing that we're gonna do 12

12

is to actually convert it 13

13

to a more normal function expression. 14

14

So how do we do that? 15

15

Well, in this case, 16

16

we simply get rid of the arrow here 17

17

and then write the function keyword here. 18

18

And so now this is just a regular function expression 19

19

like we learned before. 20

20

Next up we could export this functionality here 21

21

into another function. 22

22

So like a calcAge function that we've been using before. 23

23

So let's do that 24

24

because then we can do what we did in the last lecture, 25

25

which was to call one function inside of the other function. 26

26

So let's write another function expression here, 27

27

calcAge equals 28

28

a function and then the birth year again. 29

29

And what we return from this one is simply 2037 30

30

minus the birth year. 31

31

So we already did that before. Right. 32

32

Now you might find it confusing 33

33

that we have two different functions here 34

34

with the same parameter names. 35

35

So this one has birth year and this one has too, 36

36

but that's not a problem at all. 37

37

So this birth year in this function is not at all related 38

38

to this birth year in this function. 39

39

They are two completely different parameters. 40

40

So basically two different variables. 41

41

We could even have a variable outside 42

42

of any of the functions, 43

43

which could also be called birth year. 44

44

Okay. 45

45

And we could do that now, 46

46

but I don't want to confuse you even further. Okay. 47

47

But what matters here is that this parameter is really 48

48

like a local variable to each function. 49

49

Anyway, 50

50

let's now go ahead and delete this here and instead, 51

51

calculate the age based on the function that we just wrote. 52

52

And actually we just delete this part here. 53

53

And so now the age will come from the function calcAge. 54

54

And what we pass in here is the birth year. 55

55

So again, it's confusing now with these 56

56

same parameter names here, 57

57

but let's quickly call this function 58

58

just so I can quickly show you the data flow. 59

59

So years until retirement with birth year 1991 60

60

and first name of Jonas. 61

61

So 1991 will be the birth year here in this function. 62

62

Then as a first step, 63

63

this years until retirement function called calcAge 64

64

and it calls calcAge with the argument of 1991. 65

65

So this one here, 66

66

and so then birth year in this function also becomes 1991. 67

67

And so then here, the operation will be 2037 minus 1991. 68

68

And if you find it less confusing, 69

69

we could change this year to something else. 70

70

Let's just say year and it would work the exact same way. 71

71

Okay. So again, 72

72

these variable names in these two different functions, 73

73

they do not have anything to do with one another. 74

74

All right. 75

75

But let's actually put it back here 76

76

because it's a, it's good to keep this in mind. 77

77

Then down here, 78

78

let's actually go back to returning a number 79

79

and not the string, which for now I will just comment out. 80

80

So here we call this function and once more, 81

81

I'm not gonna store it into a variable. 82

82

So we will just log the result of this, to the console. 83

83

So this should be just like before, 19. 84

84

Okay. 85

85

But now I want to show you something 86

86

which is to call this function again, 87

87

let's say now with a Mike 88

88

and let's say Mike was born in 1970. 89

89

And so, 90

90

his years until retirement will be two. 91

91

So a negative number, which means that he already retired. 92

92

So let's quickly account for that. 93

93

So what we will do is to basically return this number, 94

94

if it is above zero, 95

95

and if it is below zero, 96

96

we are gonna return something else like a minus one 97

97

or something or some special number. 98

98

So instead of returning simply the retirement, 99

99

let's take a decision here based on the retirement value. 100

100

And so that's something that we learned in the last lecture. 101

101

So let's use an if else statement and say, 102

102

if the retirement is 103

103

greater than zero. 104

104

So if there are more than zero years left until retirement 105

105

then return this retirement value. 106

106

Okay. 107

107

So remember that in the, if block, 108

108

we can put any code that we want. 109

109

And so that includes the return statement. 110

110

And else, well, let's just return always minus one. 111

111

So, minus one is kind of a standard number in programming. 112

112

We could also like return, 113

113

like this. 114

114

So a number that shows us clearly that this has no meaning. 115

115

Let's just keep it at number one, minus number one. 116

116

Okay. 117

117

And I'm returning actually numbers here 118

118

and not a string as we had before, 119

119

because that's usually what we do, 120

120

especially when we actually receive a number as an input. 121

121

So here in this function, we get birth year 122

122

here as an input, and it's a number 123

123

and therefore it's a good practice to 124

124

then also return a number. 125

125

Okay, let's try this again. 126

126

Now, we'll even change it to something more drastic. 127

127

So 1950 and let's see what we get now. 128

128

Now, 129

129

so it's minus one now. 130

130

Great. 131

131

Now, one thing that I didn't mention yet is 132

132

that this return keyword here 133

133

will actually immediately exit the function. 134

134

So it will first return the value that we tell it to return. 135

135

So in this case, the retirement value, 136

136

and then after that, the function is done. 137

137

So it exits immediately. 138

138

And we also say that the function has returned. 139

139

So let me actually demonstrate that to you. 140

140

And what I will do is to take this string here. 141

141

Now we can get rid of the rest 142

142

and I will put that after the return. 143

143

So we will log to the console, 144

144

this string here that we just had. 145

145

And then here let's log simply 146

146

the first name has already retired, 147

147

and then we can put another emoji here, 148

148

like this party emoji that I like. 149

149

And, 150

150

yeah. 151

151

What do you think will happen when we run this code now 152

152

and keep in mind that we have the return 153

153

before the console dot log, in both cases. 154

154

So in the, if block here and also in the else block. 155

155

So what do you think is gonna happen with these 156

156

console dot logs? 157

157

Well, let's see. 158

158

And indeed they are simply ignored, 159

159

so they will not get executed. 160

160

Because as I said before, 161

161

the return statement immediately exits 162

162

or immediately returns the function. 163

163

And so therefore there is no chance 164

164

that this code here is even reached. 165

165

So if we want this one here to execute, 166

166

we need to put it before the return 167

167

and in vs code, I can simply hit option or alt up. 168

168

Okay. And that will then move the line up. 169

169

So we can, 170

170

we also have that here somewhere in this menu. 171

171

So that's move line up and move line down. 172

172

So just so you see which one is the shortcut. 173

173

So I use that one all the time. 174

174

I also use add cursor below all the time, 175

175

and I also use add next occurrence. 176

176

So that would be command or control D. 177

177

So what this means is that we have, if we have 178

178

this for example, here select it 179

179

then we can already see all the other ones. 180

180

But if we hit command D then it will actually select that. 181

181

So you see. Now we have these four selected. 182

182

And so we now could replace all of them at the same time, 183

183

for example, like this. Okay. 184

184

But anyway, let's go back to what we were doing here. 185

185

So I just moved the console dot log before the return here. 186

186

And so now there should be a chance that the console dot log 187

187

is actually executed before the value is returned. 188

188

And so let's do the same here. 189

189

So again, I'm hitting option or alt up. 190

190

Add to these two lines to changed position, 191

191

and now, yeah, now it works. 192

192

So we get the string and here we get, 193

193

Mike has already retired. 194

194

Okay. 195

195

So this was to show you some more things about functions 196

196

that we had already learned, 197

197

and also show you something new, 198

198

which is the fact that the return statement here 199

199

immediately exits the function. 200

200

So we reviewed already some things here, 201

201

but now it's time to really review everything 202

202

that we learned so far about functions 203

203

in these first couple of lectures. 204

204

And here we have the three type of functions 205

205

that we talked about. 206

206

So we have first, the function declaration, 207

207

and one particularity about function declarations 208

208

is that they can be used before 209

209

they are declared in the code. 210

210

Second, we have the function expressions, 211

211

and they are essentially function values 212

212

that are stored in a variable. 213

213

And finally, we have arrow functions 214

214

that are in fact also function expressions, 215

215

but special ones. 216

216

And these are great for quick one line functions 217

217

where we don't need to explicitly use the return keyword 218

218

and no curly braces either. 219

219

I also said that this one has no this keyword, 220

220

but more about that in one of the future lectures. 221

221

Now what's important to note here is that 222

222

these are three different ways of writing functions, 223

223

but they all work in a similar way. 224

224

So all of them can receive input data, they transform data, 225

225

and then they can output data. 226

226

It's all optional, 227

227

but usually that's the things that functions do. 228

228

And no matter which type of function we use, 229

229

we can always do these three things. 230

230

And now let's zoom in a little bit further 231

231

and take a close look at the structure of a 232

232

common function let's say. 233

233

And this one here is a function statement, 234

234

but it works the exact same way 235

235

for all other types of functions again. 236

236

So first, usually a function needs a function name. 237

237

So calcAge in this example, 238

238

then a function also has parameters. 239

239

And these parameters are essentially placeholders, 240

240

that receive input values. 241

241

So, as I said before, 242

242

these are a little bit like local variables of a function. 243

243

So variables that are defined 244

244

only inside of this very function. 245

245

Now, as you also already know, 246

246

we use functions to reuse pieces of code, 247

247

and these pieces of code are inside the function body. 248

248

So this is where the functions input data 249

249

is usually processed and then returned. 250

250

And speaking of the return, by the end of the function, 251

251

we usually have a return statement, 252

252

which we use to output a value from the function. 253

253

And also, as I mentioned a little bit earlier, 254

254

the return statement also immediately terminates 255

255

the function's execution. 256

256

We also say that the function returns, okay. 257

257

And now about calling the function, 258

258

we do that using parenthesis. 259

259

So we write the name of the function 260

260

like we did here with calcAge 261

261

and then with a parenthesis we call the function. 262

262

Because without the parenthesis, 263

263

the function is really just a value. 264

264

But then with the parenthesis, 265

265

we actually called a function. 266

266

And we can also say that we run the function 267

267

or invoked a function or execute a function. 268

268

And all of these terms kind of mean the same thing. 269

269

Now, in this case, 270

270

since the function actually has parameters, 271

271

we then call the function with arguments and these arguments 272

272

are the actual values of the function parameters. 273

273

So we use these to input the actual data into the function. 274

274

And we can also imagine this as replacing the placeholders 275

275

that are the parameters. 276

276

Then once the calcAge function has finally done its job, 277

277

then all this expression will basically be replaced 278

278

with the returned value. 279

279

So in this case, the age that was replaced here. 280

280

And that age value is what we then store 281

281

into this age variable. 282

282

So we use this variable to basically save the returned value 283

283

that was outputed from the function. 284

284

Okay. 285

285

Now just one other thing that I want to make clear is 286

286

that this console dot log that we have in the function. 287

287

So in that first line there, 288

288

has nothing to do with returning a value. 289

289

This simply prints a message to the developer console, 290

290

but it has nothing to do with returning. 291

291

Actually the console dot log is actually just 292

292

another function call inside the calcAge function 293

293

because console dot log is itself a function. 294

294

And so the argument that we pass into 295

295

the console dot log function 296

296

is what will get printed to the developer console. 297

297

Okay. So just wanted to make sure 298

298

that you really get this distinction 299

299

between console dot log and return. 300

300

The reason why we always use console dot log 301

301

is because we want to see the results of our experiments 302

302

in the developer console, in the browser. 303

303

Anyway, 304

304

I think this pretty much sums up all there is to know, 305

305

at least for now about functions. 306

306

So make sure that you get all of this down 307

307

and then you can move on right to the next video 308

308

where the first coding challenge 309

309

of this section waits for you. 310

310

And as you can probably guess, 311

311

it's gonna be about writing your own function 312

312

for the very first time. 313

313

So I hope to see you there soon.