DEV Community

Cover image for 6 Use Cases of Spread with Array in JavaScript

6 Use Cases of Spread with Array in JavaScript

Samantha Ming on June 30, 2020

Here are 6 ways to use the Spread operator with Array in JavaScript. You can use it to merge or clone an array. Or use it to convert iterables to...
Collapse
 
huncyrus profile image
huncyrus

Side note: The new Set() and the spread operator could be quite dangerous, worth to check out the behaviour: it is really copy by value or just by reference... (might be handy this small detail when ppl workin' on large datasets)

Collapse
 
samanthaming profile image
Samantha Ming

But wouldn't spread be creating a true new copy? -- do you mind expanding your thought, might be something helpful to include in my code notes 😵

Collapse
 
penge profile image
Pavel Bucka

Try this:

const set = new Set([{ id: 1, color: "blue" }, { id: 2, color: "red" }, { id: 3, color: "green" }]);

const arr = [...set];
arr[0].color = "purple";

console.log(set); // check the first entry
// or set.values().next().value.color

The conclusion is: spreading results in a shallow copy.

Source: stackoverflow.com/questions/500511...

That means, copying primitive values turns fine. What you can do in case of objects copy, is to make a copy of those underlying objects:

const arr2 = [...set].map(item => Object.assign({}, item));
arr2[0].color = "yellow";

console.log(set); // check the first entry

But how about nested objects? Try this:

const set = new Set([{ id: 1, color: "blue", details: { weight: 10 } }, { id: 2, color: "red", details: { weight: 20 } }, { id: 3, color: "green", details: { weight: 30 } }]);

const arr2 = [...set].map(item => Object.assign({}, item));
arr2[0].details.weight = 12;

console.log(set); // check the first entry

The conclusion is: Object.assign copies property values only (not a deep copy).

Source: developer.mozilla.org/en-US/docs/W...


Conclusions:

- spreading results in a shallow copy
- Object.assign copies property values only (not a deep copy)

Collapse
 
penge profile image
Pavel Bucka

I loved reading this article!! No bs, right to the point. And great analogies with Russian dolls or Eraser! I didn't understand that mud from MDN as well :D
Although it is a familiar topic to me, I found it entertaining and interesting enough to read it till the end. Great work! :-)

Collapse
 
samanthaming profile image
Samantha Ming

Who said learning programming can't be entertaining or interesting 😆 Thanks so much for the positive feedback! Entertain-learning (yup, I just TM that 😂) is my goal for all my code notes now! 🙌

Collapse
 
wrldwzrd89 profile image
Eric Ahnell

Fun! I can see a somewhat unusual use for this: in web games, you need arrays for various reasons. It’s usually more efficient to store only one dimension, even if the data isn’t, and simulate a multidimensional array. Spread gives a convenient way to make the simulation less annoying for consumers, from the perspective of a JS library.

Collapse
 
samanthaming profile image
Samantha Ming

Interesting, thanks for sharing! 🎮

Collapse
 
ponyjackal profile image
ponyjackal

Nice post,
Thanks, Samantha

Collapse
 
samanthaming profile image
Samantha Ming

Thank for reading my code notes 😄

Collapse
 
bukazoltan profile image
bukazoltan • Edited

Lovely useful aericle.
I also often use it to get min and max of an array 😊

Collapse
 
samanthaming profile image
Samantha Ming

min and max? please say more! 🤩

Collapse
 
bukazoltan profile image
bukazoltan • Edited

Well, the min() and max() method cannot take an array as an input, so spreading it can solve that problem too... It saved me a lot of headaches.

array = [1, 2, 3, 4, 5];
var minimum = Math.min(...array);
var maximum = Math.max(...array);
Thread Thread
 
samanthaming profile image
Samantha Ming

Ah yes! that's a fantastic use case! let me add it to my notes, thanks for sharing 💪

Collapse
 
mustafaaljassim profile image
Eng_Mustafa

Samantha! You just make everything simple and easy to understand. Please try to share more content. I have been addicted to yours 😭

Collapse
 
samanthaming profile image
Samantha Ming

Thank you so much!!! Will dooo 😊😊😊

Collapse
 
dotorimook profile image
dotorimook

Nice to read! Thank you!

Collapse
 
samanthaming profile image
Samantha Ming

Yay! thank you for reading 🙂

Collapse
 
tradecoder profile image
Mamun Abdullah

Good explanation.

Collapse
 
samanthaming profile image
Samantha Ming

thanks, glad you find it helpful 👏

Collapse
 
penandpapers profile image
PenAndPapers

I dont use spread operators much but now that I have a better understanding on how it work i'd probably use them more. Thanks for sharing this.

Collapse
 
samanthaming profile image
Samantha Ming

great! that's the goal of the post. Spread is super awesome, but it can be tricky to understand. So glad it makes more sense to you and you're encouraged to use it more 👏

Collapse
 
bernardbaker profile image
Bernard Baker

I like reading your articles 🤸.

Collapse
 
samanthaming profile image
Samantha Ming

Awesome happy to hear that! glad you find them helpful 👏

Collapse
 
glaydson profile image
Glaydson V Sousa

Thank you for sharing this, now I think I understand spread operator!