Title: Cloning: what's the fastest alternative to JSON.parse(JSON.stringify(x))?
Tags: javascript
Question: What's the fastest alternative to 

```JSON.parse(JSON.stringify(x))
```

There must be a nicer/built-in way to perform a deep clone on objects/arrays, but I haven't found it yet.

Any ideas?

Comment: @jishi you mean [`Node`](http://www.w3.org/TR/domcore/#interface-node) has a [`.cloneNode`](http://www.w3.org/TR/domcore/#dom-node-clonenode) method

Comment: JSON.parse(JSON.stringify(x)) is NOT a valid way to clone objects. If you had a method as an Objects member this method will not be copied. Just try to run this code `JSON.parse(JSON.stringify({ a: '1', foo: (a) => a*a }))`. And you will see that the **foo** method is dropped.

Comment: JSON serialization and parsing is painfully slow, so any native methods of creating your objects is probably faster. As a side note, DOM-objects do have a native clone() method.

Comment: possible duplicate of [What is the most efficient way to clone a JavaScript object?](http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object)

Comment: @Raynos: ah, yes, my bad. To much jQuery.

Comment: This question is confusing - are you talking about general JavaScript objects (there is no such thing as arrays) - or JSON which is a subset of JavaScript objects?

Here is the accepted answer: No, there is no build in way to deep clone objects.

And deep cloning is a difficult and edgey thing to deal with.

Lets assume that a method ```deepClone(a)``` should return a "deep clone" of b.

Now a "deep clone" is an object with the same [[Prototype]] and having all the own properties cloned over.

For each clone property that is cloned over, if that has own properties that can be cloned over then do so, recursively.

Of course were keeping the meta data attached to properties like [[Writable]] and [[Enumerable]] in-tact. And we will just return the thing if it's not an object.

```var deepClone = function (obj) {
    try {
        var names = Object.getOwnPropertyNames(obj);
    } catch (e) {
        if (e.message.indexOf("not an object") &gt; -1) {
            // is not object
            return obj;
        }    
    }
    var proto = Object.getPrototypeOf(obj);
    var clone = Object.create(proto);
    names.forEach(function (name) {
        var pd = Object.getOwnPropertyDescriptor(obj, name);
        if (pd.value) {
            pd.value = deepClone(pd.value);
        }
        Object.defineProperty(clone, name, pd);
    });
    return clone;
};
```

This will fail for a lot of edge cases.

Live Example

As you can see you can't deep clone objects generally without breaking their special properties (like ```.length``` in array). To fix that you have to treat ```Array``` seperately, and then treat every special object seperately.

What do you expect to happen when you do ```deepClone(document.getElementById("foobar"))``` ?

As an aside, shallow clones are easy.

```Object.getOwnPropertyDescriptors = function (obj) {
    var ret = {};
    Object.getOwnPropertyNames(obj).forEach(function (name) {
        ret[name] = Object.getOwnPropertyDescriptor(obj, name);
    });
    return ret;
};

var shallowClone = function (obj) {
    return Object.create(
        Object.getPrototypeOf(obj),
        Object.getOwnPropertyDescriptors(obj)
    );
};
```

Comment for this answer: Edge cases being cyclic references and host object references?
Comment for this answer: @katspaugh and special objects like `Array` and it's `.length` magic, I think `Date` also has magic in there somewhere. And Host objects, yes. I don't know what's an easy fix for cyclic references.
Comment for this answer: @AndyE Why you lie. Date has magic [`console.log(Object.create(Date.prototype));
console.log(new Date());`](http://jsfiddle.net/BcNjU/5/)
Comment for this answer: @Raynos: `Date` doesn't have any magic.  We've been over this :-p
Comment for this answer: @Raynos: that's like saying String has magic -  `console.log((new String()).hasOwnProperty("length"), Object.create(String.prototype).hasOwnProperty("length"))` - the "magic" is clearly done in the constructor.

Here is another answer: I was actually comparing it against ```angular.copy```

You can run the JSperf test here:
https://jsperf.com/angular-copy-vs-json-parse-string

I'm comparing:

```myCopy = angular.copy(MyObject);
```

vs

```myCopy = JSON.parse(JSON.stringify(MyObject));
```

This is the fatest of all test I could run on all my computers


Comment for this answer: With both of you named Alex, I was very confused and thought you were talking to yourself.
Comment for this answer: JSON parse will remove undefined or anonymous empty functions 

var orig  = {a: "A", b: undefined};
var assigned = Object.assign({}, orig); //{a: "A", b: undefined}
var jsoned = JSON.parse(JSON.stringify(orig)) // {a: "A"}

https://medium.com/@pmzubar/why-json-parse-json-stringify-is-a-bad-practice-to-clone-an-object-in-javascript-b28ac5e36521

Here is another answer: The 2022 solution for this is to use structuredClone
See : https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
```structuredClone(x)
```


Here is another answer: Cyclic references are not really an issue. I mean they are but that's just a matter of proper record keeping. Anyway quick answer for this one. Check this: 

https://github.com/greatfoundry/json-fu

In my mad scientist lab of crazy javascript hackery I've been putting the basic implementation to use in serializing the entirety of the javascript context including the entire DOM from Chromium, sending it over a websocket to Node and reserializing it successfully. The only cyclic issue that is problematic is the retardo navigator.mimeTypes and navigator.plugins circle jerking one another to infinity, but easily solved. 

```(function(mimeTypes, plugins){
    delete navigator.mimeTypes;
    delete navigator.plugins;
    var theENTIREwindowANDdom = jsonfu.serialize(window);
    WebsocketForStealingEverything.send(theENTIREwindowANDdom);
    navigator.mimeTypes = mimeTypes;
    navigator.plugins = plugins;
})(navigator.mimeTypes, navigator.plugins);
```

JSONFu uses the tactic of creating Sigils which represent more complex data types. Like a MoreSigil which say that the item is abbreviated and there's X levels deeper which can be requested. It's important to understand that if you're serializing EVERYTHING then it's obviously more complicated to revive it back to its original state. I've been experimenting with various things to see what's possible, what's reasonable, and ultimately what's ideal. For me the goal is a bit more auspicious than most needs in that I'm trying to get as close to merging two disparate and simultaneous javascript contexts into a reasonable approximation of a single context. Or to determine what the best compromise is in terms of exposing the desired capabilities while not causing performance issues. When you start looking to have revivers for functions then you cross the land from data serialization into remote procedure calling.

A neat hacky function I cooked up along the way classifies all the properties on an object you pass to it into specific categories. The purpose for creating it was to be able to pass a window object in Chrome and have it spit out the properties organized by what's required to serialize and then revive them in a remote context. Also to accomplish this without any sort of preset cheatsheet lists, like a completely dumb checker that makes the determinations by prodding the passed value with a stick. This was only designed and ever checked in Chrome and is very much not production code, but it's a cool specimen.

```// categorizeEverything takes any object and will sort its properties into high level categories
// based on it's profile in terms of what it can in JavaScript land. It accomplishes this task with a bafflingly
// small amount of actual code by being extraordinarily uncareful, forcing errors, and generally just
// throwing caution to the wind. But it does a really good job (in the one browser I made it for, Chrome,
// and mostly works in webkit, and could work in Firefox with a modicum of effort)
//
// This will work on any object but its primarily useful for sorting the shitstorm that
// is the webkit global context into something sane.
function categorizeEverything(container){
    var types = {
        // DOMPrototypes are functions that get angry when you dare call them because IDL is dumb.
        // There's a few DOM protos that actually have useful constructors and there currently is no check.
        // They all end up under Class which isn't a bad place for them depending on your goals.
        // [Audio, Image, Option] are the only actual HTML DOM prototypes that sneak by.
        DOMPrototypes: {},
        // Plain object isn't callable, Object is its [[proto]]
        PlainObjects: {},
        // Classes have a constructor
        Classes: {},
        // Methods don't have a "prototype" property and  their [[proto]]  is named "Empty"
        Methods: {},
        // Natives also have "Empty" as their [[proto]]. This list has the big boys:
        // the various Error constructors, Object, Array, Function, Date, Number, String, etc.
        Natives: {},
        // Primitives are instances of String, Number, and Boolean plus bonus friends null, undefined, NaN, Infinity
        Primitives: {}
    };

    var str = ({}).toString;
    function __class__(obj){ return str.call(obj).slice(8,-1); }

    Object.getOwnPropertyNames(container).forEach(function(prop){
        var XX = container[prop],
            xClass = __class__(XX);
        // dumping the various references to window up front and also undefineds for laziness
        if(xClass == "Undefined" || xClass == "global") return;

        // Easy way to rustle out primitives right off the bat,
        // forcing errors for fun and profit.
        try {
            Object.keys(XX);
        } catch(e) {
            if(e.type == "obj_ctor_property_non_object")
                return types.Primitives[prop] = XX;
        }

        // I'm making a LOT flagrant assumptions here but process of elimination is key.
        var isCtor = "prototype" in XX;
        var proto = Object.getPrototypeOf(XX);

        // All Natives also fit the Class category, but they have a special place in our heart.
        if(isCtor &amp;&amp; proto.name == "Empty" ||
           XX.name == "ArrayBuffer" ||
           XX.name == "DataView"    ||
           "BYTES_PER_ELEMENT" in XX) {
                return types.Natives[prop] = XX;
        }

        if(xClass == "Function"){
            try {
                // Calling every single function in the global context without a care in the world?
                // There's no way this can end badly.
                // TODO: do this nonsense in an iframe or something
                XX();
            } catch(e){
                // Magical functions which you can never call. That's useful.
                if(e.message == "Illegal constructor"){
                    return types.DOMPrototypes[prop] = XX;
                }
            }

            // By process of elimination only regular functions can still be hanging out
            if(!isCtor) {
                return types.Methods[prop] = XX;
            }
        }

        // Only left with full fledged objects now. Invokability (constructor) splits this group in half
        return (isCtor ? types.Classes : types.PlainObjects)[prop] = XX;

        // JSON, Math, document, and other stuff gets classified as plain objects
        // but they all seem correct going by what their actual profiles and functionality
    });
    return types;
};
```

Comment for this answer: @benvie Would this be applicable to [my question here](http://stackoverflow.com/questions/35952712/how-to-make-cloned-dom-element-json-serializable)?
Comment for this answer: Almost as terrifying as it is off-topic.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 4, 'CommentCount': 6, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2011:00:10/27/11', 'FavoriteCount': 16.0, 'PostTypeId': 1, 'Tags': '<javascript>', 'Title': "Cloning: what's the fastest alternative to JSON.parse(JSON.stringify(x))?", 'ViewCount': 39155, 'id': 7914968, 'user_AboutMe': '', 'user_AccountId': 44262.0, 'user_DisplayName': 'fadedbee', 'user_Reputation': 40466.0, 'user_Views': 1877.0, 'user_id': 129805.0}}