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.