Spread Operator

To start with, the unfold operator is .... thus you'll write one thing like:

1
2
const cat = four };
; // this is not helpful (yet), however it's valid
As of ES6, exploitation 3 dots in an exceedingly row is valid code and pretty helpful code at that! ... spreads out the content thus you'll manipulate it a lot of simply.

Let’s consider some examples.

... to repeat AN object
It’s pretty common to require to base one object off of another, one thing like this:

1
2
3
var cat = four };
var kitten = cat;
kitten.age = 1;
Doesn’t that have a bug?

Yes! kitten and cat talk over with constant object. we tend to didn’t produce a replacement object for kitten to reference, we tend to simply pointed kitten to the prevailing cat object. you'll see that here:

1
2
console.log(kitten.age); // 1
console.log(cat.age); // one <-- problem!
Using the unfold operator we are able to simply produce a replacement object with all constant properties of AN existing object.

1
2
3
4
5
const cat = four };
const kitten = ; // <-- modified
kitten.age = 1;
console.log(kitten.age); // 1
console.log(cat.age); // four <-- fixed!
You can see that we tend to created a replacement object for kitten to reference after we used the unfold operator.

Can you make a case for the line a bit?

Sure thing, the we would like to form a replacement object. Next, the ...cat says that we would like that new object to contain all constant contents because the cat object. and eventually, } means we’re finished thereupon object and don’t need to feature anything to the article.

Warning!

It’s fairly common for folks to expect ... to provide a deep copy. Let’s be cleare The unfold operator doesn't deep copy, whereas the unfold operator will produce a replacement object, the properties’ values ar merely references and not new instances. For example:

1
2
3
4
5
const cat = four, toys: ["mouse", "catnip"] };
const kitten = ;
kitten.toys[1] = "yarn";
console.log(kitten.toys); // ["mouse", "yarn"]
console.log(cat.toys); // ["mouse", "yarn"] <-- problem!
So exploitation the unfold operator to form new objects can be fine, it would cause uncaused aspect effects. Please be careful!

... as AN object base
So far we've solely used ... to form a replica of AN existing object, however it’s really a lot of powerful than that. We’ll use a unique example to feature a replacement property to AN object created with the unfold operator:

1
2
3
4
5
6
7
const cat = { legs: four };
const dog = ">;
console.log(cat); // { legs: four }
console.log(dog); // { legs: four, sound: "woof" }
Again, you'll see the cat object wasn’t modified, however the new dog object has all the properties from cat in addition because the new property.

But cats create sounds too, what happens if you assign the property to cat?

1
2
3
4
5
6
7
const cat = { legs: four, sound: "meow" };
const dog = ">;
console.log(cat); // { legs: four, sound: "meow" }
console.log(dog); // { legs: four, sound: "woof" }
Everything works precisely like you’d hope it would! The cat object has the new property, with "meow" properly appointed. and therefore the dog object is made with the property set to "woof".

Let’s scrutinize those lines a lot of closely:

1
2
3
4
const dog = ">;
Just like before, the { starts a replacement object. Then exploitation the unfold operator on cat adds all the cat properties to the new object. Our new sound: "woof" overwrites the prevailing property from cat. and eventually we've got the } to complete our new object.

Warning!

The line order maters for this to figure. we want sound: "woof" to return when ...cat therefore the write happens. This version doesn't do what we tend to want:

1
2
3
4
5
6
7
const cat = { legs: four, sound: "meow" };
const dog = ...cat
">;
console.log(cat); // { legs: four, sound: "meow" }
console.log(dog); // { legs: four, sound: "meow" }
Because we tend to place the ...cat when the sound: "woof" the cat's property overwrote the sound: "woof" property.