Deep Cloning JS-Objects

[gits]

This short article introduces a method that may be used to create a 'deep-copy' of an javascript object. You might ask: 'Wherefore do we need this?' ... Answer: 'Only variable-values of the basic data-types string, int, float, boolean and to make the confusion perfect :) functions too! are passed by value, all others are passed by reference.' This means, when you create an object a, like in the code below, and you assign object a to variable b then you will pass the object a by reference. That results in the fact, that when you assign a new value to b.foobar, a.foobar will be changed accordingly. To pass it by value, what you can imagine as a (deep-)copy of object a, we have to use a function that recursivly copies the values of any datastructure inside of object a to object b.

// example object that might be cloned
var a = {
   foo   : { test: 1, test1: 2 },
   bar   : function(a) { alert(a) },
   foobar: 'foobar1',
   arr   : [1, [8, 9], {1: 1, 2: 2}, 4]
};
 
/**
 * function clone_obj deep-clones an js-object
 *
 * @param obj javascript-object
 * @return c cloned javascript-object
 */
function clone_obj(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return obj;
    }
 
    var c = obj instanceof Array ? [] : {};
 
    for (var i in obj) {
        var prop = obj[i];
 
        if (typeof prop == 'object') {
           if (prop instanceof Array) {
               c[i] = [];
 
               for (var j = 0; j < prop.length; j++) {
                   if (typeof prop[j] != 'object') {
                       c[i].push(prop[j]);
                   } else {
                       c[i].push(clone_obj(prop[j]));
                   }
               }
           } else {
               c[i] = clone_obj(prop);
           }
        } else {
           c[i] = prop;
        }
    }
 
    return c;
}
 
// usage: we clone object a to object b
var b = clone_obj(a);
 

Note: Why can't we copy dom-nodes with that function? Answer: dom-nodes contain references to its parent- and child-objects etc. When copying this with the above method we will get an error: 'too much recursion' ... because when copying a parent object we come to a child of that and from there to its parent and so on ... for cloning dom-nodes we simply may use the cloneNode() dom-method.

testers needed ;) ... i think it works the way it should ... but may be I've overlooked something?

testing-help: when testing in firebug console the test scenario could be for example:

var a = {
   foo   : { test: 1, test1: 2 },
   bar   : function(a) { alert(a) },
   foobar: 'foobar1',
   arr   : [1, [8, 9], {1: 1, 2: 2}, 4]
};
 
var c = a;
c.foobar = 'new test';
 
function clone_obj(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return obj;
    }
 
    var c = obj instanceof Array ? [] : {};
 
    for (var i in obj) {
        var prop = obj[i];
 
        if (typeof prop == 'object') {
           if (prop instanceof Array) {
               c[i] = [];
 
               for (var j = 0; j < prop.length; j++) {
                   if (typeof prop[j] != 'object') {
                       c[i].push(prop[j]);
                   } else {
                       c[i].push(clone_obj(prop[j]));
                   }
               }
           } else {
               c[i] = clone_obj(prop);
           }
        } else {
           c[i] = prop;
        }
    }
 
    return c;
}
 
var b = clone_obj(a);
b.foobar = 'test';
b.bar = function(a) { alert(a + a) };
 
console.info(a.toSource());
console.info(b.toSource());
 

[Dormilich]

the sub-loops are unnecessary. clone_obj() takes care of the data types itself

function clone_obj(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
 
    var c = obj instanceof Array ? [] : {};
 
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            c[i] = clone_obj(obj[i]);
        }
    }
 
    return c;
}

[gits]

seems reasonable and the method looks much better now :) ... thanks ... it was a kind of one step after another method before and now it seems quite well refactored to a ready one :)

kind regards,
gits

[Dormilich]

the remaining problems of the functions I see:
- besides the literals, there are only Object and Array supported as type (thus Boolean, String, Number, RegExp, Error, etc. will be cloned as Object)
- custom prototypes are cloned as well
- custom "classes" are cloned as Object

[gits]

but that should be sufficient ... since only arrays and objects needs to be recursivly forced to be 'copied' by value ... the outcome should only be a 'deep-copy' of the original object?

[Dormilich]

I understand that Boolean, String and Number objects can be passed as literal, but the others would just loose their built-in methods. and a custom object would be copied with all its methods and loses its constructor, quite some overhead, if you ask me.

function Foo()
{
    this.bar = new Boolean(1);
}
 
Foo.prototype.foobar = function (x) { alert(x); };
 
var x = new Foo();
var y = clone_obj(x);
console.info(y instanceof Foo); // false
y.foobar(2); // foobar() is not a function
 

[Dormilich]

preserves the object constructor (and doesn’t clone DOM objects)

function clone_obj(obj) 
{
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    if (obj instanceof Node || obj instanceof NodeList || obj instanceof NamedNodeMap) {
        return obj;
    }
 
    var a = obj.valueOf ? obj.valueOf() : undefined;
    var c = new window[obj.constructor.name](a);
 
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            c[i] = clone_obj(obj[i]);
        }
    }
 
    return c;
}

[gits]

didn't find time yet to have a closer look ... but the prototype must be copied ... since i would expect that when cloning an object (with the orig function it does - in your above test foobar wasn't copied) -> so i would say that obj.hasOwnPrope rty(i) could have been removed before cloning a property ... the constructor is an issue and should be fixed ... in case you would need to ask that question anytime ... :) ... the new operation would create a new obj instance and then the above condition should be back in there :) ... but i just suspect that using obj.constructor .name isn't cross browser safe ... since i think there is a problem in IE with that?

[Dormilich]

IMO, as long as you have the correct constructor, there is no need to copy the prototype at all, or on the other hand side, copy the prototype itself, which should lift off much of the recursion (would that be the way to go for extended objects?).

and another obstacle are closures–someti mes I use them to create immutable properties–and private variables. I don’t know, whether they can be copied at all.

yea, I don’t like the obj.constructor .name that much either, but what else is there to do? (can’t tell anything about IE, due to a lack of it)

[Dormilich]

found some clone code … don’t know how good it is (yet)

function clone(obj) {
  function Constructor(){}
  Constructor.prototype = obj;
  return new Constructor();
}

[edit]not very good …[/edit]