Original subtitles

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.