Sprint operator is one of the new features that has been shaped into the language.
So what actually the spread operator is.
The spread operator is a convenient way to copy all or part of an existing array or object into another
array or object.
Well, this definition don't seem to be clear.
Don't worry, we are going to break it down.
The name spread even sees it all and the picture even over here sees it all spreading out something
and is a convenient way to copy.
And we get back into the hive.
We can copy a real object and put it into a different array in a convenient way.
But here is the confusion between spread and rest.
Why?
Because they all use the same syntax.
That is three dot.
So what is the differences between spread and rest?
Spread syntax expands and array into its element, while rest syntax collects multiple elements and
condenses them into a single element.
Remember when we treated rest?
Don't worry, let's get back to visual, see the code and explain all these terms.
So here I have already comment here at spread operator.
But before we get into that, let's have a look at risk parameter, a kind of revision to see the differences
between spread and rest.
So let's say we have a function called multiply, just multiply two numbers.
E and.
Be.
Inside the function.
Let's just console.log, let's say agreements for the meantime and let's see something.
Agreement.
Now let's call the function as multiplied.
And you can see that we have the agreement as that in a form of an array.
But instead of using this agreement, that is why risk comes into play.
For the meantime, if you pass in this one and three, let's see that it has been added into the array
of my argument.
But behind the scene, this is not rare array.
That is why risk comes into play.
So for rest I need to use three dots and any name I can make it as the argument, the arcs or rest.
Let me go by rest.
So if I console.log rest here.
Let's see and see that it has put them inside an array.
That is why this points is that the rec syntax collects multiple elements and condenses them into a
single element as we see here.
Now you know what the rest is all about.
Now back to business.
That is the spirit operator.
For the meantime, let's stick to how can we spread strings?
We can spread strings.
Also, this one, just like some revision here.
So let me remove from here, because now we are dealing with what spread?
So for spread, let's say I want to console that log, let's say this and it goes like this one I can
spread using dot, dot and anything.
I want to spread a string.
Let's say welcome.
Now you can see that it has spread the text individually.
That is what this points is.
It expands an array into its element and rest just condenses the argument into a single area.
So one expand and one condensed.
So I can say that spread is equal to expand.
And race is equal to condense or condense.
That's one scenario here.
The next one is, can we also spread a race?
Yes, of course we can.
So you're going to be spread?
String.
Strings.
Good.
So let's come down here and spread.
Spirit agrees.
So now comment is one.
The same way I can consult that log and array.
And this one, let's say I want to spread the dots and where every story is going to be.
I read like this one I read inside.
I'm going to have dot, dot, dot, and then let's say Node.js.
If I save it, it will see that I have spread the element in the array individually, and now I can
access the first index, second index and third index.
And that that is about how you can also spread a away on its own.
Next is we can also combine to arrays together.
That's the cool thing about this method.
One we can combine to raise together well, and we can achieve this one in two ways or in so many ways.
So for the mean time, let's say combine arrays.
Combined arrays.
So let's say that I have first array counts going to be one, two, three, four, a comma separated
three, two and as that.
And this one going to be my second array const as array two is equal to five, six, seven, eight.
Now, how can I combine?
Let me comment this one out.
So how can I combine these two arrays and we can achieve this one in two ways?
Let's go by school of ways that's using concatenated.
So concatenated.
Combine two or more arrays together.
How are you going to do it?
So let's say this traditional way, traditional, traditional way.
So it goes like this one.
So our side, the new array I'm going to have as new every now is equal to this one.
So I would take the first array dart coin cat.
I'm concatenate to arrays together, then I'll pass in the array too.
So if I check my console for new array, you see that I have them combined together.
One, two, three, four, five, six, seven, eight.
They are together now.
So now let's use the spread operator.
The modern way, the easy way.
So using.
Let me say Martin way and it goes like this one.
So this one is going to be so cost let's say new array to now equal to then my square bracket like that.
Then I would take the first array.
So I'm going to use dot dot.
I'm spreading it dot, dot, dot, I'm spreading that in array one and then comma separated, dot,
dot, dot my array two.
Now this syntax and this one, which looks cleaner, I believe this one is nicer.
Okay, so if I send this one, let me save this.
Let me check my new array to.
And now I have raked eyes before.
So this how we can spread two or more arrays together.
And cool thing about spread is that we can spread any number or any arrays or string as many as we want
on like wrist rest for for rest we can only use once raised inside a function.
We cannot use multiple rates inside a function, but for spread we can use as many as you want.
And this is the second scenario.
The next scenario is how can we copy an array?
Remember, we call something mutation.
Let me prove to you here before maybe I will explain to you why it's necessary to copy an array.
Let's talk about mutation.
This is a real method.
Mutate.
Mutate means that causing change to the original array.
So let's say that I have an array call or original.
Or would you not agree, which is equal to, let's say, some names of students, let's say Ban and
let's say I have here as Jew and let's say Kimmy.
Perfect.
I have this away enough room.
Good.
So for this, you remember, push is a method on an array.
If I use push on this method, it means that I'm causing change to the original array.
So let's come down here and let's say that now let's add.
At new students.
Or new user.
Okay.
So here is going to be my original array.
Dot push.
Then I can push.
Let's say Joe inside that.
Now if I check my original array, it will see that something has changed because now I have cause the
origin array as that you have other one.
So if any way I make access to my original array where it has been mutated mean changed.
That's why you need to avoid this.
Avoid making changes to the original data.
That is why.
I mean array.
Copy away and manipulate it.
The way you want comes into play.
So we can copy this one using slice method.
Okay.
We can copy an array and new slice method using slice method.
For now, let's use the modern way.
Call the main spread operator.
So this is going to be so now is before our the how push.
I'm going to say copy.
The.
Our original.
Ari.
Good.
So here comes I would say this is going to be my new.
Every new era for Bitcoin exists here.
So let me comment this once.
This one's here.
Come down here.
Okay.
New area.
Now is equal to.
Now I'm going to spray the original one.
It's going to be dot, dot, dot, original area.
This concept is really important when you get to, let's say, react.
When I'm dealing with redox meaning for windows, it is that don't mutate the original area or data.
So we need to spread up or make a copy of the original one before we can make use of any method on that.
So now I have this one.
Now if I make this of the new one, now, if I console.log the new array, I'm going to have the one
as before.
Check it out.
You see that?
This is it.
Yeah.
Yeah, you see that?
This one is the original array I have here.
I have copied that.
Now for the new array, I can now make a push to it.
So now let me push something to the new array.
So here I'm going to use a new array instead.
Now have a look.
If I console that, log the original array before and after I push.
So let's see that come down here in log, let's say before.
Pushing.
Pushing new users.
So let me console.log the original array and here is going to be after after I push new user so if I
save it now have a look at differences here where I think where is my yeah let me do something here
where you all have the same where so sorry into console.log the new one.
Sorry.
After that I have the new array.
Good.
Check it out.
You see that?
This original array.
Kimmy, that is before pushing.
I have this three record, and after I copied and push my new data into the new array, I still have
to erase differently without mutating this particular array.
That's why copying array is really important to avoid mutation.
There is one scenario we need spread.
Operator.
So the next scenario is can we also spread objects?
Yes, of course we can spread object together.
Have a look.
Let's say that.
Let me say spread.
Spirit.
Spirit object.
So let's say I have three objects concerned.
Let's say OBJ one is equal to simple object here name going to be as John and let's say the H here is
going to be 30.
So let me copy this one and paste it down here.
Object to the city here.
You're going to be a city called New York.
And then the let's say the city.
Let me say the country.
Of this, let's say USA.
Uh, you ask like that, and we can have, let's say, even additional object.
For the meantime, let's stick to this one.
So now how can we combine this object together and we can achieve this one in two ways by using these
two old ways that is using object to assign.
So let's use the traditional way to, I mean, uh, spread this or combine this object together, traditional
way or school old way.
So here we go.
I'll make this.
Of course, my new object.
Now, it's equal to the object method is a special keyword called object dot assigned like that.
And that assign, first of all, passing an empty object, then common separated with the original or
the arrays.
I want to, I mean combined together.
So here we have created a new and empty object to whatever are passing.
Here we place inside this empty object.
So here I want to combine object one and my object two.
So if I save it, let me check the new object.
Now how we look.
Now we have been combined together.
Name?
Each city and country.
I have combined them together.
This is true all the way.
Now let's come back to the modern way esx with six way using spread.
And it's as simple as maybe thinking.
And it goes like this one.
So const let me say new objects.
New O'Bagy too is equal to this.
My parenthesis.
Then I'll start using the spirit.
Dot, dot, dot or bg one comma separated dot or bg two.
And I'm done.
So this syntax and this, this one and this.
Which one is cleaner and easier to write this one.
Right?
So now if I check for new object two, I have it as before.
Great.
So that is what spread operator is all about.
But guys, take note here.
If two objects have the same property, the value of the second object will override the value of the
first object.
So the last object will be the one that will be used.
What does it mean?
So let's have a look.
It says that if you are trying to combine two or more object together and one object, have the same
property, name and value the last one will overwrite.
Let me show you here.
So now we have first objects.
Let me add.
Let's say a second object in the mix.
Let's see a third objects.
Make a second object.
And here as that, nothing new here.
Okay.
Let me mention this one as three.
Okay.
Now we have object one and three.
So for this one, we have name.
They made this one as Emily.
And then the age is 20.
Now I want to also combine them together.
So here I want to replace this one also with dot, dot, dot.
The object three.
Now let's see some where we're going to happen here.
So we are expert in these three objects being combined together.
But if I save it and let me check the new object to.
Have a look.
If we see that we have the name Emily, we have two arrays now.
So two objects.
One is the person age, which is 20.
What is this one?
The city which is New York.
And then the country U.S.A. and name.
Meaning that this object has been ignored.
The reason being that if you have two objects with the same property names, the last one wins.