1 00:00:02,280 --> 00:00:05,200 Now, let's stick to functions for the moment. 2 00:00:05,200 --> 00:00:09,704 And let's add another function here in this functions JS 3 00:00:09,704 --> 00:00:13,260 file. This is a function which I'll name some up. 4 00:00:13,260 --> 00:00:17,780 And the idea is that this function takes a list of numbers 5 00:00:17,780 --> 00:00:19,263 and adds them all together. 6 00:00:20,870 --> 00:00:22,100 Now, for this, of course, 7 00:00:22,100 --> 00:00:26,617 we could accept multiple numbers as parameters like nun one 8 00:00:26,617 --> 00:00:29,600 nun two and numb three. 9 00:00:29,600 --> 00:00:34,410 And then we could return nun one plus numb two plus numb 10 00:00:34,410 --> 00:00:35,570 three. 11 00:00:35,570 --> 00:00:36,580 This would work, 12 00:00:36,580 --> 00:00:40,290 but this function has one important limitation. 13 00:00:40,290 --> 00:00:43,300 It only accepts three numbers. 14 00:00:43,300 --> 00:00:46,760 And actually it wants exactly three numbers. 15 00:00:46,760 --> 00:00:51,260 We can't call dysfunction with two numbers only if I would 16 00:00:51,260 --> 00:00:54,946 do that. And I then console lock the result of doing that. 17 00:00:54,946 --> 00:00:59,020 If I call this function with just the numbers one and two, 18 00:00:59,020 --> 00:01:01,300 instead of three numbers, 19 00:01:01,300 --> 00:01:05,530 then you will see that if we execute this file, 20 00:01:05,530 --> 00:01:09,523 we get this N a N value down there. 21 00:01:10,550 --> 00:01:14,500 N a N is a special value in Java script. 22 00:01:14,500 --> 00:01:17,920 Just like undefined is a special value, 23 00:01:17,920 --> 00:01:21,763 which is built into JavaScript and stands for not a number. 24 00:01:23,720 --> 00:01:27,960 And we get that because I'm only passing in two values here 25 00:01:27,960 --> 00:01:30,503 when three values are expected. 26 00:01:31,340 --> 00:01:32,351 Now, 27 00:01:32,351 --> 00:01:35,000 what did you learn about parameters that don't receive a 28 00:01:35,000 --> 00:01:36,560 value? 29 00:01:36,560 --> 00:01:40,423 They have undefined as a default value. 30 00:01:42,410 --> 00:01:45,580 So when we then add all those numbers together, 31 00:01:45,580 --> 00:01:50,340 the third number here actually will have no special value. 32 00:01:50,340 --> 00:01:54,324 Instead it will be undefined. And if you add undefined, 33 00:01:54,324 --> 00:01:58,870 there's special value that's known by JavaScript to some 34 00:01:58,870 --> 00:01:59,850 numbers, 35 00:01:59,850 --> 00:02:03,530 JavaScript can't do this in a mathematical way because 36 00:02:03,530 --> 00:02:05,290 undefined is not a number. 37 00:02:05,290 --> 00:02:08,449 And hence you get this not a number result because 38 00:02:08,449 --> 00:02:11,363 JavaScript is not able to derive a number. 39 00:02:12,870 --> 00:02:16,833 Now we could solve this with some default value, like zero, 40 00:02:17,700 --> 00:02:20,110 in which case we could execute this code. 41 00:02:20,110 --> 00:02:24,090 And we now get three as a result here because now 42 00:02:24,090 --> 00:02:24,923 nun three 43 00:02:24,923 --> 00:02:27,370 will be zero if it's not set, 44 00:02:27,370 --> 00:02:31,160 but still this function is not really flexible because it 45 00:02:31,160 --> 00:02:35,150 needs at least two arguments to parameter values to work 46 00:02:35,150 --> 00:02:38,280 correctly and at most three. 47 00:02:38,280 --> 00:02:39,270 Now, 48 00:02:39,270 --> 00:02:42,140 what if your goal would be to make that function work with 49 00:02:42,140 --> 00:02:45,380 any amount of numbers now for that, 50 00:02:45,380 --> 00:02:49,149 we could rewrite it and not accept a couple of separate 51 00:02:49,149 --> 00:02:51,130 parameter values, 52 00:02:51,130 --> 00:02:54,770 but instead we could accept an array of numbers. 53 00:02:54,770 --> 00:02:59,770 So that'd be call sum up with an array as a value here, 54 00:02:59,770 --> 00:03:01,981 created with the square brackets, 55 00:03:01,981 --> 00:03:05,770 where we can have as many numbers as we want. 56 00:03:05,770 --> 00:03:09,980 And then we could rewrite the logic here in this function to 57 00:03:09,980 --> 00:03:13,900 create a helper variable result, 58 00:03:13,900 --> 00:03:17,420 and then loop through all the numbers here. 59 00:03:17,420 --> 00:03:22,410 As we learned it with four off and simply add the numbers to 60 00:03:22,410 --> 00:03:26,680 result may be here with this shortcut operator, 61 00:03:26,680 --> 00:03:31,123 which is just a short forms for saying result plus number 62 00:03:32,610 --> 00:03:33,443 like this. 63 00:03:34,600 --> 00:03:37,593 And then we returned result in the end here. 64 00:03:38,485 --> 00:03:41,130 We could write it like this. 65 00:03:41,130 --> 00:03:46,130 And if we do that and we then execute this file, 66 00:03:47,060 --> 00:03:51,053 I get to 27 as a result here, which is the correct result. 67 00:03:52,120 --> 00:03:55,293 And that would be a fine way of writing such a function. 68 00:03:56,140 --> 00:04:00,390 But JavaScript also gives you another way of writing 69 00:04:00,390 --> 00:04:04,340 functions that take a multiple values instead of just one or 70 00:04:04,340 --> 00:04:09,130 two values that you can use in situations where you don't 71 00:04:09,130 --> 00:04:12,810 have an array to pass to disfunction and where you don't 72 00:04:12,810 --> 00:04:14,350 want to create one, 73 00:04:14,350 --> 00:04:16,892 just to be able to call this function correctly, 74 00:04:17,959 --> 00:04:19,600 which might sound a bit abstract, 75 00:04:19,600 --> 00:04:23,542 but the more complex your JavaScript programs get, 76 00:04:23,542 --> 00:04:28,542 the more kind of cases you'll encounter in those programs. 77 00:04:28,690 --> 00:04:32,300 And it's not unrealistic that you might have some place in a 78 00:04:32,300 --> 00:04:36,530 program where you want to call a function with a couple of 79 00:04:36,530 --> 00:04:37,730 parameters, 80 00:04:37,730 --> 00:04:41,660 and you don't want to wrap those parameters into an array. 81 00:04:41,660 --> 00:04:44,763 First adjust to be able to call that function. 82 00:04:45,840 --> 00:04:46,673 Instead, 83 00:04:46,673 --> 00:04:49,620 you might want to prefer to be able to call this function 84 00:04:49,620 --> 00:04:53,410 like this with just a list of numbers, 85 00:04:53,410 --> 00:04:57,487 a list of parameter values, instead of one parameter value, 86 00:04:57,487 --> 00:04:59,090 that's an array. 87 00:04:59,090 --> 00:05:02,130 And you want to be able to call this function with four 88 00:05:03,661 --> 00:05:06,890 values or five values or even six values. 89 00:05:06,890 --> 00:05:11,720 You want that flexibility and JavaScript gives you that 90 00:05:11,720 --> 00:05:16,490 flexibility with another feature that's called rest 91 00:05:16,490 --> 00:05:21,490 parameters or rest arguments in your function definition. 92 00:05:22,310 --> 00:05:25,770 Here, you can add three dots in front of 93 00:05:25,770 --> 00:05:27,930 your parameter name. 94 00:05:27,930 --> 00:05:32,410 That is a special operator built into JavaScript, 95 00:05:32,410 --> 00:05:35,890 which might look a bit weird and which we actually will see 96 00:05:35,890 --> 00:05:38,600 again later in a different context. 97 00:05:38,600 --> 00:05:42,410 But if you use it here in the parameter list off a function 98 00:05:42,410 --> 00:05:43,490 definition, 99 00:05:43,490 --> 00:05:48,490 then this operator says that disfunction accepts any amount 100 00:05:48,690 --> 00:05:52,350 of parameters. One parameter 2, 3, 5, 101 00:05:52,350 --> 00:05:54,330 there is no fixed limit. 102 00:05:54,330 --> 00:05:58,190 And that all those parameters which are passed in separated 103 00:05:58,190 --> 00:06:02,700 by a comma will then be merged into an array behind the 104 00:06:02,700 --> 00:06:04,293 scenes by JavaScript. 105 00:06:05,530 --> 00:06:09,730 Hence numbers inside of this function will still be an 106 00:06:09,730 --> 00:06:11,050 array, 107 00:06:11,050 --> 00:06:15,380 but we don't need to provide a finished array as a parameter 108 00:06:15,380 --> 00:06:17,330 value to sum up. 109 00:06:17,330 --> 00:06:18,163 Instead, 110 00:06:18,163 --> 00:06:22,650 we can pass a comma separated list and thanks to these three 111 00:06:22,650 --> 00:06:27,020 dots that will be wrapped into an array by JavaScript under 112 00:06:27,020 --> 00:06:27,853 the hood. 113 00:06:29,150 --> 00:06:30,140 Hence with that, 114 00:06:30,140 --> 00:06:33,020 we can now adjust to code to look like this. 115 00:06:33,020 --> 00:06:35,830 And if I then execute this file, 116 00:06:35,830 --> 00:06:40,830 I get a valid result here because of this rest parameters 117 00:06:41,070 --> 00:06:42,063 feature here. 118 00:06:43,040 --> 00:06:45,230 Again, it's simply an alternative. 119 00:06:45,230 --> 00:06:48,580 We could have wrapped that lists of values into an array 120 00:06:48,580 --> 00:06:53,120 ourselves, and then just accept that one array value. 121 00:06:53,120 --> 00:06:57,110 But it's good to have that extra flexibility where you can 122 00:06:57,110 --> 00:07:00,910 write functions that take a dynamic amount of values so that 123 00:07:00,910 --> 00:07:04,880 you don't need to necessarily wrap your values into an array 124 00:07:04,880 --> 00:07:06,243 on your own, first. 125 00:07:07,290 --> 00:07:12,110 Now relate it to this rest parameters feature year and 126 00:07:12,110 --> 00:07:14,600 two, this three dots operator. 127 00:07:14,600 --> 00:07:17,310 We also have a number of place where we can use this 128 00:07:17,310 --> 00:07:22,130 operator to basically do the opposite of what it does here 129 00:07:22,130 --> 00:07:22,963 for that, 130 00:07:22,963 --> 00:07:25,950 keep in mind that here in this function definition, 131 00:07:25,950 --> 00:07:29,570 when using the three dots operator in this parameter list, 132 00:07:29,570 --> 00:07:34,120 it will emerge a list of individual values to gather into an 133 00:07:34,120 --> 00:07:35,780 array. 134 00:07:35,780 --> 00:07:39,060 Now, let's say in the program, which we have, 135 00:07:39,060 --> 00:07:40,820 we have some data source, 136 00:07:40,820 --> 00:07:45,820 maybe some database where we get some input numbers as an 137 00:07:46,870 --> 00:07:47,703 array. 138 00:07:48,870 --> 00:07:52,300 So here I have the number list again, but now again, 139 00:07:52,300 --> 00:07:53,883 merged into an array. 140 00:07:54,900 --> 00:07:56,700 And then we have to sum up function, 141 00:07:56,700 --> 00:07:58,560 which is written like this. 142 00:07:58,560 --> 00:08:01,830 And it explicitly wants a list of values, 143 00:08:01,830 --> 00:08:05,720 a list of parameters instead of a single value. 144 00:08:05,720 --> 00:08:09,300 So some up here doesn't want an array. 145 00:08:09,300 --> 00:08:14,100 If I pass my input numbers array into sum up, nonetheless, 146 00:08:14,100 --> 00:08:18,010 you will note that if we execute this file, 147 00:08:18,010 --> 00:08:21,260 we get an unexpected result here. 148 00:08:21,260 --> 00:08:24,583 It's not adding these numbers mathematically. 149 00:08:25,460 --> 00:08:29,500 And the reason for that is that sum up is written such that 150 00:08:29,500 --> 00:08:32,159 it wants a list of values, 151 00:08:32,159 --> 00:08:36,010 but it gets a single value which holds an array. 152 00:08:36,010 --> 00:08:39,559 And JavaScript does not check if that is an array. 153 00:08:39,559 --> 00:08:42,909 And it should then maybe split that up into a list of 154 00:08:42,909 --> 00:08:43,890 values. 155 00:08:43,890 --> 00:08:47,670 Instead it expects a list of values and it doesn't get one. 156 00:08:47,670 --> 00:08:50,133 Hence you get an unexpected result. 157 00:08:51,040 --> 00:08:53,000 Now what you need to do here, 158 00:08:53,000 --> 00:08:56,480 if you have such a sum-up function that wants a list of 159 00:08:56,480 --> 00:08:57,313 values, 160 00:08:57,313 --> 00:09:02,120 instead of a single array is you need to convert that array, 161 00:09:02,120 --> 00:09:04,923 back into a list of single values. 162 00:09:05,930 --> 00:09:07,220 Now, of course you could say, 163 00:09:07,220 --> 00:09:10,178 why don't we just write to function such that we do want a 164 00:09:10,178 --> 00:09:13,340 single array value like this? 165 00:09:13,340 --> 00:09:15,640 And the answer would be yes, of course, 166 00:09:15,640 --> 00:09:19,320 for this dummy example, that would be the easiest solution, 167 00:09:19,320 --> 00:09:22,610 but in more complex applications and programs, 168 00:09:22,610 --> 00:09:26,940 which you inevitably will see at some point as a developer, 169 00:09:26,940 --> 00:09:30,340 you will simply sometimes have functions that are not 170 00:09:30,340 --> 00:09:33,480 written in the way that you can directly use them like this, 171 00:09:33,480 --> 00:09:36,540 because you might be using them in different places of your 172 00:09:36,540 --> 00:09:37,373 code. 173 00:09:37,373 --> 00:09:40,680 And in every place you might get different kinds of input 174 00:09:40,680 --> 00:09:42,210 values. 175 00:09:42,210 --> 00:09:45,750 So you very well might have a function that wants a list of 176 00:09:45,750 --> 00:09:48,660 numbers. Even though in this exact scenario here, 177 00:09:48,660 --> 00:09:50,720 you have a single array of numbers 178 00:09:52,840 --> 00:09:55,490 and therefore to easily then convert such an 179 00:09:55,490 --> 00:09:56,340 array of numbers 180 00:09:56,340 --> 00:10:00,710 to a list of numbers. You also can use the three dots again, 181 00:10:00,710 --> 00:10:04,473 but now not in the function definition, parameter list, 182 00:10:04,473 --> 00:10:09,260 but instead in the place where such a list of numbers is 183 00:10:09,260 --> 00:10:11,310 expected. So here, 184 00:10:11,310 --> 00:10:16,150 when I call some up and I'm passing into concrete values 185 00:10:16,150 --> 00:10:20,750 that should be passed and provided to that function here in 186 00:10:20,750 --> 00:10:25,270 such a place where you're not in a function definition, 187 00:10:25,270 --> 00:10:29,423 but instead in a place where concrete values are needed, 188 00:10:29,423 --> 00:10:34,300 the three dots here are known as the so-called spread 189 00:10:34,300 --> 00:10:35,470 operator, 190 00:10:35,470 --> 00:10:40,200 because you spread an array out into multiple individual 191 00:10:40,200 --> 00:10:41,770 values. 192 00:10:41,770 --> 00:10:46,230 You pull out all the values in that array and provide them 193 00:10:46,230 --> 00:10:51,050 as standalone values to sum up that's what the three dots do 194 00:10:51,050 --> 00:10:52,640 in this place. 195 00:10:52,640 --> 00:10:54,820 It removes the square brackets. 196 00:10:54,820 --> 00:10:58,260 If you want to say like that, and hence, 197 00:10:58,260 --> 00:11:03,260 if you now save this and you then execute this file again 198 00:11:04,210 --> 00:11:06,440 here, then you again, 199 00:11:06,440 --> 00:11:10,990 get the expected number as a result because now a list of 200 00:11:10,990 --> 00:11:13,163 individual numbers is passed in. 201 00:11:14,500 --> 00:11:18,700 And I am fully aware that this is a bit more advanced and 202 00:11:18,700 --> 00:11:21,210 can be tricky to wrap your head around. 203 00:11:21,210 --> 00:11:24,930 If you only see a simply example like this one, 204 00:11:24,930 --> 00:11:27,660 but the idea of the simple example of course, 205 00:11:27,660 --> 00:11:32,660 is to show you how these operators, these three dots work. 206 00:11:33,200 --> 00:11:37,180 We'll see them again in certain parts of this course. 207 00:11:37,180 --> 00:11:40,830 And that's why I wanted to introduce them early so that you 208 00:11:40,830 --> 00:11:45,770 know how these operators work when you see them later again 209 00:11:45,770 --> 00:11:48,420 for the moment, that's it about these operators though, 210 00:11:48,420 --> 00:11:52,620 but the rest parameters and dispread operator, 211 00:11:52,620 --> 00:11:55,503 these are features you should keep in mind.