Deep Copy in JavaScript

Some of you might have come across this issue. When you make a copy of an object and try to change the values of the new instance, it reflects in the original one too. Well I heard this not only applies to JavaScript, but also to most other object oriented languages; not sure though.

Here is a case:

Problem
//original object definition
var oOriginal = {
    memNum: 1,                                        // number
    memStr: "I am a string",                          // string
    memObj: {
        test1: "Old value"                            // we'll test
    },
    memArr: [                                         // array with object members
        "a string",                                   // simple string element
        {                                             // an object
            test2: "Try changing me"                  // we'll test
        }
    ]
};

//test 1
var oCopy = oOriginal;                                // normal copy

oCopy.memObj.test1 = "New value";                     // Problem
                                                      // - will reflect in oOriginal

alert(oOriginal.memObj.test1);                        // will show "New value"

//test 2
oCopy.memArr[1].test2 = "I am changed";               // Problem
                                                      // - will reflect in oOriginal

alert(oOriginal.memArr[1].test2);                     // will show "I am changed"

Here the problem is, the objects are never copied, only their references are. So what’s the solution? Iterate through all members of the original object, create the same members for target object and then assign corresponding values. And while doing so, we can’t forget array of objects.

We’ll add this simple line at the very top to help us detect Array objects. It basically adds our own custom extension to the Array class.

To recognize Array type objects
<html>
<head>
<title>Deep Copy in JavaScript</title>
<script language="javascript" type="text/javascript">
    Array.prototype.__isArray = true;
</script>
.
.

Now, here is the generic method that will help in iterating through all (type of) members of our original object and copy them one-by-one regardless of the depth of the object structure:

Solution
var ObjectHandler = {
    //public method
    getCloneOfObject: function(oldObject) {
        var tempClone = {};

        if (typeof(oldObject) == "object")
            for (prop in oldObject)
                // for array use private method getCloneOfArray
                if ((typeof(oldObject[prop]) == "object") &&
                                (oldObject[prop]).__isArray)
                    tempClone[prop] = this.getCloneOfArray(oldObject[prop]);
                // for object make recursive call to getCloneOfObject
                else if (typeof(oldObject[prop]) == "object")
                    tempClone[prop] = this.getCloneOfObject(oldObject[prop]);
                // normal (non-object type) members
                else
                    tempClone[prop] = oldObject[prop];

        return tempClone;
    },

    //private method (to copy array of objects) - getCloneOfObject will use this internally
    getCloneOfArray: function(oldArray) {
        var tempClone = [];

        for (var arrIndex = 0; arrIndex <= oldArray.length; arrIndex++)
            if (typeof(oldArray[arrIndex]) == "object")
                tempClone.push(this.getCloneOfObject(oldArray[arrIndex]));
            else
                tempClone.push(oldArray[arrIndex]);

        return tempClone;
    }
};

Now we’ll perform the same two tests mentioned in the ‘Problem’ block using this new helper – ObjectHandler

Test
//test 1
var oCopy = ObjectHandler.getCloneOfObject(oOriginal);

oCopy.memObj.test1 = "New value";

alert(oOriginal.memObj.test1);                        // will show "Old value"

//test 2
oCopy.memArr[1].test2 = "I am changed";

alert(oOriginal.memArr[1].test2);                     // will show "Try changing me"

In general, this solution is often referred to as "Deep Copy".

Cheers!

Santoshkumar

 

Be Sociable, Share!

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

The above does not handle nulls properly, here is another version

var ObjectHandler = {
//public method
getCloneOfObject: function(oldObject,level) {
var tempClone;

if ( level == undefined )
level = 0;

if ( oldObject == null )
tempClone = null;
else if ( typeof(oldObject) == “object” && oldObject.length != undefined )
{
//array
tempClone = new Array;
for ( var i = 0; i < oldObject.length; ++i )
{
tempClone[tempClone.length] = ObjectHandler.getCloneOfObject(oldObject[i],level + 1);
}
}
else if ( typeof(oldObject) == “object” )
{
//object
tempClone = new Object;
for ( var i in oldObject )
{
tempClone[i] = ObjectHandler.getCloneOfObject(oldObject[i],level + 1);
}
}
else
{
//plain
print (“Level=” + level + ” Plain=” + oldObject);
tempClone = oldObject;
}

return tempClone;
}
};

I appreciate the need to deep copy an object…however unless its absolutely necessary, i’d recommend designing your code to benefit from references

You can reduce to a single function and one loop by refactoring to use beget.

…and it works better that way with deeply-nested structures.

Instead of writing own methods we can try

document.cloneNode(objecttobecloned)

or

object.cloneNode(objecttobecloned)

@Saravanan: we’re talking about deep copy of JavaScript objects here, not DOM nodes.

function clone(srcInstance)
{
if(typeof(srcInstance) != ‘object’ || srcInstance == null)
return srcInstance;
var newInstance = srcInstance.constructor();
for(var i in srcInstance)
newInstance[i] = clone(srcInstance[i]);
return newInstance;
}

// this pass your test exemple and is very shorter version ;)

Exelent posts

Thank you for posting!

Why don’t you just serialise the object to Json and then reserialise it back?

You’ll get the stack overflow for recursively linked objects. Also, look at this example: var a { 1: 1, 2: 2 }, b: { 1: a, 2: a };. Here the condition b[1] === b[2] is true, but after cloning in this way it will be false.

Leave a comment

(required)

(required)