In modern javascript there are two important operators
you also should be aware of since I'll be using them throughout the course as well and that are the rest and
spread
operators. Now specifically the spread operator is one we'll use quite a bit.
Let's say we want to implement a pattern where when we add a new hobby, we don't edit the original
array
but we create a new array with all the old values and the new value,
this is actually a pretty common pattern called immutability where we never edit existing values but
where we always replace them with copies plus the changes
and that is also a pattern I'll use quite a lot in the course.
The idea behind that is that we avoid errors because we always have this clear approach of copy
then edit and don't edit existing objects which might lead to more unreadable code.
Now to copy an array, let's say here I create a copied array,
we got a couple of possible techniques,
one of them is to use the slice operator.
Now if I output copied arrays down there and I run node play.js, I see sports and cooking's so I did indeed
copy it. Slice simply copies an array, we can pass arguments to narrow down the range of elements we want
to copy, with no arguments
we copy the entire array.
Now instead of slice, there is also a different technique, we can create a new array with square brackets
and we could add hobbies there, right?
Now what happens if we execute this, what will we see in the console?
Well if I hit enter, we see well it looks like a copy on first sight but actually it's an array with
another array in it,
so the outer array has only one element and that's the inner array.
So it's not a copy,
it's just a new array where the first element is the old array
and with that I mean the exact same object, not a copy of that.
So we just created a nested array here and
that of course was not what we did want to do here and here we can use the spread operator. The spread
operator are three dots we can add in front of an array or of an object
and these three dots are an operator just as the plus or minus are
and they do one thing,
they take the array or object after the operator and pull out all the elements or properties,
so all the elements of the array or all the properties of an object and put it to whatever is around
that spread operator,
in this case we got square brackets around the spread operator and therefore all the elements which
are pulled out of the existing array are added to the new array.
And therefore if I now run this file again, whoops and I save it before running it again,
now we see this was the output of the old approach, the nested array,
now we got no nested array anymore,
we got one array
and this is now a copy of the old one because we take the spread operator to pull out these elements
and add them one by one to the new array.
So this is something you'll see me do a lot to copy existing arrays or objects, there it would work in the
same way, we could have our copied person by using curly braces then the spread operator, the three dots
and then the old person and now if I console log the copied person here and I execute this file again,
this is our copied person here because I'm pulling out all these elements from that object and I add it
to a new object.
So this works for both objects and arrays
and in this syntax I'll use quite a bit in this course.
Now this is the spread
operator, I also mentioned the rest
operator and the rest operator is essentially the opposite.
Let's say I have a function which I'll name toArray,
it's an arrow function
and there I expect arguments, arg one, arg two, arg three. I want to return an array that contains these arguments,
whoops, and I should add an equal sign here,
so I want to return an array that contains these arguments.
I can return square brackets here of course and then the first element will be arg one, then I have arg two
as the second element and then arg three as the third element.
Now I can console log toArray and I pass one, two and three as the three arguments to that function.
If I now execute play.js we see an array with one, two and three, these three elements
so this is working.
But this is totally not flexible,
what if we want to pass four arguments?
Well we could call it like that,
javascript actually allows that
but of course it doesn't get added because we only work with three arguments here. What we could do is
we could use the so-called rest operator, ...
and then just args and this will actually take all the arguments, how many we might specify that doesn't
matter and it'll bundle them up in an array for us.
So here args will be an array and I can just return that actually
and now if I re-execute this with toArray getting four arguments, you see now I have my array with
four arguments here.
So the rest operator looks just like the spread operator,
three dots and it's the place where you use it that defines how you call it.
Are you using it to pull elements or properties out of arrays or objects, then it would be the spread
operator.
Are you using it to merge multiple arguments into an array
and you use it in the argument list of a function,
then it's the rest operator.
It's the same operator by the syntax or from a syntax perspective, the name differs depending on the
place where you use it.
I'll not use that syntax a lot in this course but it's still nice to know
but being able to pull out elements or properties, that is something you should understand because that
is a syntax you'll see me use quite a bit throughout the course.