JavaScript: Copy Object

Assuming we/the user(s) use latest browser.

---

For instance, if we have this object:

var my_object = { "some": 2, "thing": [2, 3, 4, 5], "other": { "myemye": [60], "2": "asdfgret" };

And we want to clone it and make it editable without affecting the original object, so DO NOT DO THIS:

var new_object_clone = my_object;

Because every time the original object changes, the "new_object_clone" variable will also change, and vice versa.

We need to construct new object and copy the keys / values into it.

Just like copying array. But, array has built-in function, that is the slice.

var my_arr = [1,2,3,4]; var cloned_arr = my_arr.slice(); // "my_arr" and "cloned_arr" are independent.

---

Here goes for cloning object...

#1 Manual

function copy_object(a) { // "use strict"; // Un-comment the "use strict" directive statement if // this function is placed outside your own function. var result = {}; var buff = []; var l; if (a.constructor === Object) { // check if the input is an Object type. buff = Object.keys(a); // get all keys of the input Object. l = buff.length; // the length of the keys (array now). if (l > 0) { // if the keys length greater than 0 (there's key found). buff.forEach(function (v) { result[v] = a[v]; }); } } // the result. // if the input is an empty object, then the procedure above will be skipped. return result; }

---

How to use it

// define the function above here. // function copy_object(a) { .... } var my_object = { "some": 2, "thing": [2, 3, 4, 5], "other": { "myemye": [60], "2": "asdfgret" } }; var clenod_object = copy_object(my_object); // The "clenod_object" variable now consists of all "my_object" keys and values. // Both variables are independent. Either one can be edited.

---

#2 Using new feature, assign

var my_object = { "some": 2, "thing": [2, 3, 4, 5], "other": { "myemye": [60], "2": "asdfgret" } }; var clenod_ebjoct = Object.assign({}, my_object); // The "clenod_ebjoct" variable now consists of all "my_object" keys and values. // Both variables are independent. Either one can be edited.

---

Why the "assuming"?

Because olden browsers don't support, either the Object.keys new function, or the Object.assign, or the forEach looper.

---

jQuery?

Using jQuery, it's more "polyfill-ed", can accommodate olden browser too. Check out this answer on Stack Overflow