WEBVTT 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.