How would you deep copy an Object in Javascript?

Front End Technology Javascript Object Oriented Programming

Clone often refers to copying a value from one place to another. We duplicate one value to another using JavaScript, which is known as cloning. In JavaScript, there are actually two different sorts of copying. The ability to distinguish between deep and shallow clones is something that every programmer, regardless of experience level, should understand.

Since this essay is about deep clones, we shall investigate deep clones in detail. Any data type, including composite data types like arrays and JavaScript, as well as primitive data types (like string and number), can experience the concept of cloning. Therefore, we must understand the fundamentals in terms of understanding it.

For primitive data types, the copying operation in JavaScript is fairly simple. The choice between the Shallow and Deep Copy strategies must be made carefully when working with objects and references.

Deep Clone − In order to prevent data loss during cloning arrays, JavaScript uses a method called deep clone to duplicate every single element.

Example1

In this example, let's see how the data can become corrupted because when we modify the value of one object, it affects all the other objects as well. For this reason, Deep Clone is used to solve the problem.


<!DOCTYPE html>
<html>
<title>How would you deep copy an Object in Javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let engTeacher ={
         name : "John Smith",
         Institute : "Tutorialspoint"
      }
      let mathTeacher = engTeacher ;
      engTeacher.name = "Steve Smith"
      document.write("English Teacher name is ",engTeacher.name +"<br>")
      document.write("Maths Teacher name is ",mathTeacher.name);
   </script>
</body>
</html>

Example 2

In this example let us understand how to deep copy an object using spread operator.


<!DOCTYPE html>
<html>
<title>How would you deep copy an Object in Javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let engTeacher ={
         name : "John Smith",
         Institute : "Tutorialspoint"
      }
      let mathTeacher = { ...engTeacher } ;
      engTeacher.name = "Steve Smith"
      document.write("English Teacher name is ",engTeacher.name +"<br>")
      document.write("Maths Teacher name is ",mathTeacher.name);
   </script>
</body>
</html>

Example 3

In this example let us understand how to deep copy Using Object.assign()


<!DOCTYPE html>
<html>
<title>How would you deep copy an Object in Javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let engTeacher ={
         name : "John Doe",
         Institute : "Tutorialspoint"
      }
      let mathTeacher = Object.assign( {} ,engTeacher) ;
      engTeacher.name = "Steve Smith"
      document.write("English Teacher name is ",engTeacher.name +"<br>")
      document.write("Maths Teacher name is ",mathTeacher.name);
   </script>
</body>
</html>

Example 4

In this example let us understand how to deep copy Using Json.parse and Json.stringify.


<!DOCTYPE html>
<html>
<title>How would you deep copy an Object in Javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let engTeacher ={
         name : "John Doe",
         Institute : "Tutorialspoint"
      }
      let mathTeacher = JSON.parse(JSON.stringify(engTeacher))
      engTeacher.name = "Steve Smith"
      document.write("English Teacher name is ",engTeacher.name +"<br>")
      document.write("Maths Teacher name is ",mathTeacher.name);
   </script>
</body>
</html>

Shallow copy

In a shallow copy scenario, the clone object receives a copy of the original object's memory address whenever the original object is copied into it. This indicates that both point to the same memory address.

Internally, both the original object as well as the copied object refer to the same referenced item. They both point to the same memory address, thus if we made modifications to the cloned object, those modifications would also be reflected in the original object as they both have the same memory address.

Example 5

In this instance, object ‘engTeacher’ has been copied into object ‘mathTeacher’. Since they both internally relate to the same memory address, if the id of object mathTeacher were altered, the id of object ‘engTeacher’ would also be modified. mathTeacher.id = 444 will change the id of object ‘engTeacher’ also.

We refer to this as shallow copy. A shallow copy indicates that any changes we make to the cloned item will also be reflected in the original object.


<!DOCTYPE html>
<html>
<title>How would you deep copy an Object in Javascript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let engTEacher = {
         id: 111,
         Institute: "Tutorialspoint"
      };
      let mathTeacher = engTEacher;
      mathTeacher.id = 444;
      document.write(engTEacher.id +"<br>");
      document.write(mathTeacher.id);
   </script>
</body>
</html>