Cloning Of Object In JS – Instarr Softwares Ichalkaranji

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