Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,220 --> 00:00:04,540
Let's start this section about functions with one
2
2
00:00:04,540 --> 00:00:06,130
of the easiest parts,
3
3
00:00:06,130 --> 00:00:08,143
which is default parameters.
4
4
00:00:10,040 --> 00:00:13,470
And the new section means new starter files.
5
5
00:00:13,470 --> 00:00:14,970
So as always get yours
6
6
00:00:14,970 --> 00:00:17,030
from the GitHub repository,
7
7
00:00:17,030 --> 00:00:18,240
and then open them up
8
8
00:00:18,240 --> 00:00:20,070
in your VS code.
9
9
00:00:20,070 --> 00:00:20,903
So as always,
10
10
00:00:20,903 --> 00:00:24,200
we already start with strict mode here.
11
11
00:00:24,200 --> 00:00:25,210
But now let's talk
12
12
00:00:25,210 --> 00:00:27,550
about default parameters.
13
13
00:00:27,550 --> 00:00:30,760
So sometimes it's useful to have functions
14
14
00:00:30,760 --> 00:00:34,000
where some parameters are set by default,
15
15
00:00:34,000 --> 00:00:36,320
so that we then do not have to pass them
16
16
00:00:36,320 --> 00:00:38,330
in manually if we don't want
17
17
00:00:38,330 --> 00:00:40,190
to change the default.
18
18
00:00:40,190 --> 00:00:41,980
But anyways, let's not talk
19
19
00:00:41,980 --> 00:00:44,470
about default parameters.
20
20
00:00:44,470 --> 00:00:47,870
So sometimes it's useful to have functions
21
21
00:00:47,870 --> 00:00:51,410
where some parameters are set by default,
22
22
00:00:51,410 --> 00:00:54,920
this way, we do not have to pass them in manually,
23
23
00:00:54,920 --> 00:00:56,510
in case we don't want
24
24
00:00:56,510 --> 00:00:58,240
to change the default.
25
25
00:00:58,240 --> 00:00:59,270
Now in this section,
26
26
00:00:59,270 --> 00:01:02,160
we're going to continue with the airline theme
27
27
00:01:02,160 --> 00:01:05,300
that we started by the end of the last section.
28
28
00:01:05,300 --> 00:01:09,080
And so let's now create a very basic booking function.
29
29
00:01:09,080 --> 00:01:10,720
And we're going to do that starting
30
30
00:01:10,720 --> 00:01:13,353
with the knowledge that we already had previously.
31
31
00:01:16,480 --> 00:01:20,133
So without the default parameters first.
32
32
00:01:22,860 --> 00:01:24,870
So just a normal function.
33
33
00:01:24,870 --> 00:01:26,020
And into this function,
34
34
00:01:26,020 --> 00:01:28,723
we need to pass in the flight number,
35
35
00:01:29,830 --> 00:01:31,430
the number of passengers
36
36
00:01:33,340 --> 00:01:34,173
and the
37
37
00:01:35,220 --> 00:01:36,053
price.
38
38
00:01:37,620 --> 00:01:39,460
And then let's simply use this data
39
39
00:01:39,460 --> 00:01:43,223
to create an object and push that into some bookings array.
40
40
00:01:46,580 --> 00:01:47,580
So booking
41
41
00:01:48,430 --> 00:01:52,140
and now here, we can use the enhanced object literal syntax
42
42
00:01:52,140 --> 00:01:55,580
that we learned about in the previous section.
43
43
00:01:55,580 --> 00:01:59,070
So we cannot create an object with a flight number property
44
44
00:01:59,070 --> 00:02:02,353
without having to do this, remember.
45
45
00:02:03,500 --> 00:02:05,470
So we simply define a variable here,
46
46
00:02:05,470 --> 00:02:08,810
and that will then create a property with this name,
47
47
00:02:08,810 --> 00:02:11,893
and also the value that's in the variable.
48
48
00:02:14,670 --> 00:02:16,770
And then let's just log it to the console.
49
49
00:02:18,400 --> 00:02:21,520
And then let's just create an array out here,
50
50
00:02:21,520 --> 00:02:23,563
which will contain these bookings.
51
51
00:02:25,340 --> 00:02:26,530
So we start empty here,
52
52
00:02:26,530 --> 00:02:30,160
and then we simply push them each time there is a booking.
53
53
00:02:30,160 --> 00:02:32,330
So basically, for the airline,
54
54
00:02:32,330 --> 00:02:36,450
to keep the bookings in some kind of system.
55
55
00:02:36,450 --> 00:02:38,930
And this is all very fictional.
56
56
00:02:38,930 --> 00:02:43,350
It's just to show you the default parameters in this case.
57
57
00:02:43,350 --> 00:02:44,880
And speaking of that,
58
58
00:02:44,880 --> 00:02:47,180
based on what we learned in the last section
59
59
00:02:47,180 --> 00:02:49,060
about short circuiting,
60
60
00:02:49,060 --> 00:02:52,690
how would we implement default parameters?
61
61
00:02:52,690 --> 00:02:54,870
Well, let's start by calling this function
62
62
00:02:54,870 --> 00:02:58,633
without specifying some parameters and see what we get then.
63
63
00:03:00,050 --> 00:03:02,250
So create booking.
64
64
00:03:02,250 --> 00:03:04,520
And now with just a flight number,
65
65
00:03:04,520 --> 00:03:06,070
let's say
66
66
00:03:06,070 --> 00:03:06,903
LH
67
67
00:03:06,903 --> 00:03:07,736
123.
68
68
00:03:08,650 --> 00:03:10,863
And now we need a new terminal as always.
69
69
00:03:15,950 --> 00:03:19,960
So again, I hit tab here, too, too,
70
70
00:03:19,960 --> 00:03:21,793
autocomplete the operation.
71
71
00:03:26,290 --> 00:03:28,300
And indeed, here is our browser,
72
72
00:03:28,300 --> 00:03:30,533
with our page already running.
73
73
00:03:31,460 --> 00:03:33,233
Now, here's some kind of problem.
74
74
00:03:34,500 --> 00:03:36,840
Oh, and that's because we call this booking
75
75
00:03:36,840 --> 00:03:38,850
here the same as the array.
76
76
00:03:38,850 --> 00:03:41,280
And so here it is then trying to push
77
77
00:03:41,280 --> 00:03:44,223
this object into itself, basically.
78
78
00:03:45,140 --> 00:03:47,730
So we need to create bookings here,
79
79
00:03:47,730 --> 00:03:49,253
giving it a new name.
80
80
00:03:50,220 --> 00:03:51,910
And so indeed,
81
81
00:03:51,910 --> 00:03:55,320
now we get here the result of this object.
82
82
00:03:55,320 --> 00:03:56,440
And now it works.
83
83
00:03:56,440 --> 00:04:00,930
And here we see the result of this booking object.
84
84
00:04:00,930 --> 00:04:03,980
And so what we wanted to see here was that the non
85
85
00:04:03,980 --> 00:04:08,100
passengers and the price are set to undefined,
86
86
00:04:08,100 --> 00:04:10,360
because we didn't specify them.
87
87
00:04:10,360 --> 00:04:14,420
And so now we can use short circuiting to our advantage,
88
88
00:04:14,420 --> 00:04:17,033
because we know that these are faulty values.
89
89
00:04:18,780 --> 00:04:20,060
Okay.
90
90
00:04:20,060 --> 00:04:22,640
And what I'm doing here is basically the old way
91
91
00:04:22,640 --> 00:04:24,510
of setting default parameters,
92
92
00:04:24,510 --> 00:04:28,500
just to remember how it would work before year six.
93
93
00:04:28,500 --> 00:04:30,810
So let's say I wanted to set the number
94
94
00:04:30,810 --> 00:04:34,130
of passengers to one by default.
95
95
00:04:34,130 --> 00:04:38,883
So basically, we would reassign this parameter like this.
96
96
00:04:39,910 --> 00:04:43,180
So non passengers is non passengers,
97
97
00:04:43,180 --> 00:04:44,430
or
98
98
00:04:44,430 --> 00:04:45,440
one,
99
99
00:04:45,440 --> 00:04:48,000
which is the default value.
100
100
00:04:48,000 --> 00:04:50,380
And this works because of the reasons that we learned
101
101
00:04:50,380 --> 00:04:51,800
in the last section,
102
102
00:04:51,800 --> 00:04:55,100
which is that whenever this is a falsie value,
103
103
00:04:55,100 --> 00:04:56,503
which undefined is,
104
104
00:04:56,503 --> 00:04:59,650
then the result of the whole operator here will be
105
105
00:04:59,650 --> 00:05:01,310
this second operand.
106
106
00:05:01,310 --> 00:05:02,460
So this value here,
107
107
00:05:02,460 --> 00:05:03,763
in this case, one.
108
108
00:05:04,810 --> 00:05:07,210
And now we can do the same thing with the price.
109
109
00:05:10,610 --> 00:05:14,450
Let's say 199 is the default price.
110
110
00:05:14,450 --> 00:05:17,930
And so if we reload this now, then indeed,
111
111
00:05:17,930 --> 00:05:20,340
we get our default values here.
112
112
00:05:20,340 --> 00:05:23,740
Okay, so coming from this part of the code.
113
113
00:05:23,740 --> 00:05:28,080
However, this is a lot of ugly, boilerplate code.
114
114
00:05:28,080 --> 00:05:31,800
And again, this is the ES5 way of doing it.
115
115
00:05:31,800 --> 00:05:33,000
So I will take this out,
116
116
00:05:34,360 --> 00:05:37,100
let me actually write, ES5 here
117
117
00:05:37,100 --> 00:05:39,870
because now in ES6 here there is a better way.
118
118
00:05:39,870 --> 00:05:42,790
So all you have to do is to write this
119
119
00:05:43,840 --> 00:05:44,673
equals
120
120
00:05:44,673 --> 00:05:45,660
one.
121
121
00:05:45,660 --> 00:05:49,540
And so now this year will be the default value.
122
122
00:05:49,540 --> 00:05:51,280
And the same for the price,
123
123
00:05:51,280 --> 00:05:53,310
let's say 2199.
124
124
00:05:53,310 --> 00:05:55,540
And now if we reload,
125
125
00:05:55,540 --> 00:05:57,410
then we get the same result here.
126
126
00:05:57,410 --> 00:05:58,770
And this year, of course,
127
127
00:05:58,770 --> 00:06:03,003
looks a lot nicer in this a lot more intuitive to read.
128
128
00:06:04,010 --> 00:06:07,410
Now, of course, we can override these defaults.
129
129
00:06:07,410 --> 00:06:09,533
Otherwise, this wouldn't make much sense.
130
130
00:06:10,470 --> 00:06:11,580
So let's try
131
131
00:06:13,440 --> 00:06:15,570
LH 123.
132
132
00:06:15,570 --> 00:06:18,190
And now for two passengers.
133
133
00:06:18,190 --> 00:06:19,320
And,
134
134
00:06:19,320 --> 00:06:20,573
let's say 800.
135
135
00:06:22,110 --> 00:06:24,100
Now, of course, these values are the ones
136
136
00:06:24,100 --> 00:06:25,700
that we specified here,
137
137
00:06:25,700 --> 00:06:28,410
instead of the default values.
138
138
00:06:28,410 --> 00:06:31,970
Now one thing that's really cool about default values
139
139
00:06:31,970 --> 00:06:34,920
is that they can contain any expression.
140
140
00:06:34,920 --> 00:06:39,760
For example, we could do times 1.2, for example,
141
141
00:06:39,760 --> 00:06:41,343
then we would get this here.
142
142
00:06:42,550 --> 00:06:46,000
Okay, but what's even more useful is that we can actually
143
143
00:06:46,000 --> 00:06:49,120
use the values of the other parameters
144
144
00:06:49,120 --> 00:06:51,020
that were set before it.
145
145
00:06:51,020 --> 00:06:53,090
So here, we can now say
146
146
00:06:53,090 --> 00:06:55,330
that the price should be calculated based
147
147
00:06:55,330 --> 00:06:56,833
on a number of passengers.
148
148
00:06:57,700 --> 00:06:59,170
All right.
149
149
00:06:59,170 --> 00:07:00,950
So if we now do this,
150
150
00:07:00,950 --> 00:07:02,773
create booking again,
151
151
00:07:03,820 --> 00:07:05,623
just some random flat number here.
152
152
00:07:08,210 --> 00:07:09,623
Let's say again, two,
153
153
00:07:10,690 --> 00:07:11,940
but then with five,
154
154
00:07:11,940 --> 00:07:13,453
we will get another value.
155
155
00:07:15,550 --> 00:07:18,290
So indeed, you see 398.
156
156
00:07:18,290 --> 00:07:20,110
So the number continues down here,
157
157
00:07:20,110 --> 00:07:20,943
and then
158
158
00:07:20,943 --> 00:07:22,123
995,
159
159
00:07:23,060 --> 00:07:26,870
and so the price is now dynamically calculated by default,
160
160
00:07:26,870 --> 00:07:29,550
based on this value we specified
161
161
00:07:29,550 --> 00:07:31,410
and the number of passengers.
162
162
00:07:31,410 --> 00:07:35,060
And again, this only works for parameters that are defined
163
163
00:07:35,060 --> 00:07:38,120
in the list before this one.
164
164
00:07:38,120 --> 00:07:40,460
So this would not work.
165
165
00:07:40,460 --> 00:07:43,240
Because JavaScript basically specifies
166
166
00:07:43,240 --> 00:07:44,910
these parameters in orders.
167
167
00:07:44,910 --> 00:07:46,223
And as it reaches.
168
168
00:07:47,190 --> 00:07:49,260
So right now, as it reaches the price,
169
169
00:07:49,260 --> 00:07:52,380
it doesn't know about the number of passengers yet.
170
170
00:07:52,380 --> 00:07:53,993
And so that wouldn't work.
171
171
00:07:55,020 --> 00:07:56,710
Now, another thing that's important
172
172
00:07:56,710 --> 00:08:00,550
to note here is that we cannot skip arguments here,
173
173
00:08:00,550 --> 00:08:02,480
when we call the function.
174
174
00:08:02,480 --> 00:08:05,940
So for example, let's say we wanted to leave the number
175
175
00:08:05,940 --> 00:08:08,270
of passengers as the default value,
176
176
00:08:08,270 --> 00:08:10,960
but then specify the price.
177
177
00:08:10,960 --> 00:08:12,633
So we cannot do this.
178
178
00:08:17,790 --> 00:08:20,920
So skipping the number of passengers now,
179
179
00:08:20,920 --> 00:08:24,050
and then only specifying a new price.
180
180
00:08:24,050 --> 00:08:26,000
So if we do this, then of course,
181
181
00:08:26,000 --> 00:08:28,263
the number of passengers becomes 1000.
182
182
00:08:29,920 --> 00:08:32,860
Because the second argument here will always be mapped
183
183
00:08:32,860 --> 00:08:34,810
to the second parameter.
184
184
00:08:34,810 --> 00:08:38,300
So if we wanted to leave this one here at the default,
185
185
00:08:38,300 --> 00:08:40,240
there is a nice trick.
186
186
00:08:40,240 --> 00:08:41,900
So the number of passengers,
187
187
00:08:41,900 --> 00:08:44,283
we can simply set to undefined.
188
188
00:08:45,410 --> 00:08:47,680
Now, right, and this works again,
189
189
00:08:47,680 --> 00:08:48,757
because setting the parameter to undefined
190
190
00:08:48,757 --> 00:08:52,820
is the same thing as not even setting it,
191
191
00:08:52,820 --> 00:08:56,100
remember, so when we don't set a parameter,
192
192
00:08:56,100 --> 00:08:59,340
so when we don't pass an argument into that parameter,
193
193
00:08:59,340 --> 00:09:02,120
then it will take the value of undefined.
194
194
00:09:02,120 --> 00:09:04,500
And so specifying undefined here,
195
195
00:09:04,500 --> 00:09:06,100
is exactly the same.
196
196
00:09:06,100 --> 00:09:09,780
And so this is how we basically skip a default parameter
197
197
00:09:09,780 --> 00:09:12,263
that we want to leave at its default.
198
198
00:09:13,480 --> 00:09:15,560
And so now as I reload it here,
199
199
00:09:15,560 --> 00:09:18,750
you see that a number of passenger is still one
200
200
00:09:18,750 --> 00:09:21,620
and delete the price is now 1000.
201
201
00:09:21,620 --> 00:09:25,590
Okay, so yet another very nice addition to the language
202
202
00:09:25,590 --> 00:09:30,090
in ES6 here, and pretty straightforward to understand, too.
203
203
00:09:30,090 --> 00:09:31,573
So see you in the next video.
16498
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.