JSFiddle - React, Tailwind, and code Playground

by alexflav23

JavaScript

function cloneObject(obj) {
   var tmp = {};
   for (var key in obj) {
       tmp[key] = deepClone(obj[key]);
   };
   return tmp;
}

function cloneArr(arr) {
   var tmp = [];
   for (var i = 0, len = arr.length; i < len; i++) {
     tmp[i] = deepClone(arr[i]);
   }
   return tmp;
}

function isArray(obj) {
   return obj instanceof Array;
}

function isObject(obj) {
  var type = typeof obj;
  return type === 'object' && obj !== null || type === 'function';
}

function deepClone(obj) {
   if (isArray(obj)) {
       return cloneArr(obj);
   } else if (isObject(obj)) {
       return cloneObject(obj);
   } else {
       return obj;
   }
};

var test = {
    a: {
        b: [1, 2, 3]
    }
}

var x = deepClone(test);

function print(name, obj) {
    document.body.innerHTML += "<p>" + name + ": " + JSON.stringify(obj) + "</p>";
}

function delimiter(name) {
    document.body.innerHTML += "<h3>" + name + ": " + "</h3>";
}

delimiter("After clone operation");
print("Test", test);
print("Clone", x);

delimiter("Level 3 hierarchy update");
x.a.b[0] = 5;

print("Test", test);
print("Clone", x);

delimiter("Updating level 2 hierarchy");
x.a.b = [];
print("Test", test);
print("Clone", x);

delimiter("Updating level 1 hierarchy");
x.a = {};
print("Test", test);
print("Clone", x);