-: Let's now talk about the amazing spread operator.
So we can use the spread operator
to basically expand an array into all its elements.
So basically unpacking all the array elements at one.
So let's say that we have an array,
so seven, eight, nine.
And now we want to create a new array based one this array
but with some new elements at the beginning.
So how would we do that?
Well, with what we already know,
we would need to loop over this array,
or even worse, do it manually.
For example, like this.
Let's call it the Bad New Array.
So if we wanted to add one and two
to the beginning of this array,
we would have to write one, two,
and then each of these elements.
So that would be arr. 0,
arr. 1,
and arr. 2.
Okay, let's take a look.
And now we need to get a new array
with the three original elements
and then a one, two at the beginning of that array.
Okay, and this is actually quite
a common operation that we need to do
and so we can now, since ES6,
do it in a much better way
using the spread operator.
So with the spread operator,
it's gonna work like this.
So let's create a new array.
So this is the good, let's say New Array.
And then, again, we use one, two,
and then we use the spread operator,
which is dot dot dot,
to basically expand this array
into all of its individual elements.
So let's see the result,
and then I will explain it a little bit better.
So new array, and you see that we get
the exact same result here.
So what the spread operator does
is to basically take all the values
out of this arr. array,
and then write them individually
as if we wrote seven, eight, nine here manually.
All right, so if we wrote it without these three dots,
then we would have this array,
so this arr. array inside of this one.
So just like this.
So one, two, and then an array of seven, eight, nine.
And that's because here, we are including
this entire array.
But with the spread operator, again,
it's like taking all the elements out of the array
and writing them here manually.
And so when we do this,
we then get seven, eight, nine,
individually here, represented in this new array.
So what this means is that we can use the spread operator
whenever we would otherwise write
multiple values separated by commas.
And that situation happens
whenever we write an array literal
like we did up here.
So that's the first situation in which
it's very useful to expand an array.
And the second situation is
when we pass arguments into functions.
So, for example, let's say
that we wanted to actually log the individual elements
of this new array here.
So if we simply logged the array,
then it's, of course, gonna look like this.
It's just one value with just the array,
it's just one big value.
But if we use the spread operator
to expand the new array,
then see what happens then.
So now it logged the individual elements of the array.
So this would be the same as writing
one, two, seven, eight, nine individually.
So once again, whenever we need the elements
of an array individually,
then we can use the spread operator.
And that is useful when we write an array
and when we need to pass multiple elements
into a function like we did here.
All right, so let's see a bit more useful example.
So in this example, we will create an array
with one more food item in the main menu array.
So that main menu is here at restaurant dot main menu,
and so basically we want to create a new menu here.
So const, new menu, and then let's say
that we want the original array
plus one new element.
So we can do that by simply expanding the array,
so that's restaurant dot main menu,
and then we can add other stuff.
So let's say gnocci,
at least that's how I think it's spelled
or pronounced in Italian.
And so let's have a look at our new menu,
and indeed, it has the three original elements,
plus the gnocci.
And keep in mind that here, we are indeed
creating a completely new array, all right?
We are, of course, not manipulating
the restaurant dot main menu array.
So we are building a new array from scratch,
and you can see that here by the square brackets.
So this brackets syntax here is simply the way
in which we have always been writing new arrays.
And so here, again, we are writing a new array
but simply based on expanding this array,
and then adding another element to it.
Okay.
Now you might have noticed that the spread operator
is actually a bit similar to destructuring,
because it also helps us get elements out of arrays.
Now, the big difference is that the spread operator
takes all the elements from the array
and it also doesn't create new variables.
And as a consequence, we can only use it
in places where we would otherwise
write values separated by commas.
And, in case you're taking notes,
probably what I just said would be very helpful
to have as a note.
Next, let's learn about two important use cases
of the spread operator,
which is to create shallow copies of arrays,
and to merge two arrays together.
So let's say copy array,
and so let's simply create a copy of the main menu.
So main menu copy, and so let's write a new array,
and into that new array, we will put all the elements
that are currently in the main menu.
So at restaurant dot main menu, and that's it.
So here we just created a shallow copy of this array.
So that's a little bit similar to object dot assign
that we used in the previous section, okay?
But here, this syntax is actually a lot easier to use.
Now to join two arrays together,
so join two arrays or more, of course,
we can use the same technique.
And so maybe, at this point, you can already guess
how that would work, and so
you can do this, actually, as a challenge.
So pause the video right now,
and create this variable menu which will be an array
which contains the whole menu.
So both the main menu and the starter menu.
So take a minute and try it on your own here.
All right, so hopefully, you managed to do that.
And so the secret here, again,
is to use the spread operator.
So restaurant, and let's start with the starter menu.
So that's gonna be our first couple of elements
in this new array, and then, of course,
we can use the spread operator again,
and then this time expand the main menu.
Dot main menu.
And so now we end up with an array
containing all the food items that are both
in the starter and the main menu.
And again, because here, with this spread operator,
we took all the elements out of the starter menu
and basically wrote them here into this new array,
and then the same with the main menu.
All right, so I told you that the spread operator
works on arrays, but that's not entirely true,
because actually, the spread operator
works on all so-called iterables.
Now what is an iterable?
Well, there are different iterables in JavaScript.
And we will talk about all of them
by the end of the course,
but for now, just know that iterables
are things like all arrays, strings, maps, or sets,
but not objects.
So basically, most of the built-in data structures
in JavaScript are now iterables, but except objects.
So let me actually write that here for you.
Iterables are arrays, strings, maps, and sets,
but not objects.
Now anyway, since strings are also iterables,
that means that we can use the spread operator
on a string, as well.
So let me quickly show that to you.
So let's just create a quick string here, Jonas,
and then I want to create an array
which contains all the individual letters,
plus some other elements.
So, let's call this one letters,
and then we create a new array
and expand the string here as well.
Then here I want an empty string,
then here I want an S,
and then let's log it through console,
and tnow it will make a little bit more sense.
All right, and so indeed, here we get this array,
where each letter of the original string
is now an individual element.
So just like we expanded, so we unpacked an array,
we now did the same thing with a string.
Now just keep in mind
that we can still only use the spread operator
when building an array,
or when we pass values into a function.
So for example, we can also do this.
So expand the string here,
and so then it is the same thing as writing this.
So J, O, and so on and so forth, right?
So, indeed, here now we get all the individual elements.
All right, so for example, what we can't do
is to use this to build a string using a template literal.
So here, this is not gonna work.
And that's because this is not a place
that expects multiple values separated by a comma.
So you see unexpected token, all right?
So again, multiple values separated by a comma
are usually only expected
when we pass arguments into a function,
or when we build a new array.
So take note of that,
because that is important to understand
about the spread operator.
Okay, but now enough with building arrays.
Let's now actually write our own function
that accepts multiple arguments
and then use the spread operator
to actually pass those arguments.
And so that's gonna be a very real-life example right there.
So let's add here another method now,
and so, let's say that we want a method
to order just pasta, okay?
And the pasta always needs to have
exactly three ingredients.
So let's say order pasta, and it's gonna be a function,
and so now here, we need three ingredients.
So let's just call them ing. 1, ing. 2, and ing. 3.
And then just log them to the console, some string,
here is your delicious pasta
with ing. 1,
ing. 2,
and ing. 3.
So up here, we have an error,
so this should be number three.
And then, let's now call this function.
So order pasta.
Now what I want to do here
is to actually get these ingredients
from a prompt window.
So remember the prompt function that we can use,
and so let's create an array called ingredients.
And each element here will be defined
by a prompt window.
So this here now has nothing to do with
the spread operator,
it's just a way so that we can actually
input the data ourselves.
So let's say,
and here we need to escape this,
So let's make pasta.
Ingredient one.
And I think, I didn't show you this escaping here before.
So here, when we simply write this single quote here,
to write let's,
JavaScript thinks that we are finishing this string here.
Okay, and so we could use the double quotes out here
or we can escape using the backslash, okay?
Now when we save this, I think that Prettier
will actually get rid of this here,
but it's still important to know that escaping exists.
So basically, this masks this single quote here,
so that it does not finish the string at this point.
So let's save it.
And so you see that now, the Prettier extension
actually replaced the single quote with the double quote.
And so here we see our prompt already,
but let's create two more.
So let's say ingredient two now,
and then another one.
So again, here we are, simply building an array
of the three ingredients.
Okay, and then we can log it to the console,
just to see A,
B, and C.
And so, indeed, we now get these array ingredients
with A, B, and C, which are the three strings
that we just wrote there.
And now, how should we actually call
the order pasta function?
So restaurant dot order pasta.
And in the old way, we would now write
ingredients zero, ingredients one, and ingredients two.
But, since we learned about the spread operator
in this lecture, we can now do a lot better.
And so, instead, we do this.
Restaurant dot order pasta.
And now, all we need to do is to expand
the elements of the ingredient array,
and that will then basically
write the three elements of the array
here separated by commas.
So this and this should yield the exact same result,
and so let's now test it out with some real data.
So let's see, mushrooms, asparagus, and cheese.
And so, in these, we get now twice,
here is your delicious pasta
with mushrooms, asparagus, and cheese.
And what do you think is the better solution?
This one, or this one?
And especially considering that an array
could, of course, be a lot longer
than just three elements.
So indeed, always go with this
more modern ES6 syntax here.
It's an amazing addition to the language.
And now, just to finish this lecture here,
since ES 2018, the spread operator
actually also works on objects,
even though objects are not iterables.
So let's write that here.
And here let's just write real-world example.
And so let's now experiment with this.
The first example here was to create
a new array based on one initial array, right?
And so let's now also create a new restaurant object
with all the data from the original one
plus some additional data.
And so this is actually an amazing way of doing this,
because it's so much easier than with old JavaScript.
So let's call this one new restaurant.
And then we can simply spread the old restaurant
and this will then basically copy all the properties
of the restaurant into this new object.
And then we can add anything that we want.
Founder, for example, let's say Giuseppe,
Or Giuseppe, I don't really know how to say it.
And, of course, here, the order does not matter as always.
So this spread here doesn't even have to be the first one.
So let's say we also want the founding year,
let's say 1998,
okay?
And so with this, we created a brand new object.
Now we need to get rid of these three prompts there,
because otherwise, it's gonna drive us crazy.
But let's just take this out,
and simply log here the new restaurant to the console.
And so indeed, we get our original object basically,
plus the founder, and plus founded in.
Great.
And finally, since we were able to do
shallow copies of arrays, using the spread operator,
we can do the same with objects.
So instead of using object dot assign,
as we did it in the previous lecture.
So let's do that.
Restaurant copy.
And so all we need to do is an empty object
and then in there expand all the elements
of the original object, so the restaurant, in this case.
And so now, if we attempt to change something on the copy,
copy dot name,
let's call it now Ristorante Roma,
and if you're Italian,
you're not gonna like how that sounds.
But anyway, now, as we take a look at both of them,
so the name of the copy and the original,
now you will see that they are different.
So the copy has the name of Ristorante Roma,
and the old one has Classico Italiano,
which means that, indeed,
we did make a copy of the original restaurant.
Because otherwise, as we learned
by the end of the previous section,
changing one object would then also change the other one.
Right? Cool.
So another long lecture here,
but we're making really great progress.
And of course, we will use all of this
in real projects later down the road.
But again, I chose to teach you these concepts
in a separate way and not inside a big project,
because this allows me to show you
a lot more different examples
and it also makes the material more reference-able
for you in the future.
And so that's gonna be helpful
when you're trying to find what you're looking for
after taking this course.