This content originally appeared on DEV Community and was authored by Oluwatobi Sofela
The spread operator (...) is a syntax that helps to expand iterables into individual elements.
The spread syntax serves within array literals, function calls, and initialized properties object to spread the values of iterable objects into separate items.
Note
A spread syntax is effective only when used within array literals, function calls, or initialized properties objects.
So, what exactly does this mean? Let’s see with some examples.
Spread Example 1: How spread works in an array literal
const myName = ["Sofela", "is", "my"];
const aboutMe = ["Oluwatobi", ...myName, "name."];
console.log(aboutMe);
// The invocation above will return:
[ "Oluwatobi", "Sofela", "is", "my", "name." ]
The snippet above used spread (...) to copy myName array into aboutMe.
Note
Alterations to
myNamewill not reflect inaboutMebecause the spread operator simply copied and pastemyName’s content intoaboutMewithout creating any reference back to the original array.Suppose we did not use the spread syntax to duplicate
myName’s content. For instance, if we had writtenconst aboutMe = ["Oluwatobi", myName, "name."]. In such a case, the computer would have assigned a reference back tomyName. As such, any change made in the original array would reflect in the duplicated one.
Spread Example 2: How to use spread to convert a string into individual array items
const myName = "Oluwatobi Sofela";
console.log([...myName]);
// The invocation above will return:
[ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ]
In the snippet above, we used the spread syntax (...) within an array literal object ([...]) to expand myName’s string value into individual items.
As such, "Oluwatobi Sofela" got expanded into [ "O", "l", "u", "w", "a", "t", "o", "b", "i", " ", "S", "o", "f", "e", "l", "a" ].
Spread Example 3: How the spread operator works in a function call
const numbers = [1, 3, 5, 7];
function addNumbers(a, b, c, d) {
return a + b + c + d;
}
console.log(addNumbers(...numbers));
// The invocation above will return:
16
In the snippet above, we used the spread syntax to spread the numbers array’s content across addNumbers()’s parameters.
Suppose the numbers array had more than four items. In such a case, the computer will only use the first four items as addNumbers() argument and ignore the rest.
Here’s an example:
const numbers = [1, 3, 5, 7, 10, 200, 90, 59];
function addNumbers(a, b, c, d) {
return a + b + c + d;
}
console.log(addNumbers(...numbers));
// The invocation above will return:
16
Here’s another example:
const myName = "Oluwatobi Sofela";
function spellName(a, b, c) {
return a + b + c;
}
console.log(spellName(...myName)); // returns: "Olu"
console.log(spellName(...myName[3])); // returns: "wundefinedundefined"
console.log(spellName([...myName])); // returns: "O,l,u,w,a,t,o,b,i, ,S,o,f,e,l,aundefinedundefined"
console.log(spellName({...myName})); // returns: "[object Object]undefinedundefined"
Spread Example 4: How spread works in an object literal
const myNames = ["Oluwatobi", "Sofela"];
const bio = { ...myNames, runs: "codesweetly.com" };
console.log(bio);
// The invocation above will return:
{ 0: "Oluwatobi", 1: "Sofela", runs: "codesweetly.com" }
In the snippet above, we used spread inside the bio object to expand myNames values into individual properties.
Important stuff to know about the spread operator
Keep these two essential pieces of info in mind whenever you choose to use the spread operator.
Info 1: Spread operators can’t expand object literal’s values
Since a properties object is not an iterable object, you cannot use the spread syntax to expand its values.
However, you can use the spread operator to clone properties from one object into another.
Here’s an example:
const myName = { firstName: "Oluwatobi", lastName: "Sofela" };
const bio = { ...myName, website: "codesweetly.com" };
console.log(bio);
// The invocation above will return:
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };
The snippet above used the spread operator to clone myName’s content into the bio object.
Note
The spread operator can expand iterable objects’ values only.
An object is iterable only if it (or any object in its prototype chain) has a property with a @@iterator key.
Array, TypedArray, String, Map, and Set are all built-in iterable types because they have the
@@iteratorproperty by default.A properties object is not an iterable data type because it does not have the
@@iteratorproperty by default.You can make a properties object iterable by adding
@@iteratoronto it.
Info 2: The spread operator does not clone identical properties
Suppose you used the spread operator to clone properties from object A into object B. And suppose object B contains properties identical to those in object A. In such a case, B’s versions will override those inside A.
Here’s an example:
const myName = { firstName: "Tobi", lastName: "Sofela" };
const bio = { ...myName, firstName: "Oluwatobi", website: "codesweetly.com" };
console.log(bio);
// The invocation above will return:
{ firstName: "Oluwatobi", lastName: "Sofela", website: "codesweetly.com" };
Observe that the spread operator did not copy myName’s firstName property into the bio object because bio already contains a firstName property.
Wrapping it up
This article discussed what the spread operator is. We also looked at how spread works in array literals, function calls, and object literals.
Thanks for reading!
This content originally appeared on DEV Community and was authored by Oluwatobi Sofela
Oluwatobi Sofela | Sciencx (2021-08-27T23:16:16+00:00) Spread Operator: How Spread Works in JavaScript. Retrieved from https://www.scien.cx/2021/08/27/spread-operator-how-spread-works-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.