Original subtitles

1 1

Welcome back, so I hope that you studied 2

2

the last lecture really well, 3

3

so that you really understood what we did there 4

4

with our food processor function. 5

5

Now in JavaScript, there are different ways 6

6

of writing functions. 7

7

And each type of function, 8

8

works in a slightly different way. 9

9

But don't worry, they're still all very similar. 10

10

So let's find out now. 11

11

So the functions that I showed you in the last lecture 12

12

are called function declarations 13

13

because we simply use the function keyword 14

14

to declare a function a bit like we declare a variable. 15

15

So let's now write another function declaration. 16

16

And this time a function to calculate an age 17

17

based on a given birth year. 18

18

So let's again use the function keyword 19

19

and we're gonna call this calcAge1 20

20

and that's because we're gonna have another one later. 21

21

So as I said, we want a person's birth year 22

22

as an input to this function. 23

23

And what is an input? 24

24

Well, it's just a parameter in this function. 25

25

And the parameter remember it's a bit like a local variable, 26

26

that's only available inside of this function 27

27

Then the function body with the curly braces 28

28

and now the code that we want to create here. 29

29

So, how do we calculate an age? 30

30

Well, just like we did before 31

31

we take the current year, 32

32

which once more let's suppose it's 2037 33

33

and then minus the person's birth year. 34

34

And then remember to take this value now 35

35

out of the function, we return it using the return keyword. 36

36

So we calculate the age first and then we return that value. 37

37

And actually we can simplify this 38

38

and basically return all in one go. 39

39

So there's actually no need to store this value here 40

40

in a variable, if all we do is then later return that value. 41

41

So in fact, we can just take this value here, 42

42

get rid of this and then simply return the result 43

43

of this expression here, 44

44

so basically of this operation, okay? 45

45

So we're taking the birth year that we're gonna receive 46

46

and then use that to calculate the age. 47

47

And so once again, this is a generic function, 48

48

which is then gonna work for any birth year that we give it. 49

49

So of course, let's now call or invoke 50

50

or execute this function. 51

51

And again, I can use 52

52

all of these three words interchangeably, 53

53

they all mean the same thing. 54

54

So calcAgel and then remember to call the function 55

55

we use parenthesis and then we specify 56

56

the actual value of the parameter 57

57

which is called the argument, remember? 58

58

So let's say 1991. 59

59

Now some people use the words arguments 60

60

and parameters as if they were the same 61

61

and actually that's not a big deal 62

62

but to be really precise, the parameter is again 63

63

the kind of placeholder in the function 64

64

and the argument is then the actual value 65

65

that we use to fill in that placeholder 66

66

that is the parameter. 67

67

Anyway, this will now create a value, right? 68

68

And the value that this will create is the value 69

69

that's returned from the calcAge function 70

70

so basically this returned value. 71

71

And so, once again, we need to capture 72

72

or to save that value into a variable. 73

73

So let's call this age1 74

74

and just to make sure that it works, 75

75

let's quickly check it out in the console. 76

76

Okay. 77

77

And indeed, we get 46 just like we did before, okay? 78

78

So that is a function declaration 79

79

but now let's create a function expression. 80

80

So that's the other type of function that exists 81

81

and it looks like this. 82

82

Instead of writing a function with the calcAge name, 83

83

we simply write function basically without a name 84

84

and then we still define the parameter, 85

85

we still define the function body, 86

86

which is gonna be the same as this one 87

87

because we want another calcAge function here. 88

88

So we write a function like this 89

89

and then what we have to do 90

90

is to store all of this here into a variable 91

91

and that variable will then be the function. 92

92

So let's call it, calcAge2. 93

93

So again, we did write the function in a very similar way, 94

94

but we didn't give it a name here, 95

95

so it's a function without a name basically, 96

96

which is also called an anonymous function. 97

97

So all of this here is basically an expression 98

98

and remember that an expression produces a value. 99

99

And so we use that value in store it into calcAge2 100

100

and this will then be the function. 101

101

And I know that sounds very confusing 102

102

but it will make sense, trust me. 103

103

Now to call this function, 104

104

we actually do it in the exact same way. 105

105

So let's do age2 equals calcAge2 106

106

and let's use 1991 again 107

107

and then let's grab this console.log here 108

108

and log both the ages, So age2 here, 109

109

let's also add some comments here, 110

110

function declaration and function expression. 111

111

And so we should get twice 112

112

the 46 value here and yes, indeed. 113

113

So the functional expression works 114

114

the exact same way as the function declaration. 115

115

So we call it in the same way we capture 116

116

the return value in the same way 117

117

and then of course the result is also the same 118

118

because the function body is the same. 119

119

But it's very important to know 120

120

that we have these two type of functions in JavaScript. 121

121

Because in some places we will actually need 122

122

to write them like this, 123

123

as you will see as we go through the course. 124

124

So again, this part here that I just highlighted 125

125

this function here is in fact an expression 126

126

and remember that expressions produce values. 127

127

And so we just assign this whole value here 128

128

then to this variable. 129

129

And so this variable will then hold 130

130

this function value basically. 131

131

And one big implication of what I just said, 132

132

So, that this here is just a value, yeah, 133

133

is that in fact in JavaScript, 134

134

functions are actually just values. 135

135

So just as a number or a string or a boolean value. 136

136

So a function is not a type, okay? 137

137

It's not like a string or number type 138

138

but it's also a value. 139

139

And so if it's a value, we can store it in a variable. 140

140

So just keep this in mind 141

141

because it will become very important later 142

142

when we really dig deep into functions. 143

143

Now, besides these technical differences, 144

144

you might be wondering what is the big deal? 145

145

So what's the big difference between 146

146

function declarations and function expressions? 147

147

Well, the main practical difference 148

148

is that we can actually call function declarations 149

149

before they are defined in the code. 150

150

So let me show that to you. 151

151

So here is the declaration, right? 152

152

This is the function declaration and as I just said, 153

153

we can call them in a code before they are defined. 154

154

So now we're calling it first and then defining it later. 155

155

So let me show you that that still works 156

156

and indeed we still get the same result. 157

157

But if we attempt to do the same with the expression, 158

158

then that should not work. 159

159

So let's see and yeah, 160

160

so cannot access calcAge2 before initialization, okay? 161

161

and internally this happens 162

162

because of a process called hoisting 163

163

but more about that in a future section, okay? 164

164

For now just keep in mind that you can call 165

165

a function declaration before you define it 166

166

even though that might not be such a good idea in many cases 167

167

but you can do it if necessary. 168

168

All right, now another question 169

169

that you might have in your mind 170

170

is which of the two types of functions should I use 171

171

when I write my own functions? 172

172

And well, the answer is that oftentimes 173

173

it's really just a matter of personal preference. 174

174

and so different developers prefer different formats. 175

175

Personally, I prefer to use function expressions 176

176

because this then forces me into a nice structure 177

177

where I have to define all the functions first 178

178

at the top of the code and only then I can call them. 179

179

So this makes the code a little bit nicer 180

180

and more structured. 181

181

I also like to have everything stored in variables, 182

182

so both values and functions, but again, 183

183

that is just my own personal preference. 184

184

And many other developers don't agree with this 185

185

and prefer to use function declarations. 186

186

So, if you also prefer a function declarations, that's fine. 187

187

So, just use declarations then. 188

188

It's absolutely no problem. 189

189

However, even if you prefer one over the other, 190

190

you still need to know about both 191

191

the function expressions and function declarations. 192

192

So you can not just pick one 193

193

and then forget the other one 194

194

because both have their place in JavaScript. 195

195

And so it's really important that you know 196

196

how to use and how's to distinguish 197

197

both function declarations and expressions.