Introduction to JavaScript Clone Object
The object which does not exist but that reference is to be used in another new object that is the same object is copied through another new object the instance will not be created again is known as cloning object. Generally, some other languages like java etc. these are achieving clone in different ways, but the same javaScript also achieve with different ways the same object property is copied to another object; we have used some default methods for cloning the object deep copy and shallow copy the two types of copy concept used in the javaScript.
Syntax:
The javaScript, generally, we have used some default method/function to achieve. The goal for these types of concepts is called cloning the object, but each and every function has its own attributes and properties in the script.
<html>
<body>
<script>
function function name()
{
var target={};
var source={};
variable name = Object.assign(target,source);
}
</script>
</body>
</html>Above mentioned codes are one of the ways to achieve the object cloning in the script using the default method called Object.assign(target, source); we will pass the parameter like target location and sourcing location so it will copy the exact object into the other location.
How Does JavaScript Clone Object Works?
We can clone the object as one of the main tasks in JavaScript because it is most widely used; it takes some time consumption because the entire object property and attributes are also copied the same in the destination or target object in the script. By using this cloning concept, it will be achieved in three different ways.
1. Using Iteration, the property of the object is copied into the another new object.
2. We can use JSON methodology for copied the source object into destination/target object; the source object will be safe in the json if suppose the copied time error or exception will be thrown time it handles safer whenever the source object is not comfortable or convertible to the JSON method.
3. The third method is Object.assign(target, source); it does only used in the shallow copy; it copies only the nested properties that are still copied by its reference.
If we used the first method like iterate the object property and copied to the other object, it takes more time until the loop will be terminated because it copies the entire source object property into the target object the concept-wise it’s a simple one, but it will be used rare scenarios in the web-based projects. Next method, we will try the JSON methodology; the source object should be JSON safe because if suppose the source object is mismatched or not supported with the json notation, it will throw the errors, exceptions when the copied scenario is started that time if suppose error or exception is thrown it will handle automatically in the script the source object also not convertible to the JSON format. The final method is Object.assign() default function it will copy all the enumeration properties from one or more source objects to the target objects. It will return the target object whenever the source object is transferred into the destination object that is source object property is used Get property, and the target used the Set property it will use and invoke the getters and setters method, and it assigns the properties copying or defining the new properties of the object it’s also we can be called merging from one property into another property its contain the new way of the prototype. For copying the property definitions, we may use the default method called Object.getOwnPropertyDescriptor() and Object.defineProperty(); by using these properties, we used both strings and special characters like symbols, character, operators, etc. also copied from the source into the destination.
Suppose we used shallow copy from the source object into the destination object the source top-level hierarchy properties also copied it does not copy without any reference, and also it exists a source object property values are copied and mark it as a reference for the shallow copy object the source value makes it as a reference to the object it will copy only its reference value to the target object. A shallow copy also allows some duplicate data, which it will contain the top-level properties, but the nested level object is shared among the original source object and the target copy object.
Examples to Implement JavaScript Clone Object
Below are the examples of JavaScript Clone Object:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="text-align:center;">
<h1 style="color:pink;" >
Welcome To My Domain
</h1>
<p id="demo2">s = {name:'siva', id:'1', city:'chennai'};</p>
<button onClick="sam()">Please click
</button>
<p id="demo"></p>
<script>
function sam(){
var s = {name:'siva', id:'1', city:'chennai'};
var d = {};
for (var p in s) {
if (s.hasOwnProperty(p)) {
d[p] = s[p];
}
}
document.getElementById("demo").innerHTML =
"targetObject is name = "+d.name+", id = " + d.id+", city = "+d.city;
}
</script>
</body>
</html>Output:
After clicking on the button
Example #2
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="text-align:center;">
<h1 style="color:red;" >
Welcome To My Domain
</h1>
<p id="demo2">s = {name:'siva', id:'1', city:'chennai'};</p>
<button onClick="sam()"> Please click
</button>
<p id="demo"></p>
<script>
function sam(){
var s = {name:'siva', id:'1', city:'chennai'};
var d = {};
d = JSON.parse(JSON.stringify(s));
document.getElementById("demo").innerHTML =
"targetObject is name = "+d.name+", id = " + d.id+", city = "+d.city;
}
</script>
</body>
</html>Output:
After clicking on the button
Example #3
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body style="text-align:center;">
<h1 style="color:pink;" >
Welcome To My Domain
</h1>
<p id="demo2">s = {name:'siva', id:'1', city:'chennai'};</p>
<button onClick="sam()"> Please click
</button>
<p id="demo"></p>
<script>
function sam(){
var s = {name:'siva', id:'1', city:'chennai'};
var d = {};
d = Object.assign({}, s);
document.getElementById("demo").innerHTML =
"targetObject is name = "+d.name+", id = " + d.id+", city = "+d.city;
}
</script>
</body>
</html>Output:
After clicking on the button
Conclusion
Finally, we have cloned the object from one place into another place using some ways, but the actual point of view we must copy from the entire source object attributes and their behaviors, properties to the other destination object the only it will complete the cloned process successfully it takes memory space to occupied separate object space in heap memory areas.