DEV Community

Cover image for 10 ways to use the spread operator in JavaScript

10 ways to use the spread operator in JavaScript

Chris Bongers on January 12, 2021

I'm sure you've heard of the spread operator in JavaScript (...), it's one of the most powerful operators JavaScript offers and can solve many prob...
Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

Pass unlimited arguments to a function

I see this pattern a lot here on dev. People try to use simple vocabulary, so even beginners can understand the article, but never really mention the correct vocabulary. How do I google more about this thing I just learned if I don't know it's called a variadic function?

Collapse
 
dailydevtips1 profile image
Chris Bongers

I don't even know it's called a variadic function, and never googled it that way, still, get around by googling pass unlimited arguments...

I understand there's are official names for these things, but no beginner will know these or remember these, that's not my goal for this article.

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️

but no beginner will know these

And that's precisely why I think they should be named in articles like this, because knowing the right name for a thing is just as important as knowing it exists.

"unlimited arguments" is both longer and more ambiguous than "variadic". The latter has a clear meaning in programming, so I can bring them up in a conversation and everyone is on the same page, but if I say "unlimited arguments", I'd have to explain what I mean.

Collapse
 
jdnichollsc profile image
J.D Nicholls

Take care of the performance when you're pushing an item :)

Collapse
 
dailydevtips1 profile image
Chris Bongers

I think in most cases the performance won't be exceeded when using it for everyday stuff most of the time I use it it's to push one item in an array smaller than 100, it doesn't really seem to affect things.

But valid point to keep in mind for bigger array

Collapse
 
lyrod profile image
Lyrod

NodeList to Array, you can use Array.from

const result = Array.from(document.querySelectorAll('div'))

// array

Collapse
 
dailydevtips1 profile image
Chris Bongers

Yes but then it wouldn't be a spread use haha.
We can do many of these using other methods.

Collapse
 
qq449245884 profile image
qq449245884

Dear Chris Bongers,may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Sure as long as you attribute the original that's fine with me 🤟

Collapse
 
kalashin1 profile image
Kinanee Samson

The spread operator is one of my favorites, nice post tho

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thanks Kinanee, it's in my top 3 for sure ✌️

Collapse
 
crystalfp profile image
Mario Valle

In the first examples the equal sign disappeared.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Ah thanks! Missed that one! 🤟

Collapse
 
johannesbosch profile image
Johannes

Great summery!

Thanks!

Collapse
 
dailydevtips1 profile image
Chris Bongers

Thank you Johannes!