All language subtitles for 015 The Spread Operator_en

Now, the other crucial concept

that's related to arrays and objects

about which you should know is the special spread operator

that exists in JavaScript.

For that, let's for example, say that we wanna merge

this hobbies list with another hobbies list.

In this case, for example,

another list that only contains one item.

If I would want to create a merged list, I could do that

by creating a new list with the square brackets.

And then, I could use the special spread operator

which looks like this.

Three dots, yes, it looks weird,

but this is JavaScript syntax using three dots,

and then the name of the first array you wanna merge

into this new array.

For example, hobbies.

These three dots will pull out

all the elements of this array,

so sports and cooking in this case, and add them

as separate, comma separated values to this new list.

If I would just add hobbies like this, and new hobbies

like this, I would get a new array,

which when output

to the console, will actually look like this.

Now, it's an array with two nested arrays inside.

This might sometimes be what you want, but often, it's not.

If I instead use the three dots

in front of the arrays to use this spread operator,

I will pull out the values from these arrays,

and add them as standalone values to this array.

And with that, if I reload this new array I get,

now does not contain nested arrays,

but instead, the values from the merged arrays.

And that's what the spread operator does.

It pulls out values from an array, and adds them

as separate, comma separated values to a new array here.

And we will indeed use this spread operator

from time to time in this course.

And therefore, you should also know about this.

You can also not just use this spread operator on arrays,

but also an objects.

For example, if I have my extended user object here

where I also have the isAdmin flag, let's say,

a property named isAdmin, which stores a Boolean value.

And I now wanna merge in the properties from the other user.

Now, for that, I can again use the spread operator

because it's also available in objects, and spread my user

with help of these three dots into this extended user.

Here, the spread operator will pull out

all the key value pairs from this object,

and add them as key value pairs to that object here.

The offer, if I console.log this extendedUser now,

I'll get a new user which has this isAdmin key,

but which also has these key value pairs

from this user here.

All thanks to this spread operator, to the three dots.