Understand Spread Operator In JavaScript with example . We are also going to find out How to Deep Copy objects In Modern JavaScript , We will also check How Spread Operator doesn’t deep copy the Properties and what should we do if we want to deep copy object properties in JavaScript .
Did you noticed {...} in any of your code ? This interesting dots in JavaScript is known as spread operator . In this post we are going to demystify this special syntax in JavaScript world .
What is Spread Operator In JavaScript –
Spread operator is one of the most interesting featured added in JavaScript in recent days. As the name Suggests Spread , so it basically spreads or expands the value of an iterable object in JavaScript.
Have a look at the definition of Spread Operator from Mozilla Doc .
There are multiple scenarios where spread operator comes to the rescue while doing development . We will be having a look at all those use cases here
Examples of Using Spread Operator With JavaScript
- Merging Objects .
- Merging or Copying Arrays .
- Converting String to Array .
- Deep Copy Using Spread Operator In JavaScript .
How To Merge Two Objects ?
We have two objects and we are going to using spread operator on both the object literals and construct a new merged object , with contents of both the objects .
let employee = { name:'Frugalis',lastname:'Minds'};
const salary = { grade: 'A', basic: '$2900' };
const summary = {...employee, ...salary};Now Once you try running this , the result is a merged object literals here achieved in a pretty simple way using this amazing JavaScript feature
Here employee and salary objects are merged together and that produces a new object with merged key value pairs .
Now lets say we have some common key in both the objects , How would spread operator behave in that case .
let’s have a look
let employee = { name:'Frugalis',lastname:'Minds'};
const salary = { name: 'A', basic: '$2900' };
const summary = {…employee, …salary};
Note:- In all cases of merging objects wheather multiple or single . Always the last object will be replaced in all scenarios .
With the above scenario we can also use Object.assign{} to achieve the same result but with Spread operator its more easier and convenient .
Converting String to Array
Considering one of the very common use case and simple one to demonstrate an example of Spread operator in JavaScript world .
let data= "spring" // Without spread operator console.log(…data);
We have converted a plain simple string to an array using Spread operator .
Merging Or Copying Arrays Using Spread Operator
Now lets say we have a two different array of String or any other array . We can use spread operator on arrays to merge two arrays together like below
Have a look at the array below
let javaTech= ['spring', 'java']; console.log(javaTech); // Without spread operator console.log(…javaTech);
We are expanding this whole iterator of array into single piece of object . If you notice we do not get array anywhere in content. We actually get the items of the array in plain text format.
Now lets say we merge a two different set of arrays here . Lets See how Spread operator works in that case .
let techlist1= ['spring', 'java']; let techlist2= ['javascript', 'nodejs', 'mongo']; let fullstacklist= […techlist1, …techlist2]; console.log(fullstacklist);
Here You have seen the Spread operator merges the two arrays techlist1 and techlist2 .
Resultant is a list of String which is retrieved out of the array and assigned into a new array using [] syntax .
In all of the above cases, we have seen the copying of array is done similar to what we used to do using object.assign{} .
All the above spread operator examples in JavaScript are doing a shallow copy , what if i need my spread operator to do a deep copy of nested objects .
Deep Copy Using Spread Operator In JavaScript
So I was providing some question’s answer on Stack Overflow, and found that Spread Operator doesn’t exactly do deep copy .
That led to me long debugging sessions for the Spread Operator and I will share my observations on Spread Operator and Deep Copy using spread operator in my JavaScript code.
Problem Statement –
So problem was, I wanted to deep copy the JavaScript Object let’s say –
let fruglise = {
type : “Code”,
code : 123
}
So whenever we use a spread operator (written as …) for copying the object, I thought it does in a way of deep copy thing like –
let copyObject = {...fruglise}So whenever we change the properties of the “copyObject” ( copyObject.code = 36 ) it will not change the properties of the original object.
Here you could see, in the above code snippet. We have changed the property of the “copyObject” but didn’t reflect on the original object.
But Let’s see different magic example ,
let randomExample = {a : 123, b: {c : 23}}
let copyRandomExample = {...randomExample}
What if we’ll do –
copyRandomExample.b.c = 1000
Guess What ? It will change the properties of the Original Object, Have look –
Well why so ?
Because it (Spread Operator) does till the first level, whenever it finds the nested level, it doesn’t do the Deep Copy. It does the Shallow Copy of the Object from next level onwards .
In summary Spread Operator (written as …) does the Shallow Copy(for first level it does but for others it doesn’t).
How to Deep Copy Objects in JavaScript –
Well if you want to the Deep Copy of the Object you could Use JSON.parse(JSON.stringify(object).But it will not work for the non-Json object just like if the Object values are function().
If one needs full proof of Deep Copy then one could use lodash’s clone Copy.
Points to Remember for interview :-
- Spread operator in JavaScript does not Perform Deep Copy Of Objects
- You Can use Spread operators as an arguments in iterator objects in javascript .
