WEBVTT 1 00:00:01.456 --> 00:00:04.030 In this lecture, and the next one, 2 00:00:04.030 --> 00:00:06.714 we're gonna talk about function parameters. 3 00:00:06.714 --> 00:00:08.982 So let's start with rest parameters 4 00:00:08.982 --> 00:00:10.815 right in this lecture. 5 00:00:11.744 --> 00:00:14.716 So, rest parameters allow us to pass 6 00:00:14.716 --> 00:00:17.765 an arbitrary number of arguments into a function, 7 00:00:17.765 --> 00:00:20.769 and to use these arguments in that function. 8 00:00:20.769 --> 00:00:22.801 So in the last lecture, we've been looking 9 00:00:22.801 --> 00:00:25.200 at the spread operator, right? 10 00:00:25.200 --> 00:00:28.671 Now rest parameters look exactly the same, 11 00:00:28.671 --> 00:00:30.654 but they are very different. 12 00:00:30.654 --> 00:00:33.801 So they use the same notation with the three dots, 13 00:00:33.801 --> 00:00:37.069 but actually rest parameters are the exact opposite 14 00:00:37.069 --> 00:00:38.915 of the spread operator. 15 00:00:38.915 --> 00:00:41.150 And that's because the spread operator 16 00:00:41.150 --> 00:00:42.773 takes an array, and basically, 17 00:00:42.773 --> 00:00:45.660 transforms it into single values, 18 00:00:45.660 --> 00:00:47.685 while the rest parameters receive 19 00:00:47.685 --> 00:00:49.542 a couple of single values 20 00:00:49.542 --> 00:00:51.605 and transforms them into an array 21 00:00:51.605 --> 00:00:55.755 when we call a function with multiple parameters. 22 00:00:55.755 --> 00:00:58.037 Okay, but enough talking, let's now see 23 00:00:58.037 --> 00:01:00.397 a practical example of this. 24 00:01:00.397 --> 00:01:02.911 So suppose we want to create a function 25 00:01:02.911 --> 00:01:06.396 that receives an arbitrary number of years, 26 00:01:06.396 --> 00:01:08.165 and then prints to the console 27 00:01:08.165 --> 00:01:11.075 whether each person corresponding to these years 28 00:01:11.075 --> 00:01:13.571 is of full age or not. 29 00:01:13.571 --> 00:01:17.123 And once more, I'm gonna start by doing it the ES5 way, 30 00:01:17.123 --> 00:01:21.602 and then show you how the rest parameters work in ES6 31 00:01:21.602 --> 00:01:24.658 making a life a bit easier. 32 00:01:24.658 --> 00:01:28.825 So, in ES5 let's create a function called isFullAge5 33 00:01:39.277 --> 00:01:43.047 okay, and in ES5, if we want to receive an undefined 34 00:01:43.047 --> 00:01:46.407 number of arguments, then we simply don't define 35 00:01:46.407 --> 00:01:48.494 any parameters for our function, 36 00:01:48.494 --> 00:01:51.430 and then just use the arguments keyword 37 00:01:51.430 --> 00:01:55.137 And remember the arguments keyword, or variable, 38 00:01:55.137 --> 00:01:57.462 is very similar to the this variable 39 00:01:57.462 --> 00:01:59.939 and it's a variable that each execution context 40 00:01:59.939 --> 00:02:01.391 gets access to. 41 00:02:01.391 --> 00:02:05.095 So let's first of all lock this argument's variable 42 00:02:05.095 --> 00:02:08.512 to the console to see what it looks like. 43 00:02:11.621 --> 00:02:13.304 And arguments. 44 00:02:13.304 --> 00:02:18.256 Okay, so again, just like this, this is a special variable 45 00:02:18.256 --> 00:02:22.071 that we have access to in all functions. 46 00:02:22.071 --> 00:02:25.571 So let's say we want to call this function 47 00:02:27.482 --> 00:02:28.939 with three years. 48 00:02:28.939 --> 00:02:30.689 1990, 1999, and 1965. 49 00:02:35.476 --> 00:02:39.166 So let's see what happens now in the console. 50 00:02:39.166 --> 00:02:41.292 And now we have a small error here, 51 00:02:41.292 --> 00:02:45.385 but that's simply because I forgot the five here, okay? 52 00:02:45.385 --> 00:02:49.468 So again, and so this is the argument's variable. 53 00:02:50.870 --> 00:02:53.470 And we see that it actually looks a bit similar 54 00:02:53.470 --> 00:02:56.638 to an array, but in fact it is not an array. 55 00:02:56.638 --> 00:03:00.454 So it simply says object here, and not array, right? 56 00:03:00.454 --> 00:03:05.353 So all of the arrays have the array function constructure 57 00:03:05.353 --> 00:03:06.590 as they're prototype. 58 00:03:06.590 --> 00:03:07.959 Which is not the case here, 59 00:03:07.959 --> 00:03:10.943 and so arguments is not an array. 60 00:03:10.943 --> 00:03:13.183 We say that it's an array-like structure, 61 00:03:13.183 --> 00:03:15.455 but it's not really an array. 62 00:03:15.455 --> 00:03:17.600 So, if you wanna use it as an array, 63 00:03:17.600 --> 00:03:19.727 for example, to loop through it, 64 00:03:19.727 --> 00:03:22.383 then we need to first transform it to an array. 65 00:03:22.383 --> 00:03:24.898 And we already know how to do that 66 00:03:24.898 --> 00:03:27.231 with our little hack, right? 67 00:03:30.151 --> 00:03:32.234 And so we say var argsArr 68 00:03:36.236 --> 00:03:38.819 should be Array.prototype.slice 69 00:03:44.965 --> 00:03:47.965 and then call it with the arguments. 70 00:03:50.549 --> 00:03:54.548 Right, so that's what we did a couple lectures earlier. 71 00:03:54.548 --> 00:03:58.381 So now we're ready to loop through this array. 72 00:04:03.830 --> 00:04:05.886 And remember what we want to do here 73 00:04:05.886 --> 00:04:10.350 is to calculate if each person is of full age. 74 00:04:10.350 --> 00:04:12.017 So it's very simple. 75 00:04:12.984 --> 00:04:17.479 We of course need to create a callback function here, 76 00:04:17.479 --> 00:04:21.646 and we use current, and we wanna lock to the console. 77 00:04:23.246 --> 00:04:25.663 So 2016, or the current year, 78 00:04:27.411 --> 00:04:29.328 minus the current value 79 00:04:30.489 --> 00:04:32.822 is greater or equal than 18. 80 00:04:34.776 --> 00:04:35.847 And that's it. 81 00:04:35.847 --> 00:04:38.413 So remember, the current is of course 82 00:04:38.413 --> 00:04:41.031 the current element of the array. 83 00:04:41.031 --> 00:04:43.295 And the array comes from the arguments, 84 00:04:43.295 --> 00:04:46.574 so all of these numbers that we pass into the function, 85 00:04:46.574 --> 00:04:49.491 which are, in this case, our years. 86 00:04:51.195 --> 00:04:54.637 So with this, it's actually gonna work already. 87 00:04:54.637 --> 00:04:57.232 So let's check, and yeah, so it does work. 88 00:04:57.232 --> 00:04:58.915 So we have true, false, true. 89 00:04:58.915 --> 00:05:01.752 So the first person is of full age, 90 00:05:01.752 --> 00:05:04.593 this one born in 1999 is not, 91 00:05:04.593 --> 00:05:07.791 and this one is of full age too. 92 00:05:07.791 --> 00:05:10.798 So let's try it with a different number of arguments. 93 00:05:10.798 --> 00:05:13.016 So I'm gonna add two more years here, 94 00:05:13.016 --> 00:05:15.016 let's say 2016 and 1987, 95 00:05:18.316 --> 00:05:20.399 and let's check it again. 96 00:05:22.296 --> 00:05:25.101 And so, these are the first three coming from 97 00:05:25.101 --> 00:05:26.884 this function call. 98 00:05:26.884 --> 00:05:29.398 And these five here come of course from these. 99 00:05:29.398 --> 00:05:31.203 So we have true, false, true again, 100 00:05:31.203 --> 00:05:32.879 and then false, true. 101 00:05:32.879 --> 00:05:35.202 So this person, of course, is not of full age, 102 00:05:35.202 --> 00:05:36.970 and this one is. 103 00:05:36.970 --> 00:05:39.553 And if you wanted to add 100 arguments here, 104 00:05:39.553 --> 00:05:42.483 then it would work with 100 arguments of course. 105 00:05:42.483 --> 00:05:44.916 So this is how we do it in ES5, 106 00:05:44.916 --> 00:05:49.083 but let's now take a look at rest parameters in ES6. 107 00:05:50.819 --> 00:05:51.652 So, ES6. 108 00:05:54.652 --> 00:05:56.948 And we wanna write a similar function 109 00:05:56.948 --> 00:05:59.108 but make use of rest parameters. 110 00:05:59.108 --> 00:06:00.191 So isfullAge6 111 00:06:03.082 --> 00:06:06.508 and now, instead of not having any arguments 112 00:06:06.508 --> 00:06:09.851 we use the rest parameter operator. 113 00:06:09.851 --> 00:06:10.736 And as I mentioned before, 114 00:06:10.736 --> 00:06:12.952 it's the exact same as the spread operator. 115 00:06:12.952 --> 00:06:15.953 So again we have the three dots. 116 00:06:15.953 --> 00:06:19.605 And then we say the name of the variable. 117 00:06:19.605 --> 00:06:21.388 And so, what this is gonna do 118 00:06:21.388 --> 00:06:23.884 is as soon as we call the function, 119 00:06:23.884 --> 00:06:27.070 it will transform the arguments, 120 00:06:27.070 --> 00:06:30.583 for example, these three arguments or these five. 121 00:06:30.583 --> 00:06:33.066 It will transform them into an array 122 00:06:33.066 --> 00:06:35.458 and then pass it into this function. 123 00:06:35.458 --> 00:06:37.967 And we can then access that years array 124 00:06:37.967 --> 00:06:39.813 automatically in a function 125 00:06:39.813 --> 00:06:42.146 and use it as we did before. 126 00:06:43.081 --> 00:06:44.831 So let's do that now. 127 00:06:46.522 --> 00:06:50.790 So let me first do exactly the same that we did before. 128 00:06:50.790 --> 00:06:54.383 So I'm going to call the function. 129 00:06:54.383 --> 00:06:58.050 And I'll show you what the years looks like. 130 00:07:01.541 --> 00:07:05.291 Let's just deactivate this function call here 131 00:07:06.527 --> 00:07:08.629 and take a look at this. 132 00:07:08.629 --> 00:07:11.263 Alright, so, this is years, 133 00:07:11.263 --> 00:07:14.277 and now we see that this actually an array. 134 00:07:14.277 --> 00:07:16.423 So that is very handy, because now 135 00:07:16.423 --> 00:07:18.247 we don't have to do all of this, 136 00:07:18.247 --> 00:07:20.901 so we don't have to transform anything into an array 137 00:07:20.901 --> 00:07:23.663 because we already have the array. 138 00:07:23.663 --> 00:07:25.440 So now all we have to do 139 00:07:25.440 --> 00:07:29.149 is to do that console log that we did before. 140 00:07:29.149 --> 00:07:31.399 So we can say years.forEach 141 00:07:34.345 --> 00:07:38.844 and here again we're going to use the arrow function 142 00:07:38.844 --> 00:07:43.448 and say that we want 2016 minus the current year 143 00:07:43.448 --> 00:07:46.865 and check if it's greater or equal to 18. 144 00:07:48.098 --> 00:07:49.987 And here we go. 145 00:07:49.987 --> 00:07:52.091 So this is the same function as before 146 00:07:52.091 --> 00:07:54.587 but making use of rest parameters, 147 00:07:54.587 --> 00:07:59.353 which makes our code shorter and easier to read. 148 00:07:59.353 --> 00:08:02.305 And just to make sure that it works, 149 00:08:02.305 --> 00:08:03.851 okay, nothing happened. 150 00:08:03.851 --> 00:08:06.803 And that's of course because I forgot 151 00:08:06.803 --> 00:08:09.303 to write the console log here. 152 00:08:10.291 --> 00:08:12.828 So console.log of course, 153 00:08:12.828 --> 00:08:15.167 and now it's gonna work. 154 00:08:15.167 --> 00:08:17.667 So close it here, and alright. 155 00:08:19.005 --> 00:08:21.095 So true, false, true. 156 00:08:21.095 --> 00:08:23.429 And if we now add these numbers, 157 00:08:23.429 --> 00:08:25.310 these years that we had before, 158 00:08:25.310 --> 00:08:26.560 say 2016, 1987, 159 00:08:29.849 --> 00:08:33.336 then of course it works the exact same way. 160 00:08:33.336 --> 00:08:36.177 So the big difference between the spread operator 161 00:08:36.177 --> 00:08:37.790 and the rest parameters 162 00:08:37.790 --> 00:08:41.215 is actually the place in which we use each of them. 163 00:08:41.215 --> 00:08:45.052 So the spread operator is used in the function call. 164 00:08:45.052 --> 00:08:48.692 While the rest operator is used in the function declaration 165 00:08:48.692 --> 00:08:52.275 to exact an arbitrary number of parameters. 166 00:08:53.544 --> 00:08:56.960 So I hope that the difference between a spread operator 167 00:08:56.960 --> 00:09:00.719 and rest parameters is now crystal clear to you. 168 00:09:00.719 --> 00:09:03.965 So if it is, then let's take this one step further 169 00:09:03.965 --> 00:09:08.074 and make the rest parameters even more useful, okay? 170 00:09:08.074 --> 00:09:10.785 So, what I'm going to do now 171 00:09:10.785 --> 00:09:13.457 is to comment out this code and copy it. 172 00:09:13.457 --> 00:09:16.790 'Cause we're gonna do some changes here. 173 00:09:17.768 --> 00:09:19.768 So let me just copy this 174 00:09:21.280 --> 00:09:23.080 and put it back here. 175 00:09:23.080 --> 00:09:24.951 Because now what we want to change 176 00:09:24.951 --> 00:09:28.120 is to accept another parameter which will act 177 00:09:28.120 --> 00:09:29.407 as the age limit. 178 00:09:29.407 --> 00:09:31.470 So instead of having the 18 here, 179 00:09:31.470 --> 00:09:34.591 we will pass a parameter which is going to tell us 180 00:09:34.591 --> 00:09:38.091 at which age a person becomes full of age. 181 00:09:39.776 --> 00:09:42.208 So imagine it would be 21 in some countries 182 00:09:42.208 --> 00:09:45.030 then we would need the 21 here. 183 00:09:45.030 --> 00:09:47.113 So we simply add a limit, 184 00:09:48.454 --> 00:09:50.940 and now we need to add a parameter in here 185 00:09:50.940 --> 00:09:53.952 because it's only one parameter 186 00:09:53.952 --> 00:09:56.205 and it's one that we really know we need. 187 00:09:56.205 --> 00:09:59.455 So we need one and only one limit here. 188 00:10:00.385 --> 00:10:03.194 Now the problem is that this limit here 189 00:10:03.194 --> 00:10:06.300 will also be part of the arguments, right? 190 00:10:06.300 --> 00:10:09.569 So imagine that we now call this function 191 00:10:09.569 --> 00:10:12.690 with, let's say 21 here as the limit. 192 00:10:12.690 --> 00:10:14.931 Then this will obviously also be part 193 00:10:14.931 --> 00:10:16.899 of the arguments keyword 194 00:10:16.899 --> 00:10:18.584 which is not what we want, of course. 195 00:10:18.584 --> 00:10:22.451 Because here, in this argument and in this array, 196 00:10:22.451 --> 00:10:25.586 we actually only want years. 197 00:10:25.586 --> 00:10:28.368 And how would we do that here in ES5, 198 00:10:28.368 --> 00:10:30.179 it's actually pretty simple 199 00:10:30.179 --> 00:10:34.631 because this slice method here can help us with that. 200 00:10:34.631 --> 00:10:37.469 Because remember what the slice method here does, 201 00:10:37.469 --> 00:10:40.605 is to allow us to cut a piece of an array. 202 00:10:40.605 --> 00:10:43.949 So if we now simply add the number one 203 00:10:43.949 --> 00:10:47.548 what this means, is that it's going to start cutting 204 00:10:47.548 --> 00:10:49.045 at position number one. 205 00:10:49.045 --> 00:10:53.212 Or basically, it will start to copy part of the array. 206 00:10:54.117 --> 00:10:57.333 Or in other words, at position one it will start 207 00:10:57.333 --> 00:11:00.702 to, let's say, to copy our array. 208 00:11:00.702 --> 00:11:04.869 And so like this we can exclude the first argument. 209 00:11:05.816 --> 00:11:07.585 So to make this more clear, 210 00:11:07.585 --> 00:11:11.002 let's again take a look at the arguments. 211 00:11:12.858 --> 00:11:15.025 And then let's console log 212 00:11:17.089 --> 00:11:19.172 also the arguments array. 213 00:11:24.111 --> 00:11:27.278 Okay, so we have 21, 1990, 1999, 1965, 214 00:11:29.019 --> 00:11:31.602 which are all of the arguments that we pass. 215 00:11:31.602 --> 00:11:33.779 And then our arguments array 216 00:11:33.779 --> 00:11:36.298 is the same thing but without the 21. 217 00:11:36.298 --> 00:11:38.851 And that's because we only started copying 218 00:11:38.851 --> 00:11:40.371 at position number one. 219 00:11:40.371 --> 00:11:43.860 So, in here, so, one, two and three. 220 00:11:43.860 --> 00:11:45.892 So that's what the slice function does. 221 00:11:45.892 --> 00:11:48.604 And so we can handle, let's say, 222 00:11:48.604 --> 00:11:52.771 a usual parameter plus a number of arbitrary parameters 223 00:11:53.889 --> 00:11:56.745 which are in case these three. 224 00:11:56.745 --> 00:11:58.033 Then all we have to do, is to here 225 00:11:58.033 --> 00:11:59.616 change it to limit. 226 00:12:02.196 --> 00:12:03.946 And we're good to go. 227 00:12:06.811 --> 00:12:10.644 So now we don't need this console.log anymore. 228 00:12:11.673 --> 00:12:13.699 And so here we have true, false, true. 229 00:12:13.699 --> 00:12:15.321 Such as we had before. 230 00:12:15.321 --> 00:12:19.154 But now suppose that the age limit would be 16 231 00:12:20.504 --> 00:12:23.005 then all of them would be of full age 232 00:12:23.005 --> 00:12:25.255 so we had three times true. 233 00:12:26.334 --> 00:12:30.847 So you see, adding an argument here to our ES5 function 234 00:12:30.847 --> 00:12:33.046 makes it even more complicated. 235 00:12:33.046 --> 00:12:35.294 But in ES6, it's nothing like that. 236 00:12:35.294 --> 00:12:38.903 All we have to do is to add the limit, 237 00:12:38.903 --> 00:12:41.822 and then here we have our rest parameters. 238 00:12:41.822 --> 00:12:44.934 So this makes it very clear and very easy to use. 239 00:12:44.934 --> 00:12:47.448 Because there's nothing we have to change. 240 00:12:47.448 --> 00:12:48.649 So all we have to do, of course, 241 00:12:48.649 --> 00:12:50.845 is to change this to a limit. 242 00:12:50.845 --> 00:12:52.370 And now we're good to go. 243 00:12:52.370 --> 00:12:55.494 And we could add as many parameters here as we wanted. 244 00:12:55.494 --> 00:12:57.126 And then say with this part here 245 00:12:57.126 --> 00:13:01.611 that here we have an undetermined number of arguments. 246 00:13:01.611 --> 00:13:03.694 So if you now add 16 here 247 00:13:05.630 --> 00:13:07.297 and get rid of this, 248 00:13:08.936 --> 00:13:10.802 then we have true, true, true, true, false, true. 249 00:13:10.802 --> 00:13:12.703 So it's different than before. 250 00:13:12.703 --> 00:13:14.620 And of course it works. 251 00:13:15.825 --> 00:13:19.441 So as you see by now many of the features of ES6 252 00:13:19.441 --> 00:13:21.349 are simply allow us to do things 253 00:13:21.349 --> 00:13:23.168 that we can already in ES5, 254 00:13:23.168 --> 00:13:26.266 but in a much better, quicker, and easier way. 255 00:13:26.266 --> 00:13:29.569 And this is, of course, one of these new features 256 00:13:29.569 --> 00:13:32.280 that doesn't allow us to do anything really new, 257 00:13:32.280 --> 00:13:36.281 but simply allows us to do something in a better way. 258 00:13:36.281 --> 00:13:39.416 Alright, so let's now quickly move on 259 00:13:39.416 --> 00:13:41.440 to the second lecture about parameters, 260 00:13:41.440 --> 00:13:43.773 which is default parameters.