Now, let's stick to functions for the moment.
And let's add another function here in this functions JS
file. This is a function which I'll name some up.
And the idea is that this function takes a list of numbers
and adds them all together.
Now, for this, of course,
we could accept multiple numbers as parameters like nun one
nun two and numb three.
And then we could return nun one plus numb two plus numb
three.
This would work,
but this function has one important limitation.
It only accepts three numbers.
And actually it wants exactly three numbers.
We can't call dysfunction with two numbers only if I would
do that. And I then console lock the result of doing that.
If I call this function with just the numbers one and two,
instead of three numbers,
then you will see that if we execute this file,
we get this N a N value down there.
N a N is a special value in Java script.
Just like undefined is a special value,
which is built into JavaScript and stands for not a number.
And we get that because I'm only passing in two values here
when three values are expected.
Now,
what did you learn about parameters that don't receive a
value?
They have undefined as a default value.
So when we then add all those numbers together,
the third number here actually will have no special value.
Instead it will be undefined. And if you add undefined,
there's special value that's known by JavaScript to some
numbers,
JavaScript can't do this in a mathematical way because
undefined is not a number.
And hence you get this not a number result because
JavaScript is not able to derive a number.
Now we could solve this with some default value, like zero,
in which case we could execute this code.
And we now get three as a result here because now
nun three
will be zero if it's not set,
but still this function is not really flexible because it
needs at least two arguments to parameter values to work
correctly and at most three.
Now,
what if your goal would be to make that function work with
any amount of numbers now for that,
we could rewrite it and not accept a couple of separate
parameter values,
but instead we could accept an array of numbers.
So that'd be call sum up with an array as a value here,
created with the square brackets,
where we can have as many numbers as we want.
And then we could rewrite the logic here in this function to
create a helper variable result,
and then loop through all the numbers here.
As we learned it with four off and simply add the numbers to
result may be here with this shortcut operator,
which is just a short forms for saying result plus number
like this.
And then we returned result in the end here.
We could write it like this.
And if we do that and we then execute this file,
I get to 27 as a result here, which is the correct result.
And that would be a fine way of writing such a function.
But JavaScript also gives you another way of writing
functions that take a multiple values instead of just one or
two values that you can use in situations where you don't
have an array to pass to disfunction and where you don't
want to create one,
just to be able to call this function correctly,
which might sound a bit abstract,
but the more complex your JavaScript programs get,
the more kind of cases you'll encounter in those programs.
And it's not unrealistic that you might have some place in a
program where you want to call a function with a couple of
parameters,
and you don't want to wrap those parameters into an array.
First adjust to be able to call that function.
Instead,
you might want to prefer to be able to call this function
like this with just a list of numbers,
a list of parameter values, instead of one parameter value,
that's an array.
And you want to be able to call this function with four
values or five values or even six values.
You want that flexibility and JavaScript gives you that
flexibility with another feature that's called rest
parameters or rest arguments in your function definition.
Here, you can add three dots in front of
your parameter name.
That is a special operator built into JavaScript,
which might look a bit weird and which we actually will see
again later in a different context.
But if you use it here in the parameter list off a function
definition,
then this operator says that disfunction accepts any amount
of parameters. One parameter 2, 3, 5,
there is no fixed limit.
And that all those parameters which are passed in separated
by a comma will then be merged into an array behind the
scenes by JavaScript.
Hence numbers inside of this function will still be an
array,
but we don't need to provide a finished array as a parameter
value to sum up.
Instead,
we can pass a comma separated list and thanks to these three
dots that will be wrapped into an array by JavaScript under
the hood.
Hence with that,
we can now adjust to code to look like this.
And if I then execute this file,
I get a valid result here because of this rest parameters
feature here.
Again, it's simply an alternative.
We could have wrapped that lists of values into an array
ourselves, and then just accept that one array value.
But it's good to have that extra flexibility where you can
write functions that take a dynamic amount of values so that
you don't need to necessarily wrap your values into an array
on your own, first.
Now relate it to this rest parameters feature year and
two, this three dots operator.
We also have a number of place where we can use this
operator to basically do the opposite of what it does here
for that,
keep in mind that here in this function definition,
when using the three dots operator in this parameter list,
it will emerge a list of individual values to gather into an
array.
Now, let's say in the program, which we have,
we have some data source,
maybe some database where we get some input numbers as an
array.
So here I have the number list again, but now again,
merged into an array.
And then we have to sum up function,
which is written like this.
And it explicitly wants a list of values,
a list of parameters instead of a single value.
So some up here doesn't want an array.
If I pass my input numbers array into sum up, nonetheless,
you will note that if we execute this file,
we get an unexpected result here.
It's not adding these numbers mathematically.
And the reason for that is that sum up is written such that
it wants a list of values,
but it gets a single value which holds an array.
And JavaScript does not check if that is an array.
And it should then maybe split that up into a list of
values.
Instead it expects a list of values and it doesn't get one.
Hence you get an unexpected result.
Now what you need to do here,
if you have such a sum-up function that wants a list of
values,
instead of a single array is you need to convert that array,
back into a list of single values.
Now, of course you could say,
why don't we just write to function such that we do want a
single array value like this?
And the answer would be yes, of course,
for this dummy example, that would be the easiest solution,
but in more complex applications and programs,
which you inevitably will see at some point as a developer,
you will simply sometimes have functions that are not
written in the way that you can directly use them like this,
because you might be using them in different places of your
code.
And in every place you might get different kinds of input
values.
So you very well might have a function that wants a list of
numbers. Even though in this exact scenario here,
you have a single array of numbers
and therefore to easily then convert such an
array of numbers
to a list of numbers. You also can use the three dots again,
but now not in the function definition, parameter list,
but instead in the place where such a list of numbers is
expected. So here,
when I call some up and I'm passing into concrete values
that should be passed and provided to that function here in
such a place where you're not in a function definition,
but instead in a place where concrete values are needed,
the three dots here are known as the so-called spread
operator,
because you spread an array out into multiple individual
values.
You pull out all the values in that array and provide them
as standalone values to sum up that's what the three dots do
in this place.
It removes the square brackets.
If you want to say like that, and hence,
if you now save this and you then execute this file again
here, then you again,
get the expected number as a result because now a list of
individual numbers is passed in.
And I am fully aware that this is a bit more advanced and
can be tricky to wrap your head around.
If you only see a simply example like this one,
but the idea of the simple example of course,
is to show you how these operators, these three dots work.
We'll see them again in certain parts of this course.
And that's why I wanted to introduce them early so that you
know how these operators work when you see them later again
for the moment, that's it about these operators though,
but the rest parameters and dispread operator,
these are features you should keep in mind.