Spread Operator – How Spread Works in JavaScript
The spread operator (...
) helps you expand iterables into individual elements.
The spread syntax serves within array literals, function calls, and initialized properties objects to spread the values of iterable objects into separate items. So effectively, it does the opposite thing from the rest operator.
So, what exactly does this mean? Let’s see with some examples.
Spread Example 1: How Spread Works in an Array Literal
The snippet above used spread (...
) to copy myName
array into aboutMe
.
Spread Example 2: How to Use Spread to Convert a String into Individual Array Items
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
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:
Here’s another example:
Spread Example 4: How Spread Works in an Object Literal
In the snippet above, we used spread inside the bio
object to expand myNames
values into individual properties.
So now that we know what the spread operator is, we can talk about what makes it different from the rest operator.
Rest vs. Spread Operator: What’s the Difference?
JavaScript uses three dots (...
) for both the rest and spread operators. But these two operators are not the same.
The main difference between rest and spread is that the rest operator puts the rest of some specific user-supplied values into a JavaScript array. But the spread syntax expands iterables into individual elements.
For instance, consider this code that uses rest to enclose some values into an array:
In the snippet above, we used the ...otherInfo
rest parameter to encase "CodeSweetly"
, "Web Developer"
, and "Male"
into an array.
Now, consider this example of a spread operator:
In the snippet above, we used the spread operator (...
) to spread ["Oluwatobi", "Sofela", "CodeSweetly"]
’s content across myBio()
’s parameters.
Important Stuff to Know about the Spread Operator
Keep these four 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 operator to expand its values.
However, you can use the spread operator to clone properties from one object into another.
Here’s an example:
The snippet above used the spread operator to clone myName
’s content into the bio
object.
Build your website with Namecheap
Info 2: The spread operator does not clone identical properties
When using the spread operator, suppose you 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:
Observe that the spread operator did not copy myName
’s firstName
property into the bio
object because bio
already contains a firstName
property.
Info 3: How does spread work on objects containing only primitive values?
Suppose you used the spread operator on an object (or array) containing only primitive values. The computer will not create any reference between the original object and the duplicated one.
For instance, consider this code below:
Observe that every item in myName
is a primitive value. Therefore, when we used the spread operator to clone myName
into aboutMe
, the computer did not create any reference between the two arrays.
As such, any alteration you make to myName
will not reflect in aboutMe
, and vice versa.
As an example, let’s add more content to myName
:
Now, let’s check the current state of myName
and aboutMe
:
Notice that myName
’s updated content did not reflect in aboutMe
—because spread created no reference between the original array and the duplicated one.
Info 4: How does spread work on objects containing one or more non-primitive values?
Suppose you used the spread operator on an object (or array) containing one or more non-primitives. In that case, spread will create a reference between the original non-primitive and the cloned one.
Here is an example:
Observe that myName
contains a non-primitive value.
Therefore, using the spread operator to clone myName
’s content into aboutMe
caused the computer to create a reference between the two arrays.
As such, any alteration you make to myName
’s copy will reflect in aboutMe
’s version, and vice versa.
As an example, let’s add more content to myName:
Now, let’s check the current state of myName
and aboutMe
:
Notice that myName
’s updated content is reflected in aboutMe
—because spread created a reference between the original array and the duplicated one.
Here’s another example:
In the snippet above, myName
’s update did not reflect in bio
because we used the spread operator on an object that contains primitive values only.
Here’s one more example:
In the snippet above, myName
’s update is reflected in bio
because we used the spread operator on an object that contains a non-primitive value.
Use CSS Grid like a pro
Shallow Copy vs. Deep Copy: What’s the Difference?
You do shallow copy when you create references while cloning one object into another. For instance, consider this snippet:
...myName
produces a shallow copy of the myName
object because whatever alteration you make in one will reflect in the other. In other words, bio
’s detachment from myName
is shallow since they still have some connections.
You do deep copy when you clone objects without creating references. The JSON.parse(JSON.stringify())
and structuredClone()
methods are tools you can use to create a deep copy.
Here’s an example:
The snippet above used the JSON.parse(JSON.stringify())
method to clone myName
into bio
without creating any reference (deep copy). In other words, bio
’s detachment from myName
is deep since they no longer have any connections.
Here’s another example:
The snippet above used the structuredClone()
method to clone myName
into bio
without creating any reference (deep copy). In other words, bio
’s detachment from myName
is deep since they no longer have any connections.
You can break off the reference between two connected objects by replacing any of the two with a new object.
Here’s an example:
The snippet above disconnected the pointer between myName
and bio
’s fullName
objects by reassigning myName.fullName
with a new object.