What is the most efficient way to clone a JavaScript object?

Question

What is the most efficient way to clone a JavaScript object? I've seen:

obj = eval(uneval(o));

but that's not cross platform (FF only). I've done (in Mootools 1.2) things like this:

obj = JSON.decode(JSON.encode(o));

but question the efficiency. I've also seen recursive copying function, etc. I'm pretty surprised that out-of-the-box JavaScript doesn't have a method for doing this.

Answer 1

In Prototype you would do something like

newObject = Object.clone(myObject);

The Prototype documentation notes that this makes a shallow copy.

Answer 2

There doesn't seem to be an in-built one, you could try:

function clone(obj){
    if(obj == null || typeof(obj) != 'object')
        return obj;

    var temp = obj.constructor(); // changed

    for(var key in obj)
        temp[key] = clone(obj[key]);
    return temp;
}

There's a lengthy post with many contributing comments on Keith Deven's blog.

If you want to stick to a framework, JQuery also has a clone() function:

// Clone current element
var cloned = $(this).clone();

There were reported issues previously with this not working in Internet Explorer, but these were resolved as of version 1.2.3.

Answer 3

function clone(obj)
 { var clone = {};
   clone.prototype = obj.prototype;
   for (property in obj) clone[property] = obj[property];
   return clone;
 }

Answer 4

I want to note that the .clone() method in jQuery only clones DOM elements - in order to clone JavaScript objects you would do:

  // Shallow copy
  var newObject = jQuery.extend({}, oldObject);

  // Deep copy
  var newObject = jQuery.extend(true, {}, oldObject);

More information can be found in the jQuery documentation.

I also want to note that the deep copy is actually much smarter than what is shown above - it's able to avoid many traps (trying to deep extend a DOM element, for example). It's used frequently in jQuery core and in plugins to great effect.

Answer 5

function deepClone(obj, CloneObj) {
       CloneObj.clear();
       jQuery.each(obj, function(i, val) {
           var newObject = jQuery.extend(true, {}, val);
           CloneObj[i] = newObject;
       });
   }

Answer 6

Has anyone tried this?

Object.clone = function ()
{
    var ClonedObject = function(){};
    ClonedObject.prototype = this;
    return new ClonedObject;
}

It seems to work and I can't see what pitfalls would be. In my tests the cloned object is instanceof the correct objects.

Note: it could also be implemented as a standalone function, i.e.

function clone(object)
{
    // (replace "this" with "object")
    ...
}

Answer 7

Code:

// extends 'from' object with members from 'to'. If 'to' is null, a deep clone of 'from' is returned
function extend(from, to)
{
    if (from == null || typeof from != "object") return from;
    if (from.constructor != Object && from.constructor != Array) return from;
    if (from.constructor == Date || from.constructor == RegExp || from.constructor == Function ||
     from.constructor == String || from.constructor == Number || from.constructor == Boolean)
     return new from.constructor(from);

    to = to || new from.constructor();

    for (var name in from)
    {
     to[name] = typeof to[name] == "undefined" ? this.extend(from[name], null) : to[name];
    }

    return to;
}

Test:

var obj =
{
    date: new Date(),
    func: function(q) { return 1 + q; },
    num: 123,
    text: "asdasd",
    array: [1, "asd"],
    regex: new RegExp(/aaa/i),
    subobj:
    {
     num: 234,
     text: "asdsaD"
    }
}

var clone = extend(obj);

Answer 8

This is what I'm using:

function cloneObject(obj) {
        var clone = {};
        for(var i in obj) {
            if(typeof(obj[i])=="object")
                clone[i] = cloneObject(obj[i]);
            else
                clone[i] = obj[i];
        }
        return clone;
    }

Answer 9

Object.prototype.clone = function() {
  var newObj = (this instanceof Array) ? [] : {};
  for (i in this) {
    if (i == 'clone') continue;
    if (this[i] && typeof this[i] == "object") {
      newObj[i] = this[i].clone();
    } else newObj[i] = this[i]
  } return newObj;
};

Answer 10

dojo.clone apparently clones "anything". Worth a look, perhaps?

http://api.dojotoolkit.org/jsdoc/1.3/dojo.clone

Answer 11

in my FF3.6/IE8/Chrome4 works only this solution:

function cloneObject(obj){
  var newObj = (obj instanceof Array) ? [] : {};
  for (var i in obj) {
    if (obj[i] && typeof obj[i] == "object") 
      newObj[i] = obj[i].clone();
    else
      newObj[i] = obj[i];
  }
  return newObj;
}

I don't know why, but Object's prototype extension doesn't work well in FF ;(

Answer 12

// obj target object, vals source object

var setVals = function (obj, vals) {
if (obj && vals) {
      for (var x in vals) {
        if (vals.hasOwnProperty(x)) {
          if (obj[x] && typeof vals[x] === 'object') {
            obj[x] = setVals(obj[x], vals[x]);
          } else {
            obj[x] = vals[x];
          }
        }
      }
    }
    return obj;
  };

Answer 13

The way you are supposed to do it in Mootools.

var my_object = {one:1,two:2, subobject:{a:['a','A']}},three:'3'};
var my_object_clone = $merge({},my_object);

Answer 14

for mootools in particular this severs the reference between the new obj and the old one:

var obj = {foo: 'bar'}; 
var bar = $unlink(obj);

you can also do

var obj = {foo: 'bar'};
var bar = $merge({}, $obj);

although $merge uses $unlink anyway.

p.s. for mootools 1.3 this becomes Object.clone

Answer 15

Crockford suggests (and I prefer) using this function:

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

var newObject = object(oldObject);

It's terse, works as expected and you don't need a library.

Answer 16

There seems to be no ideal deep clone operator yet for array-like objects. As the code below illustrates, John Resig's jQuery cloner turns arrays with non-numeric properties into objects that are not arraays, and RegDwight's JSON cloner drops the non-numeric properties. The following tests illustrate these points on multiple browsers:

function jQueryClone(obj) {
   return jQuery.extend(true, {}, obj)
}

function JSONClone(obj) {
   return JSON.parse(JSON.stringify(obj))
}

var arrayLikeObj = [[1, "a", "b"], [2, "b", "a"]];
arrayLikeObj.names = ["m", "n", "o"];
var JSONCopy = JSONClone(arrayLikeObj);
var jQueryCopy = jQueryClone(arrayLikeObj);

alert("Is arrayLikeObj an array instance?" + (arrayLikeObj instanceof Array) +
      "\nIs the jQueryClone an array instance? " + (jQueryCopy instanceof Array) +
      "\nWhat are the arrayLikeObj names? " + arrayLikeObj.names +
      "\nAnd what are the JSONClone names? " + JSONCopy.names)