Original subtitles

1 1

So we learned about function declarations 2

2

and expressions in the last video 3

3

but there is actually a third type 4

4

of function that was added to JavaScript in ES6 5

5

and that's the arrow function. 6

6

And an arrow function is simply a special form 7

7

of function expression that is shorter 8

8

and therefore faster to write. 9

9

So let's actually get back this function expression 10

10

from before here. 11

11

So from the previous lecture 12

12

just so that we have a comparison. 13

13

So like a reference point. 14

14

And so now let's write the arrow function. 15

15

And this is how we write an arrow function. 16

16

So again, we want the birthYeah 17

17

because we want to calculate the age again 18

18

and then we write an arrow 19

19

and that's the reason why this function 20

20

is called arrow function. 21

21

And then we simply write what we want to return. 22

22

So in this case, 23

23

that's 2037 24

24

minus the birthYeah and that's it. 25

25

Now, to finish, we actually want 26

26

to be able to use this function. 27

27

So let's again store it in a variable, 28

28

just like we did here with this function expression. 29

29

So let's say const calcAge3 this time 30

30

and then we set that variable 31

31

to this function here, okay? 32

32

So as I said, this is a special form 33

33

of a function expression 34

34

because it still is a function expression actually. 35

35

So it's a value, all of this, 36

36

that we assign to this variable. 37

37

So just like this function expression up here. 38

38

But this one, as you see, 39

39

is a lot easier and faster to write. 40

40

The first reason for that 41

41

is that we don't need the curly braces, 42

42

like we have here, to define a code block. 43

43

And second is that the return actually happens implicitly. 44

44

So this value here will automatically be returned 45

45

without us having to explicitly write the return keyword. 46

46

Okay? 47

47

So this is excellent for simple one-liner functions. 48

48

And you will see throughout the course 49

49

that this is gonna be extremely helpful 50

50

in certain situations. 51

51

And now to use this function, 52

52

it, of course, works the exact same way 53

53

as using all the other functions. 54

54

So we call calcAge3 55

55

just like we called the other calcAge functions. 56

56

Okay. 57

57

And again, we save the returned value here to a variable 58

58

and then let's just check it out here. 59

59

And so this one should be 46 again, 60

60

just like we had in the previous lecture. 61

61

And yeah, it works. 62

62

So indeed, the value that we calculated 63

63

was returned automatically without us having 64

64

to write the return keyword. 65

65

Now, you see that here we also didn't need any parentheses 66

66

or anything like that. 67

67

Just this here is the function. 68

68

Okay? 69

69

Now, this is actually just the simplest form, 70

70

which is when we only have exactly one parameter 71

71

and only basically one line of code 72

72

in which we want to return something. 73

73

But it gets a little bit more complex 74

74

when we add more parameters or more code. 75

75

So let's now write another function 76

76

and we can get rid of this one 77

77

since it was just a copy anyway. 78

78

And so let's say that we want to calculate 79

79

how many years a person has left until retirement. 80

80

So let's call this function yearsUntilRetirement. 81

81

And then we set that equal to a function. 82

82

And once again, let's pass in the birthYeah. 83

83

Then the arrow again 84

84

but now, here we need some more code 85

85

because to calculate the number of years 86

86

until the retirement based on the birthYeah alone, 87

87

we first need to calculate the age, 88

88

and then from there, we need to calculate the retirement age 89

89

minus the current age. 90

90

So we need more lines of code 91

91

and so we are back to actually needing the curly braces 92

92

in order to define a code block like this. 93

93

So let's do what we just said. 94

94

So calculate the age based on the birth year. 95

95

So 2037 minus the birthYeah 96

96

and now let's calculate 97

97

the years until retirement basically. 98

98

And so let's say that the retirement age is 65 years, 99

99

as it is in many countries here in Europe at least. 100

100

So 65 and then minus the current age. 101

101

And that will then give us how many years we have left. 102

102

And now to return this retirement, 103

103

we actually need to write the return keyword explicitly. 104

104

So we can only omit the return here 105

105

in case we have a one-liner function like here. 106

106

But if we have more, 107

107

then we need to do the return still. 108

108

So let's now run this function. 109

109

So yearsUntilRetirement 110

110

and then again some year 111

111

and then as always, we could capture the return value 112

112

into a variable. 113

113

But this time, let's actually log that value 114

114

to the console directly. 115

115

So console.log 116

116

and yeah, so let's try that. 117

117

And so it's 19. 118

118

And that makes sense because 65 minus 46, 119

119

which is the age, is 19. 120

120

Okay? 121

121

So that's the scenario when we have one parameter here 122

122

and then more than one line of code basically. 123

123

And remember, in that situation, 124

124

we need the return statement here. 125

125

But now, what if we had multiple parameters? 126

126

Well, then we need 127

127

to wrap the parameters here into parentheses. 128

128

So in VS Code, we can just select a variable 129

129

and then write parentheses 130

130

and then it will automatically wrap this variable 131

131

into parentheses on both sides. 132

132

So let's say we want the birthYeah 133

133

but also the firstName 134

134

so that we can like return something else, 135

135

like a sentence. 136

136

So let's comment out this part here 137

137

and instead, let's return a string. 138

138

And again, we're using a template string here 139

139

to build that string 140

140

and basically, I want to say like firstName retires 141

141

in x years. 142

142

So let's use that placeholder here. 143

143

So firstName retires in 144

144

and then we use that value that we just calculated. 145

145

So retirement. 146

146

Give it a save here 147

147

and now we need to call it 148

148

and so let's add the second argument here 149

149

so that it will go to the second parameter. 150

150

So the first one here is, of course, birthYeah 151

151

and so that corresponds to 1991 152

152

and now the second argument will go to the second parameter, 153

153

which is the firstName. 154

154

So let's say Jonas 155

155

and let's just call it twice 156

156

so that it actually makes more sense 157

157

that we even put this logic into its own function. 158

158

So let's say that Bob was born in 1980 159

159

and so let's see how many years he has left. 160

160

So Jonas retires in 19 years, 161

161

Bob retires in eight years. 162

162

Great, and that's essentially how the arrow functions work. 163

163

You just need to keep in mind the couple 164

164

of different scenarios that there are regarding 165

165

to the number of lines of code 166

166

that you need and the number of parameters. 167

167

So as you add more code 168

168

and more parameters, it gets a little bit more complex 169

169

and we kind of lose the advantage 170

170

of using an arrow function. 171

171

So now you might ask the same question as before. 172

172

What type of function should I use? 173

173

Should I use arrow functions for everything 174

174

since they're so easy to write? 175

175

And well, the answer is no. 176

176

But it's also complicated. 177

177

That's because there is another fundamental difference 178

178

between the arrow function and more traditional functions. 179

179

So function declarations and function expressions. 180

180

It's the fact that arrow function 181

181

do not get a so-called this keyword. 182

182

And this, once more, is a topic for much later. 183

183

So remember that learning is not at all a linear process 184

184

and so topics need to build up on one another 185

185

in an incremental way. 186

186

Otherwise, you would just get super overwhelmed 187

187

and super stressed if I were to tell you everything 188

188

at the same time. 189

189

So for now, we will actually keep 190

190

using mainly the normal functions, 191

191

except for very simple one-liner functions. 192

192

For example, like this one here. 193

193

And that doesn't mean that arrow functions 194

194

are not important. 195

195

They absolutely are 196

196

and I love them and I use them all the time. 197

197

Sometimes I don't write regular functions at all. 198

198

But again, you cannot yet understand all the implications 199

199

of using arrow functions. 200

200

So for now again, we will keep using 201

201

probably the function expressions the most.