1 00:00:02,050 --> 00:00:07,480 Now that we had a look at an important feature, default arguments, which helps us with writing more flexible 2 00:00:07,480 --> 00:00:08,520 functions, 3 00:00:08,530 --> 00:00:14,080 let's have a look at another feature, not really related to our game here to be honest but related to 4 00:00:14,080 --> 00:00:19,340 functions. So I'll add a brand new function here at the bottom of the file 5 00:00:19,390 --> 00:00:25,880 since it is, as mentioned, not related to the game and the function here can again be created with one 6 00:00:25,880 --> 00:00:27,470 of the three syntaxes you learned, 7 00:00:27,470 --> 00:00:28,720 doesn't matter which one you use, 8 00:00:28,730 --> 00:00:29,720 I'll go for the arrow 9 00:00:29,720 --> 00:00:33,300 function and I'll name it sum up. 10 00:00:33,350 --> 00:00:40,390 Now my idea here is that we can pass in as many arguments as we want and build a sum for those, so not 11 00:00:40,390 --> 00:00:40,920 an array 12 00:00:40,930 --> 00:00:42,960 but as many arguments as we want. 13 00:00:43,120 --> 00:00:49,630 So here I want to have like a, b, c, d but I want to have an infinite amount of arguments here, 14 00:00:49,660 --> 00:00:53,080 that's my idea and you can see where the problem lies, 15 00:00:53,080 --> 00:00:58,870 I can't know when I'm writing this code with how many arguments this function will be called. 16 00:00:58,870 --> 00:01:02,280 Well obviously, I will know if I'm the one calling it here 17 00:01:02,380 --> 00:01:03,940 but let's say this is more dynamic, 18 00:01:03,940 --> 00:01:06,940 it's done inside of a loop which is based on some user input. 19 00:01:07,030 --> 00:01:11,200 So anything where we can't fully control how often that will be called. 20 00:01:11,200 --> 00:01:13,200 So here I will call it myself in the code 21 00:01:13,210 --> 00:01:18,130 but again let's assume I'm not the one calling it like this but instead, we wrote some code where this 22 00:01:18,130 --> 00:01:21,280 is called dynamically with a different amount of arguments. 23 00:01:21,460 --> 00:01:28,330 So we could be calling this with 1, 5, 10, -3, 6, 10 and so on 24 00:01:28,390 --> 00:01:34,090 but I also want to be able to call it with an extra argument or with two extra arguments, something like 25 00:01:34,090 --> 00:01:34,690 this. 26 00:01:34,690 --> 00:01:38,500 So this should be flexible regarding the amount of arguments it gets. 27 00:01:38,770 --> 00:01:45,400 Now you could think well since Javascript is forgiving and we can have more parameters than we need, 28 00:01:45,790 --> 00:01:50,860 we can of course build this function with a lot of parameters in mind and hope that it never gets called 29 00:01:50,860 --> 00:01:52,370 with more than that. 30 00:01:52,480 --> 00:01:58,320 Well hope is never something you should rely on and in addition, you still might run into problems where 31 00:01:58,330 --> 00:02:04,600 all unused parameters are undefined and if you then use this in some mathematical calculation, you will 32 00:02:04,600 --> 00:02:09,100 probably get incorrect results or not a number as a result, 33 00:02:09,100 --> 00:02:10,910 so this is not really a great solution. 34 00:02:11,800 --> 00:02:16,900 Well another solution would be to simply force the user to pass in an array, right, something like this. 35 00:02:17,170 --> 00:02:18,370 Numbers is an array, 36 00:02:18,370 --> 00:02:20,320 now here we pass an array, here 37 00:02:20,320 --> 00:02:22,630 I don't but I'll just comment this out for now 38 00:02:22,630 --> 00:02:30,190 and now we can use a loop here, build a sum, start at zero, use a loop where we go through all the numbers 39 00:02:30,190 --> 00:02:30,810 here, 40 00:02:30,850 --> 00:02:37,810 the good old for/of loop you learned about and then simply add each number to the sum and in the 41 00:02:37,810 --> 00:02:40,180 end, we simply return the sum here. 42 00:02:40,180 --> 00:02:45,910 Now we have a sum up function and if we give that a try and we console log the result of calling that 43 00:02:45,910 --> 00:02:54,190 function here, save that and reload and also avoid this syntax error and use a semicolon instead of 44 00:02:54,190 --> 00:03:02,640 a comma, important. So save that and reload, we get 29 here, which is the sum of these numbers like 45 00:03:02,640 --> 00:03:06,970 6, 16, 13, 19, 29. 46 00:03:07,140 --> 00:03:10,760 So this works and of course, you could kind of implement it like this. 47 00:03:10,890 --> 00:03:15,180 Now the thing is not in all Javascript programs you're going to write 48 00:03:15,180 --> 00:03:17,880 you might be fine with a solution like this, 49 00:03:17,880 --> 00:03:24,120 maybe you really want to allow that the function is called with multiple arguments, for whatever reason 50 00:03:24,120 --> 00:03:28,910 that may be but you want to make sure that this is the case. In such a case, 51 00:03:28,920 --> 00:03:32,420 you can call the so-called rest operator. 52 00:03:32,610 --> 00:03:38,040 It looks like the spread operator which I showed to you in the behind the scenes module, you add three 53 00:03:38,040 --> 00:03:43,440 dots but the place where you use that operator is different from the spread operator. 54 00:03:43,440 --> 00:03:49,410 You might remember that spread operator was used when you created an object or when you created an array 55 00:03:49,680 --> 00:03:55,620 and then you could use the three dots in there to take an existing object or an existing array and pull 56 00:03:55,620 --> 00:04:01,860 out all the key-value pairs or all the elements of the array and add them to the new object or new array. 57 00:04:01,870 --> 00:04:04,200 Now here we use the three dots in a different place, 58 00:04:04,200 --> 00:04:09,900 we use it in a parameter list and there in such a function parameter list, it does something different. 59 00:04:10,680 --> 00:04:16,000 Instead of pulling elements out of an array, here it takes all arguments 60 00:04:16,020 --> 00:04:19,290 this function gets and that might be as many as you want 61 00:04:19,290 --> 00:04:21,120 and it merges them into an array, 62 00:04:21,150 --> 00:04:24,150 so it builds an array here inside of the function. 63 00:04:24,420 --> 00:04:30,960 So now you can call the function without passing an array by having real different arguments but they're 64 00:04:30,960 --> 00:04:35,520 getting merged into an array inside of the function, which you of course don't see when you just call the 65 00:04:35,520 --> 00:04:39,860 function and then we can work with that array and in this case, return our sum. 66 00:04:39,900 --> 00:04:43,440 So now we can also call this function like this, 67 00:04:43,440 --> 00:04:47,540 so with these two lines of code I have here at the bottom. This will now work, 68 00:04:47,550 --> 00:04:53,430 if we save and reload and we get 29 and 142 as sums because of that rest 69 00:04:53,490 --> 00:04:58,920 operator which is really really useful therefore since it gives you more flexibility when you're writing 70 00:04:58,920 --> 00:05:05,330 your functions. Now one important note about the rest operator, it always has to be the last argument 71 00:05:05,330 --> 00:05:06,220 in your list, 72 00:05:06,230 --> 00:05:12,250 for example if you expect another argument a here, well then a can never be passed in right 73 00:05:12,260 --> 00:05:16,700 because this always consumes all arguments and merges them together in an array. 74 00:05:16,730 --> 00:05:22,250 So if you would have arguments after an argument which uses the rest operator, you can never reach that 75 00:05:22,280 --> 00:05:22,760 argument. 76 00:05:23,210 --> 00:05:29,290 So here, we even get an error therefore, rest parameter must be last formal parameter for this exact reason 77 00:05:29,300 --> 00:05:30,830 so this is not allowed. 78 00:05:30,830 --> 00:05:37,580 You also can only have one parameter, one rest parameter I mean because for the same reason, this automatically 79 00:05:37,580 --> 00:05:39,440 merges all arguments together 80 00:05:39,560 --> 00:05:42,920 so there is no room for a second rest parameter. 81 00:05:42,920 --> 00:05:46,420 What you can have though is parameters in front of this, 82 00:05:46,580 --> 00:05:52,490 a for example and b and whatever you want because that simply means that the first two arguments in 83 00:05:52,490 --> 00:06:00,870 this case, 1 for a and 5 for b will be assigned to these parameters and only all the other arguments 84 00:06:00,870 --> 00:06:03,950 or parameters thereafter will be merged together. 85 00:06:03,950 --> 00:06:09,110 So if we do that, now a and b will be excluded from the calculation and therefore if we run this, we get 86 00:06:09,110 --> 00:06:15,200 different results than before, to be precise the same result as before, - 6 because 1 + five 87 00:06:15,200 --> 00:06:20,570 is 6 because that's now not included in the calculation because it's not included in the numbers array. 88 00:06:20,750 --> 00:06:23,800 So you really got a lot of flexibility here with the rest 89 00:06:23,810 --> 00:06:24,810 operator. 90 00:06:25,090 --> 00:06:28,930 Now a little side note, when not using an arrow function, 91 00:06:28,940 --> 00:06:34,450 so when using a function keyword, so let's say we build a subtract up function and now I build it with the 92 00:06:34,450 --> 00:06:37,030 function keyword, then you can also use the rest 93 00:06:37,030 --> 00:06:41,020 operator there, nothing wrong with that, you can build it in the exact same way as you do with the arrow 94 00:06:41,020 --> 00:06:45,160 function but here, you actually also have another way of building this. 95 00:06:45,160 --> 00:06:47,110 So let me copy that code 96 00:06:47,650 --> 00:06:51,300 but of course here now I subtract all the values, 97 00:06:51,320 --> 00:06:54,050 so that's the difference between the two functions 98 00:06:54,050 --> 00:07:04,840 and now let me call this, so subtract up and here I have 1, 10, 15, 20, something like this. 99 00:07:04,840 --> 00:07:07,380 Well now of course it would fail because numbers here, 100 00:07:07,390 --> 00:07:13,780 what we're looking for, will not be defined. Previously this was our rest argument, our automatically generated 101 00:07:13,780 --> 00:07:14,070 array, 102 00:07:14,080 --> 00:07:15,670 here it's missing. 103 00:07:15,670 --> 00:07:20,760 So therefore now unsurprisingly if I reload, we'll get a little error here. 104 00:07:20,790 --> 00:07:25,470 Now you can of course as I just explained use the rest parameter here just as you did it in the arrow 105 00:07:25,470 --> 00:07:26,240 function 106 00:07:26,340 --> 00:07:30,040 and if you do so, everything will be fine, we can reload and it works 107 00:07:30,240 --> 00:07:32,600 but now and that's the blast from the past thing, 108 00:07:32,730 --> 00:07:36,780 we can also use something different. In functions created with the function keyword, 109 00:07:36,840 --> 00:07:42,360 you have a special variable available which you never define, which you don't accept as an argument but 110 00:07:42,360 --> 00:07:43,940 which is just magically there 111 00:07:43,950 --> 00:07:50,940 so to say and that's the arguments variable. Arguments as you see is already marked as a keyword because 112 00:07:50,940 --> 00:07:56,340 it's built into Javascript, you can use it inside of functions but only inside of functions that use 113 00:07:56,340 --> 00:07:57,610 the function keyword 114 00:07:57,720 --> 00:08:05,220 and it gives you an array-like object, not a true array but array-like with all the arguments this function 115 00:08:05,220 --> 00:08:10,700 got. So before the rest operator was introduced which happened with ES6, 116 00:08:10,800 --> 00:08:13,740 this was the way of building a function like this one, 117 00:08:13,740 --> 00:08:16,590 so this was then the automatically merged array. 118 00:08:16,620 --> 00:08:22,200 So if I now save this, this runs again with -46 as a result, 119 00:08:22,200 --> 00:08:24,760 so this is an alternative to using the rest operator. 120 00:08:24,810 --> 00:08:30,120 That being said, using the rest parameter is recommended because this is always a bit strange to have 121 00:08:30,120 --> 00:08:36,020 this magic arguments thing coming out of nowhere and it's much cleaner to define this rest parameter. 122 00:08:36,180 --> 00:08:41,310 So whilst this does work, no matter if you're using the function keyword or not, you should always use 123 00:08:41,580 --> 00:08:42,930 the rest operator, 124 00:08:42,930 --> 00:08:45,480 so don't use that. 125 00:08:45,810 --> 00:08:50,070 Just wanted to show it to you because you will find it in some Javascript snippets you might be looking 126 00:08:50,070 --> 00:08:55,020 at and it was the only way of achieving this before this rest operator was introduced.