WEBVTT 1 00:00:01.220 --> 00:00:03.480 I showed you rest parameters 2 00:00:03.480 --> 00:00:05.417 in the last lecture, so now it's time 3 00:00:05.417 --> 00:00:08.167 to talk about default parameters. 4 00:00:09.627 --> 00:00:12.037 Default parameters are actually 5 00:00:12.037 --> 00:00:14.485 a very straight forward concept. 6 00:00:14.485 --> 00:00:17.612 We use them whenever we want one or more parameters 7 00:00:17.612 --> 00:00:20.414 of a function to be preset, so we want them 8 00:00:20.414 --> 00:00:22.690 to have a default value. 9 00:00:22.690 --> 00:00:27.280 ES6 brings us default parameters, but there is also a way 10 00:00:27.280 --> 00:00:31.447 of coding this in ES5, so let's start by doing that. 11 00:00:32.812 --> 00:00:36.392 We haven't used function constructors in a long time, 12 00:00:36.392 --> 00:00:40.309 so let's do that now and create a person, okay? 13 00:00:41.245 --> 00:00:44.175 But we create, specifically, a Smith person, 14 00:00:44.175 --> 00:00:48.701 so a person which is a part of the Smith family, 15 00:00:48.701 --> 00:00:52.626 so let's call it SmithPerson, and we want it 16 00:00:52.626 --> 00:00:55.793 to have a first name, a year of birth, 17 00:01:00.446 --> 00:01:03.363 also a last name and a nationality. 18 00:01:07.272 --> 00:01:10.439 All right, and so we say it, as usual, 19 00:01:15.083 --> 00:01:18.416 should be the firstName that we receive. 20 00:01:20.219 --> 00:01:23.552 The lastName is of course the last name. 21 00:01:24.557 --> 00:01:28.640 The same for the yearOfBirth and the nationality. 22 00:01:39.944 --> 00:01:44.161 All right, so let's now use that function constructor 23 00:01:44.161 --> 00:01:47.994 and create a new person called John once more. 24 00:01:49.155 --> 00:01:53.238 It's a new SmithPerson, let's say John, and 1990. 25 00:01:57.662 --> 00:02:01.624 JavaScript actually allows us to call any function 26 00:02:01.624 --> 00:02:04.808 without specifying all of the arguments. 27 00:02:04.808 --> 00:02:08.806 In this case, we only specify first name and year of birth, 28 00:02:08.806 --> 00:02:12.542 but leave the last name and nationality empty. 29 00:02:12.542 --> 00:02:14.863 What JavaScript does, in this case, 30 00:02:14.863 --> 00:02:19.123 is that it simply assigns undefined to these two parameters, 31 00:02:19.123 --> 00:02:22.544 so they will be undefined, and we're gonna make use of that 32 00:02:22.544 --> 00:02:23.706 in a second. 33 00:02:23.706 --> 00:02:27.695 I just wanna show it to you here in the console, okay? 34 00:02:27.695 --> 00:02:29.862 Let's take a look at John. 35 00:02:30.938 --> 00:02:33.601 Here we see, so last name is undefined 36 00:02:33.601 --> 00:02:37.018 and the nationality is undefined as well. 37 00:02:38.149 --> 00:02:40.287 What if you wanted to add a default 38 00:02:40.287 --> 00:02:44.019 for the last name and for the nationality? 39 00:02:44.019 --> 00:02:45.980 Imagine that we always would call 40 00:02:45.980 --> 00:02:48.304 this function constructor like this only 41 00:02:48.304 --> 00:02:51.521 with the first name and year of birth and 42 00:02:51.521 --> 00:02:56.345 that the last name and the nationality would be default. 43 00:02:56.345 --> 00:02:59.996 We can actually do that and make use of the fact 44 00:02:59.996 --> 00:03:04.064 that the arguments that we don't specify will be undefined. 45 00:03:04.064 --> 00:03:06.333 We can then use an if statement 46 00:03:06.333 --> 00:03:09.438 or something simpler like the ternary operator, 47 00:03:09.438 --> 00:03:13.105 and simply say if the last name is undefined 48 00:03:17.106 --> 00:03:19.689 then let the last name be Smith 49 00:03:24.924 --> 00:03:29.091 and else it's simply last name, so nothing changes. 50 00:03:31.144 --> 00:03:33.839 Let's think about it again. 51 00:03:33.839 --> 00:03:35.646 The variable will be undefined 52 00:03:35.646 --> 00:03:38.484 if we do not specify the last name, okay, 53 00:03:38.484 --> 00:03:41.690 so in this case last name will become Smith. 54 00:03:41.690 --> 00:03:43.543 That makes sense because we say 55 00:03:43.543 --> 00:03:46.230 that it's a SmithPerson here, right? 56 00:03:46.230 --> 00:03:50.289 In case that is not undefined, then nothing happens. 57 00:03:50.289 --> 00:03:53.238 We can, actually, delete this part from here. 58 00:03:53.238 --> 00:03:56.487 We'll now do the same thing with the nationality. 59 00:03:56.487 --> 00:03:59.154 If the nationality is undefined, 60 00:04:01.470 --> 00:04:05.637 then we want the nationality to be, let's say, American. 61 00:04:07.378 --> 00:04:11.386 All right, and then after that this part of the code here 62 00:04:11.386 --> 00:04:15.553 will execute and do its work, so let's see what happens now. 63 00:04:16.405 --> 00:04:18.690 Okay, so we have a small bug here, 64 00:04:18.690 --> 00:04:21.592 and the problem is, actually, that in a ternary operator 65 00:04:21.592 --> 00:04:25.685 we also have to always specify the else part. 66 00:04:25.685 --> 00:04:29.852 Let's just say that in this case it's lastName = lastName. 67 00:04:33.151 --> 00:04:34.713 It doesn't make much sense, 68 00:04:34.713 --> 00:04:38.223 but we have to put the else part here as well, 69 00:04:38.223 --> 00:04:42.390 and so here let's say nationality is the nationality. 70 00:04:45.403 --> 00:04:48.403 Let's now take a look at John again. 71 00:04:49.363 --> 00:04:52.280 Yeah so his last name is now Smith, 72 00:04:53.123 --> 00:04:56.262 and his nationality is American. 73 00:04:56.262 --> 00:05:00.429 We only called the SmithPerson operator function constructor 74 00:05:01.445 --> 00:05:03.982 with two arguments, but we still have all 75 00:05:03.982 --> 00:05:08.616 of these four properties of the object well-defined 76 00:05:08.616 --> 00:05:11.042 because we implemented something similar 77 00:05:11.042 --> 00:05:12.875 to default parameters. 78 00:05:13.865 --> 00:05:16.551 Now these can, of course, be overwritten. 79 00:05:16.551 --> 00:05:21.524 Imagine that we have another person, which is Emily, 80 00:05:21.524 --> 00:05:24.963 and Emily is John's sister, and she married 81 00:05:24.963 --> 00:05:28.348 with someone else that moved to Spain, and so we can now, 82 00:05:28.348 --> 00:05:32.515 of course, specify a new last name and a new nationality. 83 00:05:33.441 --> 00:05:37.108 Let's say that we have, also, a SmithPerson. 84 00:05:38.099 --> 00:05:39.766 She is called Emily. 85 00:05:41.367 --> 00:05:45.367 Let's say born in 1983, but her last name is now 86 00:05:46.534 --> 00:05:51.196 no longer Smith but Diaz, so she moved to Spain 87 00:05:51.196 --> 00:05:55.515 and is now Spanish and no longer American. 88 00:05:55.515 --> 00:05:59.654 This is gonna override the default parameters 89 00:05:59.654 --> 00:06:03.074 of our function constructor, so if we now take a look 90 00:06:03.074 --> 00:06:08.024 at Emily, of course, the defaults were overwritten, 91 00:06:08.024 --> 00:06:10.726 and we now have the last name as Diaz 92 00:06:10.726 --> 00:06:13.314 and the nationality as Spanish. 93 00:06:13.314 --> 00:06:17.481 This is how we use something like default parameters in ES5. 94 00:06:20.959 --> 00:06:25.213 Now we're ready to see how this actually works in ES6. 95 00:06:25.213 --> 00:06:28.814 Which is a lot easier and straightforward. 96 00:06:28.814 --> 00:06:31.147 In ES6 all we have to do is, 97 00:06:33.028 --> 00:06:37.195 of course this part is the same, so it's a SmithPerson, 98 00:06:39.811 --> 00:06:43.061 and we have a firstName, a yearOfBirth. 99 00:06:48.179 --> 00:06:51.101 Now this is where we define the default parameter. 100 00:06:51.101 --> 00:06:54.930 We say that the last name should be Smith, 101 00:06:54.930 --> 00:06:58.513 and that the nationality should be American 102 00:07:01.419 --> 00:07:05.714 if we do not specifically say something else. 103 00:07:05.714 --> 00:07:08.750 Then, of course, this part here is the same. 104 00:07:08.750 --> 00:07:11.667 I will just copy it, and that's it. 105 00:07:13.087 --> 00:07:15.804 We don't need any of this part here. 106 00:07:15.804 --> 00:07:19.365 All we need to do is to specify the default parameters 107 00:07:19.365 --> 00:07:24.051 right here where we actually declare the parameters. 108 00:07:24.051 --> 00:07:27.801 If you now run this, and take a look at John. 109 00:07:30.515 --> 00:07:32.525 Then this is exactly what we had before 110 00:07:32.525 --> 00:07:35.907 but in a better and easier way, so Smith again here, 111 00:07:35.907 --> 00:07:38.687 of course, and he is American. 112 00:07:38.687 --> 00:07:40.354 The same with Emily. 113 00:07:42.633 --> 00:07:46.707 We overrode the defaults, and so her last name is Diaz, 114 00:07:46.707 --> 00:07:48.290 and she is Spanish. 115 00:07:50.721 --> 00:07:54.120 Rest and default parameters definitely makes it easier 116 00:07:54.120 --> 00:07:56.282 to work with functions in JavaScript, 117 00:07:56.282 --> 00:08:00.429 so they are a very welcome addition to the language. 118 00:08:00.429 --> 00:08:01.929 Let's now move on.