How to use the spread operator (…) in JavaScript

How to use the spread operator (…) in JavaScript

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.

Image for postPhoto by Ethan Robertson on Unsplash

What is the spread operator?

In JavaScript, spread syntax refers to the use of an ellipsis of three dots (?) to expand an iterable object into the list of arguments.

?When …arr is used in the function call, it ?expands? an iterable object arr into the list of arguments.? ? JavaScript.info

The spread operator was added to JavaScript in ES6 (ES2015), just like the rest parameters, which have the same syntax: three magic dots ?.

Image for postPhoto by Sumner Mahaffey on Unsplash

What is … used for?

?Spread operator to the rescue! It looks similar to rest parameters, also using …, but does quite the opposite.? ? JavaScript.info

Take trying to find the largest number in an array with Math.max():

Trying to pass an array to a JavaScript function expecting separate arguments does not work. In this case it produces a NaN result. Enter ?:

The spread syntax ?spreads? the array into separate arguments.

Image for postPhoto by Joanna Szumska on Unsplash

What else can ? do?

The ? spread operator is useful for many different routine tasks in JavaScript, including the following:

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

Image for postPhoto by Wojciech Portnicki on Unsplash

Examples of using ?

Here are a couple basic examples of using ? in JavaScript, where I demonstrate copying an array, splitting a string into characters, and combining the properties of two JavaScript objects:

In the next section, I explore each of the above uses of the spread syntax.

Image for postPhoto 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:

Image for postPhoto by Pineapple Supply Co. on Unsplash

Concatenating arrays

As seen in the last example, the spread operator can quickly combine two arrays, an operation known as array concatenation:

Image for postPhoto 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

One of the best ways to understand the use of spread operator in JavaScript is to look at the the built-in functions Math.min() and Math.max(), which both expect a list of arguments, not an array.

Image for postPhoto 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.

Image for postPhoto 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:

Image for postPhoto 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:

Image for postPhoto by Lukasz Szmigiel on Unsplash

Combining objects

The spread syntax is useful for combining the properties and methods on objects into a new object:

Image for postPhoto 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:

Image for postPhoto 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:

Image for post

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.

Another option would be using the tool Babel to compile the JavaScript code along with the plugin babel-plugin-transform-spread.

Image for postPhoto 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.

Image for postPhoto by Jenna Day on Unsplash

Watch out for the deeply-nested Gotcha!

On the other hand, when JavaScript objects including arrays are deeply nested, the spread operator only copies the first level with a new reference, but the deeper values are still linked together.

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.

Image for postPhoto by Scott Webb on Unsplash

Conclusion

?The spread operator can expand another item by split an iterable element like a string or an array into individual elements:? ? CodinGame.com

The spread operator ? is useful for working with arrays and objects in JavaScript. It is a convenient feature added in ES6 (ES2015).

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.

Knowing the spread syntax definitely saves me time when coding, and I recommend using it to all JavaScript developers.

Image for postPhoto by Anastasia Taioglou on Unsplash

Further reading

  • Kevin Ball examines the spread operator on the ZenDev blog:

Understanding the Spread Operator in JavaScript

Newer versions of JavaScript have brought vast improvements to the language in terms of expressiveness and ease of?

zendev.com

  • Yug Shah writes about the spread operator on GeeksforGeeks.org:

JavaScript | Spread Operator – GeeksforGeeks

Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in variable?

www.geeksforgeeks.org

  • Brandon Morelli explores the spread operator on Codeburst:

JavaScript ES6? The Spread Syntax (?)

?Expand? your JavaScript knowledge with the Spread Syntax

codeburst.io

  • David Walsh covers using the spread syntax to save time on his blog:

6 Great Uses of the Spread Operator

Thanks to ES6 and the likes of Babel, writing JavaScript has become incredibly dynamic, from new language syntax to?

davidwalsh.name

  • Brandon Morelli discusses destructuring objects with ? in Codeburst:

A Simple Guide to Destructuring and ES6 Spread Operator

The evolution of JavaScript to ES6 version has brought a whole array of new tools and utilities. These tools allow us?

codeburst.io

Image for postPhoto by Mink Mingle on Unsplash

1

No Responses

Write a response