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