Cloning Of Object In JS

Cloning

Cloning in javascript is nothing but copying an object properties to another object so as to avoid creation of an object that already exists.

There are a few ways to clone a javascript object.

1) Iterating through each property and copy them to a new object.

2) Using JSON method.

3) Using object.assign() method

Let’s discuss each method individually

1.Iterating through each property and copy them to a new object.

This is an old method to clone a javascript object in which each property will be iterated and copied to a new object.It’s a simple method but seldom it is used.

Example

 

<html>
<body>
<p id="cloning-1"></p>
<script>
   const sourceObject = {name:"salman", age:23, salary:25000};
   let requiredObj = {};
   for (let pro in sourceObject) {
      if (sourceObject.hasOwnProperty(pro)) {
      requiredObj[pro] = sourceObject[pro];
      }
   }
   document.getElementById("cloning-1").innerHTML =
   "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary =                      "+requiredObj.salary;
</script>
</body>
</html>

Output

targetObject name = salman, age = 23, salary = 25000

2.JSON method

It is one of the modern methods to clone a JavaScript object.In this method, source object must be JSON safe.

Example

<html>
<body>
<p id="cloning-2"></p>
<script>
   const sourceObject = {name:"salman", age:23, salary:25000};
   let requiredObj = {};
   requiredObj = JSON.parse(JSON.stringify(sourceObject));
   document.getElementById("cloning-2").innerHTML =
   "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+", salary =                     "+requiredObj.salary;
</script>
</body>
</html>

Output

targetObject name = salman, age = 23, salary = 25000

3. Object.assign()

This is an advanced method used very frequently now a days to clone javascript objects.This method does only shallow copy which means that nested properties are still copied by reference.

Example

<html>
<body>
<p id="cloning-3"></p>
<script>
   const sourceObject = {name:"salman", age:23, salary:25000};
   let requiredObj = {};
   requiredObj = Object.assign({}, sourceObject);
   document.getElementById("cloning-3").innerHTML =
   "targetObject name = "+requiredObj.name+", age = " + requiredObj.age+",salary"+requiredObj.salary;
</script>
</body>
</html>

Output

targetObject name = salman, age = 23, salary = 2500