JSFiddle - React, Tailwind, and code Playground

by Gonzalo Barba

HTML

<h3>How to copy an Composed Object without references?</h3>
    
    
    <table style="width:100%; text-align: center">
     <tr>
       <th>Object</th>
       <th>Name</th>
       <th>Value</th>
       <th>Expected Value</th>
     </tr>
      <tr>
        <td>Object 1</td>
        <td id='name1'></td>
        <td id='value1'></td>
        <td id='expected1'></td>
      </tr>
      <tr>
        <td>Object 2</td>
        <td id='name2'></td>
        <td id='value2'></td>
        <td id='expected2'></td>
      </tr>
      <tr>
        <td>Object 3</td>
        <td id='name3'></td>
        <td id='value3'></td>
        <td id='expected3'></td>
      </tr>
    </table>

JavaScript

function cloneObject(myObj) {
		var temp = myObj.constructor();
    if (myObj === null || typeof myObj !== 'object') {
        return myObj;
    }
    for (var key in myObj) {
        temp[key] = cloneObject(myObj[key]);
    }
    return temp;
}

const value = 20.20;
let a = { a : 10 };
let bb = { v : value };
let b = { b : 20, bb: bb };
let c = { c : 30 };

let object1 = {name: 'cloneObject', a, b, c}
let object2 = cloneObject(object1) 
let object3 = cloneObject(object1) 

object1.name = 'it works fine';
object1.b.bb.v = 999; // this will change same property in object2 & object3 and it shouldn't


document.getElementById('expected1').innerHTML = object1.b.bb.v;
document.getElementById('expected2').innerHTML = value;
document.getElementById('expected3').innerHTML = value;


document.getElementById('name1').innerHTML = object1.name;
document.getElementById('name2').innerHTML = object2.name;
document.getElementById('name3').innerHTML = object3.name;

document.getElementById('value1').innerHTML = object1.b.bb.v;
document.getElementById('value2').innerHTML = object2.b.bb.v;
document.getElementById('value3').innerHTML = object3.b.bb.v;