Introduced in ES6, the Spread operator enables JavaScript developers to write some awesome code.

It comes in handy when you’re dealing with collections like lists or objects.

Spread Syntax

The spread operator spreads out a collection. Syntaxed by 3 preceding dots, it looks like this:

spread syntax with lists

This is a great alternative to using traditional list manipulation methods like concat or push and is sure to make your code look much more tidy.

Since this operator applies to collections, we can also use it to expand objects:

spread syntax with objects

For those familiar with OOP and references, the spread operator returns a clone of your collection. It’s commonly useful since you don’t want to manipulate the original collection:

spread syntax to create a copy

And of course this will work again with objects.

Finally, one more example of composition with spread:

composition with spread syntax


That was a quick walk through of the spread operator, an incredibly useful and versatile syntax available to you as of ES6. I hope this guide was useful and inspires you to play around with the 3 dots.