The spread operator, which is denoted by three dots (...) is defined on MDN as syntax that "allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected."
Let's break down what that means, starting with function calls.
In the example below, there is a function that accepts three arguments, and there is an array of elements. If you were to pass the array to the function as an argument, it would take the entire array as the first argument and evaluate to undefined for the other unused arguments. Instead, you can use the spread operator before the array, which essentially removes the brackets and passes the array elements as arguments to the function. Note: The array in this example contains more elements than there are function parameters. In this case, because we have three parameters, the function will take the first three elements from the array as arguments.
Next, let's look at how the spread operator works with arrays. One very handy use is to make a copy of an array. In the example below, notice that largeDogsReference is pointing directly to largeDogs. This is not a copy, but rather a reference to the same array. Any changes made to either of them will affect both. You can see that if we compare largeDogsReference to largeDogs, we can expect an output of true because they are the same array. To make a copy rather than a new reference, simply use the spread operator in front of the array name that you would like to copy, and enclose it in square brackets. Now if we compare largeDogsCopy to largeDogs, we can expect an output of false because they are now two different arrays, even though they currently have the same elements.
Be careful. When using the spread operator to make a copy of an array, it only goes one level deep. If the array that you copy contains other arrays or objects, those elements will still be pointing to their current reference.
Order matters. The order in which you add the arrays is the order in which they will combine. In the example below, you can see that if we switch the order of the two dog arrays, the order of the elements will also switch.
Now, you might be wondering, "Why not just use the concat() method to merge the arrays?" In the example below, you can see that since this is just a regular array, the advantage to using the spread operator is that you can add in any other elements as well.
Lastly, we can use the spread operator with objects. Just as we did with the elements of an array, we can use spread to copy the keys of an object. This is demonstrated in the example below.
Once again, order matters. The spread operator will overwrite the values depending on its placement.
The spread operator is very useful whether it's passing arrays to a function, adding information together in arrays or objects, or just for making copies of arrays and objects so we don't make unwanted changes to the original reference.
Top comments (0)