In JavaScript, cloning the object is quite simple and easy for primitive data types. However, various techniques, including “deep cloning” and “shallow cloning” are used for copying objects without reference. Deep cloning is used for creating new objects and then cloning the particular object’s key-value pairs. In deep cloning, the defined objects are completely cloned within another object. On the other hand, in shallow cloning, an object is copied according to the bit-wise level.
This tutorial will explain the method for cloning objects without reference in JavaScript.
How to Clone Object Without Reference in JavaScript?
To clone an object without referencing, there are various methods that can be invoked, such as “object.assign()” and “JSON.parse()”. However, if you use the assignment operator to clone the object it will store the value in a variable along with an object on the rightmost side.
For practical implications, try out the stated methods one by one.
Method 1: Clone Objects Using “object.assign()” Method
In this stated method, the “object.assign()” method will be invoked for the purpose of cloning objects without reference in JavaScript. This method is invoked for copying the values and properties from one source object to a particular targeted object. To use this method, follow the below-stated syntax:
Make an object to store the value:
Utilize the “Object.assign()” method and set the source and target object values as the parameters of this method:
Assign a new value to the “x”:
Invoke the “console.log()” method and pass the “object” as an argument to show the result:
Invoke the console.log() method and pass the “clone” object to output the result:
It can be observed that the objects are cloned without reference in JavaScript:
Method 2: Clone Objects Using JSON.parse() Method
To perform cloning of the objects without referencing, the JavaScript “JSON.parse()” and “JSON.stringify()” methods will be invoked which are deep cloning techniques. For a profound understanding, follow the below-stated syntax:
First the “stringify()” method is invoked as the parameter of the “parse()” method to convert the defined JavaScript object into a string.
In this stated example, make a constant-type nested object:
Invoke the “parse()” method and pass the “stringify()” method as the argument that will be used for converting a specified object into a particular string. Then, the “parse()” method is invoked to perform the operation for parsing and returning an object:
Set the value of the nested objects for cloning:
Invoke the “console.log()” method and pass the object as an argument to show the result:
Then, pass the “deepClone” object as an argument of the “console.log()” method for displaying the object which was cloned:
That’s all about the clone object without reference in JavaScript. Furthermore, if you want to explore more about the difference between shallow cloning and deep cloning follow this article Shallow Copy vs Deep Copy in JavaScript.
Conclusion
To clone an object without referencing in JavaScript, there are number of methods that can be invoked, such as “JSON.parse()” and “object.assign()”. The “parse()” method is invoked to perform the operation for parsing and returning an object. This tutorial has stated the method for cloning the object without reference in JavaScript.
