Syntax error Explain Deep cloning an object in JavaScript with an example.

Explain Deep cloning an object in JavaScript with an example.

Following is the code for deep cloning an object in JavaScript −

Example

 Live Demo

<!DOCTYPE html>
<htmllang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
</style>
</head>
<body>
<h1>Deep cloning an object in javascript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click the above button to deep clone the obj object</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   let obj = {
      firstName: "Rohan",
      lastName: "Sharma",
      age: 22,
      rollNo: "A12",
   };
   let obj1 = JSON.parse(JSON.stringify(obj));
   BtnEle.addEventListener("click", () => {
      obj.firstName = "Mohit";
      resEle.innerHTML = "obj.firstName =" + obj.firstName + "<br>";
      resEle.innerHTML += "obj1.firstName = " + obj1.firstName + "<br><br>";
   });
</script>
</body>
</html>

Output

The above code will produce the following output −

On clicking the ‘CLICK HERE’ button −

Updated on: 2020-07-18T08:41:52+05:30

241 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements