DEV Community

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...

Read full post

hsimah • Jun 23 '20 • 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.

Tomomi Imura 🐱 • Jun 25 '20

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!

Szymon Dziewoński • Jun 25 '20 • 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 :)

Tomomi Imura 🐱 • Jun 25 '20

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

Tomomi Imura 🐱 • Jun 25 '20

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

Robin C Samuel • Jun 21 '20

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)
}

miggu • Jun 25 '20 • Edited

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

Bashu Naimi-Roy • Jun 24 '20

I might end up using this, thanks Robin!

Matthijs Wensveen • Jun 24 '20 • Edited

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

Tomomi Imura 🐱 • Jun 25 '20

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

Prashanth Prabhu • Jun 18 '20

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

Tomomi Imura 🐱 • Jun 18 '20

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

cbloss • Jun 24 '20

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

Dani Amsalem • Jun 24 '20

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