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

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.

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.