JavaScript 101: Spread Operator

Disclaimer: This material was taught in The Modern Javascript Bootcamp Course by Colt Steele and Stephen Grider, which I highly recommend.

This article is going to go over the spread operator … as it pertains to JavaScript in function calls, arrays [], and object literals {}.

Here is the official definition of the spread operator from MDN’s website:

Following this definition, there are 3 places where we can use the spread operator: 1) spread in a function call, 2) spread in array literals, 3) spread in object literals.

In all cases, the spread has to do with expanding some iterable into some other place.

Syntactically, the spread operator is always …

Those three dots behave differently depending on where you are using them.

1) Spread in a function call:

We can use the spread on an array to break up the array’s elements into different arguments for the function call:

Using the spread operator turned Math.min([1, 5, 99, 48, 90]), which returns Not A Number (NaN) into Math.min(1, 5, 99, 48, 90), which returns the minimum value of 1. Using the spread on the variable, numbers (…numbers), turned the entire array into 5 arguments while removing the array braces from the function call.

You can also use the spread operator on a string in a function call:

Using the spread on a string in a function call turns each character of the string into separate arguments. In this case, each letter of “HELLO” was treated as a different argument: “H” letter1, “E” letter2, “L” letter3, “L” letter4, “O” letter5.

Overall, whether it is an array or a string, if you use the spread operator on something iterable in a function call, it will be iterated over with each element passed in as a standalone, separate argument.

2) Spread in array literal:

Using the spread operator moves the elements from its array into a new array. In other words, we can use the spread operator to make a copy of an array:

While they have the same values, states and statesCopy are pointing to different memory references so states and statesCopy are not equal.

We can also use the spread operator to combine two arrays:

Using the spread on nums1 and nums2 created a new array with all the elements from both arrays. Note that the order matters, that the elements of nums1 will be added to the array before the elements of nums2. We can also add other elements (‘a’, ‘b’) to the nums2 or nums1 array. Note that the order always matters.

We can use the spread operator to split a string. Specifically, placing the string in an array and spreading it will do the same thing as splitting it:

In this case, using the spread operator on a string in an array is similar to using it in a function call. We are telling JavaScript to iterate over this iterable and add it as an element into our new array destination.

3) Spread in object literals:

Using a spread in an object literal copies properties from one object into another object literal. Like with an array, we can use the spread operator to copy an object — or to copy an object and add other properties to the new object:

Note that, similar to the array copies, professionalAthlete and athleteClone point to different memory references, making them not equal to each other. Note that if you use the spread to create a new object, but then give the key another value, it will overwrite the previous key/value pair:

We used the spread operator to create a copy of professionalAthlete. We then overwrite the height: ‘tall’ key/value pair with height: ‘short’.

Can you use the spread operator on a string inside an object literal? Yes:

Using the spread operator on a string in an object literal will create key/value pairs with the indices being the keys and the element — in this case, each individual character — being the value. The same key/value creation would occur if you spread an array inside an object literal: