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

Monkey Raptor

Monkey Raptor

Sunday, April 30, 2017

JavaScript: Copy Object

No comments

Post a Comment