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