Spread Operators(…) for Beginners
“to spread, or not to spread(…), copy is the question”
Spread operators were introduced in ES6 JavaScript. A spread operator allows a programmer to expand, or “spread out”, the elements of an object into a new variable. Per Mozilla Web Docs, spread syntax (…) allows:
-An iterable object 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
-An object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
When are spread operators useful?
1) Arrays
Spread operators are especially useful when dealing with arrays. When there is a need to copy, combine, or pass arguments as arrays, spread operators can be used to quickly and efficiently complete the task.
*** Common Beginner Mistake: Declaring a new variable and assigning to another variable array to make a copy ***
In the above code, we have set the const variable, bigDogs, to the array of 3 dog breeds. Then, we have declared a const variable, notRealCopy, and assigned it to bigDogs, as well as declared another const variable, actualCopy, and assigned it to a new array containing the spread operator and bigDogs.
Please see the contents of each variable’s array below:
bigDogs
notRealCopy
actualCopy
While the elements of all three const variables (bigDogs, notRealCopy, and actualCopy) contain the same array of elements, they are not all saved in the same place in memory.
To be more specific, because we assigned bigDogs to notRealCopy, each variable is saved to the same place in memory. However, because we declared actualCopy to a new array with the spread operator and bigDogs, we copied the contents of bigDogs and stored them to a new place in memory under actualCopy to create a true ‘independent’ copy in memory.
As you can see below, when calling an equality check between, bigDogs and notRealCopy, we receive a return of true. When calling an equality check between either, bigDogs or notRealCopy, and actualCopy, we receive a return of false.
2) Objects
Similar to arrays, spread operators can also be used to copy an iterable object or combine iterable objects.
*** Common Beginner Mistake: Declaring a new variable and assigning to another variable object to make a copy ****
In the above code, we have declared the const variable, maverick, and set it to an object with four key/value pairs. Then, we have declared a const variable, copyOfMav, and assigned it to maverick, as well as declared another const variable, actualMavCopy, and assigned it to a new object containing the spread operator and maverick.
Please see the contents of each variable’s object below:
maverick
copyOfMav
actualMavCopy
Similarly to the previous array examples, while the containing elements of all three const variables (maverick, copyOfMav, and actualMavCopy) are the same key/value pairs, they are not all saved in the same place in memory.
To clarify, because we assigned maverick to copyOfMav, each variable is saved to the same place in memory. However, because we declared actualMavCopy to a new object with spread operator and then maverick, we copied the contents of maverick and stored them in a new place in memory under actualMavCopy to create a true ‘independent’ copy in memory.
As you can see below, when calling an equality check on, maverick and copyOfMav, we receive a return of true; But, when comparing either maverick or copyOfMav, with actualMavCopy, we receive a return of false.
Spread operators are a great tool for a programmer to utilize to make a copy of an array or object, as well as combine an array(s) or object(s). See the below links for more information on the spread operator and the spread operator’s sibling, rest operator!
Inspiration for this blog, Maverick the pup:
