The spread operator is a useful and quick syntax for adding items to arrays, combining arrays or objects, and spreading an array out into a function?s arguments.
Photo by Ethan Robertson on Unsplash
What is the spread operator?
Photo by Sumner Mahaffey on Unsplash
What is … used for?
Take trying to find the largest number in an array with Math.max():
The spread syntax ?spreads? the array into separate arguments.
Photo by Joanna Szumska on Unsplash
What else can ? do?
- Copying an array
- Concatenating or combining arrays
- Using Math functions
- Using an array as arguments
- Adding an item to a list
- Adding to state in React
- Combining objects
- Converting NodeList to an array
In each case, the spread syntax expands an iterable object, usually an array, though it can be used on any interable, including a string.
Photo by Wojciech Portnicki on Unsplash
Examples of using ?
In the next section, I explore each of the above uses of the spread syntax.
Photo by Lopez Robin on Unsplash
Copying an array
Using the ? spread operator is a convenient way to copy an array or combine arrays, and it can even add new items:
Photo by Pineapple Supply Co. on Unsplash
As seen in the last example, the spread operator can quickly combine two arrays, an operation known as array concatenation:
Photo by Joe Cooke on Unsplash
Using Math functions
?The Math object’s set of functions are a perfect example of the spread operator as the only argument to a function.? ? @davidwalshblog on his blog
Photo by Ben Warren on Unsplash
Using an array as arguments
Since the spread operator ?spreads? an array into different arguments, any functions that accepts multiple any number of arguments can benefit from use of the spread operator.
Photo by Lacie Slezak on Unsplash
Adding an item to a list
As noted in the last example, the spread operator can add an item to an another array with a natural, easy-to-understand syntax:
Photo by Mickey O’neil on Unsplash
Adding to state in React
Adding an item to an array in React state is easily accomplished using the spread operator. Take the following example adapted from my article on how to add to an array in React State:
Photo by Lukasz Szmigiel on Unsplash
The spread syntax is useful for combining the properties and methods on objects into a new object:
Photo by Fezbot2000 on Unsplash
Converting NodeList to Array
The spread operator can convert NodeList and arguments objects to arrays, such as when selecting HTML elements on the page:
Photo by frank mckenna on Unsplash
The spread operator and older browsers
When programming to support Internet Explorer and browsers on older mobile devices, the spread operator is not going to work.
Here is the current browser compatibility chart:
In that case, the function Function.prototype.apply() will have the same effect as the spread syntax:
Note that the first argument to .apply() is the target for this, which in this case does not matter, so I passed in null as the first argument.
Photo by Rowan Heuvel on Unsplash
A note about copying by reference
One of the benefits of using the spread operator is that it will create a new reference to its primitive values, copying them.
That means that changes to the original array will not affect the copied array, which is what would happen if the array had been linked to the original with the assignment operator =:
As you can see, the spread operator is useful for creating new instances of arrays that do not behave unexpectedly due to old references.
Photo by Jenna Day on Unsplash
Watch out for the deeply-nested Gotcha!
This type of problem is called creating a deep copy, as opposed to a shallow copy. Deep copies can be made using lodash or the R.clone() method from the Ramda functional programming library.
Thanks to Micha? Bargiel for pointing out that the spread operator makes a shallow copy but not a deep copy.
Photo by Scott Webb on Unsplash
?The spread operator can expand another item by split an iterable element like a string or an array into individual elements:? ? CodinGame.com
One of my favorite uses of the spread syntax is when combining arrays such as when adding an item to React State.
I also like that it can quickly combine the properties of objects into a new object, though any properties whose names conflict will be lost.
Photo by Anastasia Taioglou on Unsplash
- Kevin Ball examines the spread operator on the ZenDev blog:
- Yug Shah writes about the spread operator on GeeksforGeeks.org:
Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in variable?
- Brandon Morelli explores the spread operator on Codeburst:
- David Walsh covers using the spread syntax to save time on his blog:
6 Great Uses of the Spread Operator
- Brandon Morelli discusses destructuring objects with ? in Codeburst:
A Simple Guide to Destructuring and ES6 Spread Operator
Photo by Mink Mingle on Unsplash