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

but that's currently Firefox-only. In Mootools 1.2, I've done things like

but question the efficiency.

I've also seen recursive copying functions with various flaws. I'm surprised no canonical solution exists.
improve this question | comment
Quentin Jerde Created at: 2013-11-13 17:07:28 UTC By Quentin Jerde
eval() is evil. Even if targeting a browser where eval(uneval(o)); works I would definitely avoid that technique. - Mrs. Sheldon Ondricka
Eval is not evil. Using eval poorly is. If you are afraid of its side effects you are using it wrong. The side effects you fear are the reasons to use it. Did any one by the way actually answer your question? - Trycia Eichmann
Regarding the jQuery tag -- the OP did not tag the question jQuery, the question's text does not mention jQuery. Indeed, the question specifically mentions "out-of-the-box". If any library tag would be appropriate, it would be mootools. Let's not have an edit war, this is not a jQuery question. - Elenora Murphy
Blindly following this algorithm is not good. if(question.match(/\beval\b/)){ append_comment("Eval is evil");}. You must now when its Evil. Thanks @JamesAndino for such a nice comment. - Ena Bins DVM
Cloning objects is a tricky business, especially with custom objects of arbitrary collections. Which probably why there is no out-of-the box way to do it. - Gino Medhurst
30 Answers
0
I have two good answers depending on whether your objective is to clone a "plain old javascript object" or not.

Let's also assume that your intention is to create a complete clone with no prototype references back to the source object.  If you're not interested in a complete clone, then you can use many of the Object.clone() routines provided in some of the other answers (Crockford's pattern).

For plain old JavaScript objects, a tried and true good way to clone an object in modern runtimes is quite simply:

var clone = JSON.parse(JSON.stringify(obj));


Note that the source object must be a pure JSON object.  This is to say, all of its nested properties must be scalars (like boolean, string, array, object, etc).  Any functions or special objects like RegExp or Date will not be cloned.

Is it efficient?  Heck yes.  We've tried all kinds of cloning methods and this works best.  I'm sure some ninja could conjure up a faster method.  But I suspect we're talking about marginal gains.

This approach is just simple and easy to implement.  Wrap it into a convenience function and if you really need to squeeze out some gain, go for at a later time.

Now, for non-plain JavaScript objects, there isn't a really simple answer.  In fact, there can't be because of the dynamic nature of JavaScript functions and inner object state.  Deep cloning a JSON structure with functions inside requires you recreate those functions and their inner context.  And JavaScript simply doesn't have a standardized way of doing that.

The correct way to do this, once again, is via a convenience method that you declare and reuse within your code.  The convenience method can be endowed with some understanding of your own objects so you can make sure to properly recreate the graph within the new object.

We're written our own but the best general approach I've seen is covered here:

http://davidwalsh.name/javascript-clone

This is the right idea.  The author (David Walsh) has commented out the cloning of generalized functions.  This is something you might choose to do, depending on your use case.

The main idea is that you need to special handle the instantiation of your functions (or prototypal classes, so to speak) on a per-type basis.  Here, he's provided a few examples for RegExp and Date.

Not only is this code brief but it's also very readable.  It's pretty easy to extend.

Is this efficient?  Heck yes.  Given that the goal is to produce a true deep-copy clone, then you're going to have to walk the members of the source object graph.  With this approach, you can tweak exactly which child members to treat and how to manually handle custom types.

So there you go.  Two approaches.  Both efficient in my view.
0
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.
0
Checkout this benchmark: http://jsperf.com/cloning-an-object/2

In my previous tests where speed was a main concern I found JSON.parse(JSON.stringify(obj)) to be the fastest way to Deep clone an object (it beats out JQuery.extend with deep flag set true by 10-20%).

JQuery.extend is pretty fast when deep flag is set to false (shallow clone). It is a good option because it includes some extra logic for type validation and doesnt copy over undefined properties, etc. but this will also slow you down a little.

If you know the structure of the objects you are trying to clone or can avoid deep nested arrays you can write a simple for (var i in obj) loop to clone your object while checking hasOwnProperty and it will be much much faster than JQuery. 

Lastly if you are attempting to clone a known object structure in a hot loop you can get MUCH MUCH MORE PERFORMANCE by simply in-lining the clone procedure and manually constructing the object. 
JS trace engines suck at optimizing for..in loops and checking hasOwnProperty will slow you down as well. Manual clone when speed is an absolute must.

var clonedObject = {
  knownProp: obj.knownProp,
  ..
}


I hope you found this helpful.
0
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.
0
HTML5 includes a way to create deep clones of objects. It only works for some built-in types, but it's considerably more flexible than using JSON: the internal structured clone algorithm also supports Dates, RegExps, Files, Blobs, FileLists, ImageDatas, sparse Arrays, types defined in other specification such as Typed Arrays, and recursive/cyclical structures.

Sadly, this feature is not directly exposed through any API. Here are two ways that structured clones can be created. Both have drawbacks that make them unsuitable in many cases. Hopefully it will one day be possible to created structured clones without any side effects.

history.pushState() and history.replaceState() both create a structured clone of their first argument, and assign that value to history.state. You can use this to create a structured clone of any object like this:

function structuredClone(obj) {
    var oldState = history.state;
    history.replaceState(obj);
    var clonedObj = history.state;
    history.replaceState(oldState);
    return clonedObj;
}


Example Usage (jsfiddle)

var original = { date: new Date(), number: Math.random() };
original.self = original;

var clone = structuredClone(original);

// They're different objects:
console.log(original !== clone);
console.log(original.date !== clone.date);

// They're cyclical:
console.log(original.self === original);
console.log(clone.self === clone);

// They contain equivalent values:
console.log(original.number === clone.number);
console.log(Number(original.date) === Number(clone.date));


This shouldn't leave any trace in the browser's history, but it is very slow and may cause the browser to begin to briefly display its loading animation. If you attempt to clone many objects at once, it may cause the browser (including other tabs and windows) to become unresponsive until the cloning is complete. (The cloning itself isn't slow; that's a side-effect of manipulating the history.)

The alternative is to call the window.postMessage method to send a message containing the target object to window, then listen for the message event containing the cloned object. Unfortunately, this is inherently asynchronous.

If asynchronous cloning is acceptable, here's a asyncStructuredClone(original, callback(clone)) function which will produce a structured clone of a target object and pass it to your callback. An exception will be raised if you attempt to clone an unsupported object.

var pendingCallbacks = {};

window.addEventListener('message', function(e) {
    var cloneId = e.data.cloneId,
        clonedValue = e.data.value;

    if (e.source === window && cloneId && cloneId in pendingCallbacks) {
        var callback = pendingCallbacks[cloneId];
        delete pendingCallbacks[cloneId];
        callback(clonedValue);
    }
});

var asyncStructuredClone = function(o, callback) {
    var cloneId = String(Math.random());
    pendingCallbacks[cloneId] = callback;
    window.postMessage({ value: o, cloneId: cloneId }, '*');
};


Example Usage (jsfiddle)

var original = { date: new Date(), number: Math.random() };
original.self = original;

asyncStructuredClone(original, function(clone) {
    // They're different objects:
    console.log(original !== clone);
    console.log(original.date !== clone.date);

    // They're cyclical:
    console.log(original.self === original);
    console.log(clone.self === clone);

    // They contain equivalent values:
    console.log(original.number === clone.number);
    console.log(Number(original.date) === Number(clone.date));
});

0
This is what I'm using:

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

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

Object.defineProperty( Object.prototype, "clone", {value: clone, enumerable: false});

0
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" ? 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);

0
I know this is an old post, but I thought this may be of some help to the next guy who stumbles along.

As long as you don't assign an object to anything it maintains no reference in memory.  So to make an object that you want to share among other objects, you'll have to create a factory like so:

var a = function(){
    return {
        father:'zacharias'
    };
},
b = a(),
c = a();
c.father = 'johndoe';
alert(b.father);

0
dojo.clone apparently clones "anything". Certainly worth a look, perhaps?

http://api.dojotoolkit.org/jsdoc/1.5/dojo.clone
0
If you're using it, the underscore.js library has a clone method.

var newObject = _.clone(oldObject);

0
There’s a library (called “clone”), that does this quite well. It provides the most complete recursive cloning/copying of arbitrary objects that I know of. It also supports circular references, which is not covered by the other answers, yet.

You can find it on npm, too. It can be used for the browser as well as Node.js.

Here is an example on how to use it:

Install it with

npm install clone


or package it with Ender.

ender build clone [...]


You can also download the source code manually.

Then you can use it in your source code.

var clone = require('clone');

var a = { foo: { bar: 'baz' } };  // inital value of a
var b = clone(a);                 // clone a -> b
a.foo.bar = 'foo';                // change a

console.log(a);                   // { foo: { bar: 'foo' } }
console.log(b);                   // { foo: { bar: 'baz' } }


(Disclaimer: I’m the author of the library.)
0
In Prototype you would do something like

newObject = Object.clone(myObject);


The Prototype documentation notes that this makes a shallow copy.
0
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)

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

0
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.
0
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 ;(
0
Shallow copy one-liner (ECMAScript 5th edition) :

var origin = { foo : {} };
var copy = Object.keys(origin).reduce(function(c,k){c[k]=origin[k];return c;},{});

console.log(origin, copy);
console.log(origin == copy); // false
console.log(origin.foo == copy.foo); // true

0
This isn't generally the most efficient solution, but it does what I need. Simple test cases below...

function clone(obj, clones) {
    // Makes a deep copy of 'obj'. Handles cyclic structures by
    // tracking cloned obj's in the 'clones' parameter. Functions 
    // are included, but not cloned. Functions members are cloned.
    var new_obj,
        already_cloned,
        t = typeof obj,
        i = 0,
        l,
        pair; 

    clones = clones || [];

    if (obj === null) {
        return obj;
    }

    if (t === "object" || t === "function") {

        // check to see if we've already cloned obj
        for (i = 0, l = clones.length; i < l; i++) {
            pair = clones[i];
            if (pair[0] === obj) {
                already_cloned = pair[1];
                break;
            }
        }

        if (already_cloned) {
            return already_cloned; 
        } else {
            if (t === "object") { // create new object
                new_obj = new obj.constructor();
            } else { // Just use functions as is
                new_obj = obj;
            }

            clones.push([obj, new_obj]); // keep track of objects we've cloned

            for (key in obj) { // clone object members
                if (obj.hasOwnProperty(key)) {
                    new_obj[key] = clone(obj[key], clones);
                }
            }
        }
    }
    return new_obj || obj;
}


Cyclic array test...

a = []
a.push("b", "c", a)
aa = clone(a)
aa === a //=> false
aa[2] === a //=> false
aa[2] === a[2] //=> false
aa[2] === aa //=> true


Function test...

f = new Function
f.a = a
ff = clone(f)
ff === f //=> true
ff.a === a //=> false

0
Here's a version of ConroyP's answer above that works even if the constructor has required parameters:

//If Object.create isn't already defined, we just do the simple shim, without the second argument,
//since that's all we need here
var object_create = Object.create;
if (typeof object_create !== 'function') {
    object_create = function(o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

function deepCopy(obj) {
    if(obj == null || typeof(obj) !== 'object'){
        return obj;
    }
    //make sure the returned object has the same prototype as the original
    var ret = object_create(obj.constructor.prototype);
    for(var key in obj){
        ret[key] = deepCopy(obj[key]);
    }
    return ret;
}


This function is also available in my simpleoo library.

Edit:

Here's a more robust version (thanks to Justin McCandless this now supports cyclic references as well):

function deepCopy(src, /* INTERNAL */ _visited) {
    if(src == null || typeof(src) !== 'object'){
        return src;
    }

    // Initialize the visited objects array if needed
    // This is used to detect cyclic references
    if (_visited == undefined){
        _visited = [];
    }
    // Otherwise, ensure src has not already been visited
    else {
        var i, len = _visited.length;
        for (i = 0; i < len; i++) {
            // If src was already visited, don't try to copy it, just return the reference
            if (src === _visited[i]) {
                return src;
            }
        }
    }

    // Add this object to the visited array
    _visited.push(src);

    //Honor native/custom clone methods
    if(typeof src.clone == 'function'){
        return src.clone(true);
    }

    //Special cases:
    //Date
    if (src instanceof Date){
        return new Date(src.getTime());
    }
    //RegExp
    if(src instanceof RegExp){
        return new RegExp(src);
    }
    //DOM Elements
    if(src.nodeType && typeof src.cloneNode == 'function'){
        return src.cloneNode(true);
    }

    //If we've reached here, we have a regular object, array, or function

    //make sure the returned object has the same prototype as the original
    var proto = (Object.getPrototypeOf ? Object.getPrototypeOf(src): src.__proto__);
    if (!proto) {
        proto = src.constructor.prototype; //this line would probably only be reached by very old browsers 
    }
    var ret = object_create(proto);

    for(var key in src){
        //Note: this does NOT preserve ES5 property attributes like 'writable', 'enumerable', etc.
        //For an example of how this could be modified to do so, see the singleMixin() function
        ret[key] = deepCopy(src[key], _visited);
    }
    return ret;
}

0
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);

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

0
In AngularJS:

angular.copy(source[, destination]);


http://docs.angularjs.org/api/angular.copy
0
// 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;
  };

0
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
0
although the question is closed, i think that this is the best solution if you want to generalize you object cloning algorithm.
It can be used with or without jquery, although i recommend leaving jquery's extend method out if you want you cloned object to have the same "class" as the original one.

function clone(obj){
    if(typeof(obj) == 'function')//it's a simple function
        return obj;
    //of it's not an object (but could be an array...even if in javascript arrays are objects)
    if(typeof(obj) !=  'object' || obj.constructor.toString().indexOf('Array')!=-1)
        if(JSON != undefined)//if we have the JSON obj
            try{
                return JSON.parse(JSON.stringify(obj));
            }catch(err){
                return JSON.parse('"'+JSON.stringify(obj)+'"');
            }
        else
            try{
                return eval(uneval(obj));
            }catch(err){
                return eval('"'+uneval(obj)+'"');
            }
    // I used to rely on jQuery for this, but the "extend" function returns
    //an object similar to the one cloned,
    //but that was not an instance (instanceof) of the cloned class
    /*
    if(jQuery != undefined)//if we use the jQuery plugin
        return jQuery.extend(true,{},obj);
    else//we recursivley clone the object
    */
    return (function _clone(obj){
        if(obj == null || typeof(obj) != 'object')
            return obj;
        function temp () {};
        temp.prototype = obj;
        var F = new temp;
        for(var key in obj)
            F[key] = clone(obj[key]);
        return F;
    })(obj);            
}

0
This is the fastest method I have created that doesn't use the prototype, so it will maintain hasOwnProperty in the new object. The solution is to iterate the top level properties of the original object, make 2 copies, delete each property from the original and then reset the original object and return the new copy. It only has to iterate as many times as top level properties. This saves all the if conditions to check if each property is a function/object/string etc, and doesn't have to iterate each descendant property. The only drawback is that the original object must be supplied with its original created namespace, in order to reset it.


copyDeleteAndReset:function(namespace,strObjName){
    var obj = namespace[strObjName],
    objNew = {},objOrig = {};
    for(i in obj){
        if(obj.hasOwnProperty(i)){
            objNew[i] = objOrig[i] = obj[i];
            delete obj[i];
        }
    }
    namespace[strObjName] = objOrig;
    return objNew;
}

var namespace = {};
namespace.objOrig = {
    '0':{
        innerObj:{a:0,b:1,c:2}
    }
}

var objNew = copyDeleteAndReset(namespace,'objOrig');
objNew['0'] = 'NEW VALUE';

console.log(objNew['0']) === 'NEW VALUE';
console.log(namespace.objOrig['0']) === innerObj:{a:0,b:1,c:2};

0
In YUI you can do Deep object/array copy by 

//For Safe clone.. in case where you need to delete items on the cloned objects
clonedObj = Y.Clone(obj, true); 

//For Unsafe clone
clonedObj = Y.Clone(obj, false); 


More details
0
Here is a comprehensive clone() method that can clone any js object. It handles almost all the cases:

function clone(src, deep) {

    var toString = Object.prototype.toString;
    if(!src && typeof src != "object"){
        //any non-object ( Boolean, String, Number ), null, undefined, NaN
        return src;
    }

    //Honor native/custom clone methods
    if(src.clone && toString.call(src.clone) == "[object Function]"){
        return src.clone(deep);
    }

    //DOM Elements
    if(src.nodeType && toString.call(src.cloneNode) == "[object Function]"){
        return src.cloneNode(deep);
    }

    //Date
    if(toString.call(src) == "[object Date]"){
        return new Date(src.getTime());
    }

    //RegExp
    if(toString.call(src) == "[object RegExp]"){
        return new RegExp(src);
    }

    //Function
    if(toString.call(src) == "[object Function]"){
        //Wrap in another method to make sure == is not true;
        //Note: Huge performance issue due to closures, comment this :)
        return (function(){
            src.apply(this, arguments);
        });

    }

    var ret, index;
    //Array
    if(toString.call(src) == "[object Array]"){
        //[].slice(0) would soft clone
        ret = src.slice();
        if(deep){
            index = ret.length;
            while(index--){
                ret[index] = clone(ret[index], true);
            }
        }
    }
    //Object
    else {
        ret = src.constructor ? new src.constructor() : {};
        for (var prop in src) {
            ret[prop] = deep
                ? clone(src[prop], true)
                : src[prop];
        }
    }

    return ret;
};

0
@David why not just use:

var newObject = JSON.parse(JSON.stringify(oldObject));


?
Your Answer