DEV Community

Cover image for Spread Syntax "Three-dots" Tricks You Can Use Now

Spread Syntax "Three-dots" Tricks You Can Use Now

Tomomi Imura 🐱 on June 18, 2020

This articles is created based on my own tweet posted on May 22, 2020 ES6 (ECMAScript 2015, the 6th edition) was finalized 5 years ago, and bro...
Collapse
 
hsimah profile image
hsimah • Edited

Also similar to spread is the rest operator - you can team it up destructuring to get properties out of objects:

const obj = {
  prop1: 1,
  prop2: 2,
  prop3: 3
};
const {prop1, ...restObj} = obj;

This is great for React props which need to be passed to child components.

And then to shallow copy an object:

const newObj = {
  ...obj,
  prop1: 2
};

Also great in React for setting state or in a Redux reducer.

Collapse
 
girlie_mac profile image
Tomomi Imura 🐱

Yes, I've found it super useful too! Especially when I am trying to grab data from some API that returns a request with a JSON. Destructuring comes really handy to assign the data to variables and I love that!

Collapse
 
szymondziewonski profile image
Szymon Dziewoński • Edited

The reason you might use Array.prototype.slice.call() or [].slice.call() is because of lack support for IE for Array.from() and [...](spread operator) so even its good to know, its kind of useless as "trick" . Anyway thank you for rest examples, good to refresh memory :)

Collapse
 
girlie_mac profile image
Tomomi Imura 🐱

Ahhh IE. Web devs nowadays must be happier people that used to be.

Collapse
 
girlie_mac profile image
Tomomi Imura 🐱

Another example I thought about (well, this is the variant of the "string to array") -

const isAnagram = (str1, str2) => {
  return [...str1].sort().join() === [...str2].sort().join();
};

isAnagram("deno", "node"); // true
Collapse
 
robincsamuel profile image
Robin C Samuel

One other reason I use spread is to conditionally add a key to an object,

const user = {
     firstName: input.firstName,
     ...(input.lastName ? { lastName: input.lastName } : null)
}
Collapse
 
miggu profile image
miggu • Edited

I use this ALL THE TIME, you can use an empty object {} as well instead of null

Collapse
 
bashunaimiroy profile image
Bashu Naimi-Roy

I might end up using this, thanks Robin!

Collapse
 
mrwensveen profile image
Matthijs Wensveen • Edited

Instead of slice, Array.from can be useful too:
Array.from(document.querySelectorAll(".cat"))

Collapse
 
girlie_mac profile image
Tomomi Imura 🐱

This looks clean and intuitive too <3 Thank you for sharing!

Collapse
 
prashanthpprabhu profile image
Prashanth Prabhu

When you are concating 2 arrays also it is a shallow copy. Right?

Collapse
 
girlie_mac profile image
Tomomi Imura 🐱

Yes, a good point! It doesn't recurse into nested arrays so it returns a new array with shallow copies.

Collapse
 
cbloss profile image
cbloss

This is all great!! Thanks for this collection!!

Collapse
 
damsalem profile image
Dani Amsalem

That last one, Collecting HTML Elements in an Array is excellent and immediately useful for me!