Original subtitles

1 1

Let's start this section about functions with one 2

2

of the easiest parts, 3

3

which is default parameters. 4

4

And the new section means new starter files. 5

5

So as always get yours 6

6

from the GitHub repository, 7

7

and then open them up 8

8

in your VS code. 9

9

So as always, 10

10

we already start with strict mode here. 11

11

But now let's talk 12

12

about default parameters. 13

13

So sometimes it's useful to have functions 14

14

where some parameters are set by default, 15

15

so that we then do not have to pass them 16

16

in manually if we don't want 17

17

to change the default. 18

18

But anyways, let's not talk 19

19

about default parameters. 20

20

So sometimes it's useful to have functions 21

21

where some parameters are set by default, 22

22

this way, we do not have to pass them in manually, 23

23

in case we don't want 24

24

to change the default. 25

25

Now in this section, 26

26

we're going to continue with the airline theme 27

27

that we started by the end of the last section. 28

28

And so let's now create a very basic booking function. 29

29

And we're going to do that starting 30

30

with the knowledge that we already had previously. 31

31

So without the default parameters first. 32

32

So just a normal function. 33

33

And into this function, 34

34

we need to pass in the flight number, 35

35

the number of passengers 36

36

and the 37

37

price. 38

38

And then let's simply use this data 39

39

to create an object and push that into some bookings array. 40

40

So booking 41

41

and now here, we can use the enhanced object literal syntax 42

42

that we learned about in the previous section. 43

43

So we cannot create an object with a flight number property 44

44

without having to do this, remember. 45

45

So we simply define a variable here, 46

46

and that will then create a property with this name, 47

47

and also the value that's in the variable. 48

48

And then let's just log it to the console. 49

49

And then let's just create an array out here, 50

50

which will contain these bookings. 51

51

So we start empty here, 52

52

and then we simply push them each time there is a booking. 53

53

So basically, for the airline, 54

54

to keep the bookings in some kind of system. 55

55

And this is all very fictional. 56

56

It's just to show you the default parameters in this case. 57

57

And speaking of that, 58

58

based on what we learned in the last section 59

59

about short circuiting, 60

60

how would we implement default parameters? 61

61

Well, let's start by calling this function 62

62

without specifying some parameters and see what we get then. 63

63

So create booking. 64

64

And now with just a flight number, 65

65

let's say 66

66

LH 67

67

123. 68

68

And now we need a new terminal as always. 69

69

So again, I hit tab here, too, too, 70

70

autocomplete the operation. 71

71

And indeed, here is our browser, 72

72

with our page already running. 73

73

Now, here's some kind of problem. 74

74

Oh, and that's because we call this booking 75

75

here the same as the array. 76

76

And so here it is then trying to push 77

77

this object into itself, basically. 78

78

So we need to create bookings here, 79

79

giving it a new name. 80

80

And so indeed, 81

81

now we get here the result of this object. 82

82

And now it works. 83

83

And here we see the result of this booking object. 84

84

And so what we wanted to see here was that the non 85

85

passengers and the price are set to undefined, 86

86

because we didn't specify them. 87

87

And so now we can use short circuiting to our advantage, 88

88

because we know that these are faulty values. 89

89

Okay. 90

90

And what I'm doing here is basically the old way 91

91

of setting default parameters, 92

92

just to remember how it would work before year six. 93

93

So let's say I wanted to set the number 94

94

of passengers to one by default. 95

95

So basically, we would reassign this parameter like this. 96

96

So non passengers is non passengers, 97

97

or 98

98

one, 99

99

which is the default value. 100

100

And this works because of the reasons that we learned 101

101

in the last section, 102

102

which is that whenever this is a falsie value, 103

103

which undefined is, 104

104

then the result of the whole operator here will be 105

105

this second operand. 106

106

So this value here, 107

107

in this case, one. 108

108

And now we can do the same thing with the price. 109

109

Let's say 199 is the default price. 110

110

And so if we reload this now, then indeed, 111

111

we get our default values here. 112

112

Okay, so coming from this part of the code. 113

113

However, this is a lot of ugly, boilerplate code. 114

114

And again, this is the ES5 way of doing it. 115

115

So I will take this out, 116

116

let me actually write, ES5 here 117

117

because now in ES6 here there is a better way. 118

118

So all you have to do is to write this 119

119

equals 120

120

one. 121

121

And so now this year will be the default value. 122

122

And the same for the price, 123

123

let's say 2199. 124

124

And now if we reload, 125

125

then we get the same result here. 126

126

And this year, of course, 127

127

looks a lot nicer in this a lot more intuitive to read. 128

128

Now, of course, we can override these defaults. 129

129

Otherwise, this wouldn't make much sense. 130

130

So let's try 131

131

LH 123. 132

132

And now for two passengers. 133

133

And, 134

134

let's say 800. 135

135

Now, of course, these values are the ones 136

136

that we specified here, 137

137

instead of the default values. 138

138

Now one thing that's really cool about default values 139

139

is that they can contain any expression. 140

140

For example, we could do times 1.2, for example, 141

141

then we would get this here. 142

142

Okay, but what's even more useful is that we can actually 143

143

use the values of the other parameters 144

144

that were set before it. 145

145

So here, we can now say 146

146

that the price should be calculated based 147

147

on a number of passengers. 148

148

All right. 149

149

So if we now do this, 150

150

create booking again, 151

151

just some random flat number here. 152

152

Let's say again, two, 153

153

but then with five, 154

154

we will get another value. 155

155

So indeed, you see 398. 156

156

So the number continues down here, 157

157

and then 158

158

995, 159

159

and so the price is now dynamically calculated by default, 160

160

based on this value we specified 161

161

and the number of passengers. 162

162

And again, this only works for parameters that are defined 163

163

in the list before this one. 164

164

So this would not work. 165

165

Because JavaScript basically specifies 166

166

these parameters in orders. 167

167

And as it reaches. 168

168

So right now, as it reaches the price, 169

169

it doesn't know about the number of passengers yet. 170

170

And so that wouldn't work. 171

171

Now, another thing that's important 172

172

to note here is that we cannot skip arguments here, 173

173

when we call the function. 174

174

So for example, let's say we wanted to leave the number 175

175

of passengers as the default value, 176

176

but then specify the price. 177

177

So we cannot do this. 178

178

So skipping the number of passengers now, 179

179

and then only specifying a new price. 180

180

So if we do this, then of course, 181

181

the number of passengers becomes 1000. 182

182

Because the second argument here will always be mapped 183

183

to the second parameter. 184

184

So if we wanted to leave this one here at the default, 185

185

there is a nice trick. 186

186

So the number of passengers, 187

187

we can simply set to undefined. 188

188

Now, right, and this works again, 189

189

because setting the parameter to undefined 190

190

is the same thing as not even setting it, 191

191

remember, so when we don't set a parameter, 192

192

so when we don't pass an argument into that parameter, 193

193

then it will take the value of undefined. 194

194

And so specifying undefined here, 195

195

is exactly the same. 196

196

And so this is how we basically skip a default parameter 197

197

that we want to leave at its default. 198

198

And so now as I reload it here, 199

199

you see that a number of passenger is still one 200

200

and delete the price is now 1000. 201

201

Okay, so yet another very nice addition to the language 202

202

in ES6 here, and pretty straightforward to understand, too. 203

203

So see you in the next video.