Categories
clone javascript javascript-objects

How do I correctly clone a JavaScript object?

3546

I have an object x. I’d like to copy it as object y, such that changes to y do not modify x. I realized that copying objects derived from built-in JavaScript objects will result in extra, unwanted properties. This isn’t a problem, since I’m copying one of my own literal-constructed objects.

How do I correctly clone a JavaScript object?

26

  • 34

    See this question: stackoverflow.com/questions/122102/…

    – Niyaz

    Jun 21, 2011 at 10:13

  • 285

    For JSON, I use mObj=JSON.parse(JSON.stringify(jsonObject));

    – Lord Loh.

    Feb 2, 2013 at 10:09

  • 77

    I really don’t get why no one suggests Object.create(o), it does everything the author asks?

    Aug 8, 2014 at 15:23

  • 54

    var x = { deep: { key: 1 } }; var y = Object.create(x); x.deep.key = 2; After doing this, y.deep.key will also be 2, hence Object.create CAN NOT BE USED for cloning…

    Jul 4, 2015 at 15:04


  • 21

    @r3wt that will not work… Please post only after doing basic test of the solution..

    – user3275211

    Feb 16, 2016 at 18:54

1745

2022 update

There’s a new JS standard called structured cloning. It works on all browsers:

const clone = structuredClone(object);

Old answer

To do this for any object in JavaScript will not be simple or straightforward. You will run into the problem of erroneously picking up attributes from the object’s prototype that should be left in the prototype and not copied to the new instance. If, for instance, you are adding a clone method to Object.prototype, as some answers depict, you will need to explicitly skip that attribute. But what if there are other additional methods added to Object.prototype, or other intermediate prototypes, that you don’t know about? In that case, you will copy attributes you shouldn’t, so you need to detect unforeseen, non-local attributes with the hasOwnProperty method.

In addition to non-enumerable attributes, you’ll encounter a tougher problem when you try to copy objects that have hidden properties. For example, prototype is a hidden property of a function. Also, an object’s prototype is referenced with the attribute __proto__, which is also hidden, and will not be copied by a for/in loop iterating over the source object’s attributes. I think __proto__ might be specific to Firefox’s JavaScript interpreter and it may be something different in other browsers, but you get the picture. Not everything is enumerable. You can copy a hidden attribute if you know its name, but I don’t know of any way to discover it automatically.

Yet another snag in the quest for an elegant solution is the problem of setting up the prototype inheritance correctly. If your source object’s prototype is Object, then simply creating a new general object with {} will work, but if the source’s prototype is some descendant of Object, then you are going to be missing the additional members from that prototype which you skipped using the hasOwnProperty filter, or which were in the prototype, but weren’t enumerable in the first place. One solution might be to call the source object’s constructor property to get the initial copy object and then copy over the attributes, but then you still will not get non-enumerable attributes. For example, a Date object stores its data as a hidden member:

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

var d1 = new Date();

/* Executes function after 5 seconds. */
setTimeout(function(){
    var d2 = clone(d1);
    alert("d1 = " + d1.toString() + "\nd2 = " + d2.toString());
}, 5000);

The date string for d1 will be 5 seconds behind that of d2. A way to make one Date the same as another is by calling the setTime method, but that is specific to the Date class. I don’t think there is a bullet-proof general solution to this problem, though I would be happy to be wrong!

When I had to implement general deep copying I ended up compromising by assuming that I would only need to copy a plain Object, Array, Date, String, Number, or Boolean. The last 3 types are immutable, so I could perform a shallow copy and not worry about it changing. I further assumed that any elements contained in Object or Array would also be one of the 6 simple types in that list. This can be accomplished with code like the following:

function clone(obj) {
    var copy;

    // Handle the 3 simple types, and null or undefined
    if (null == obj || "object" != typeof obj) return obj;

    // Handle Date
    if (obj instanceof Date) {
        copy = new Date();
        copy.setTime(obj.getTime());
        return copy;
    }

    // Handle Array
    if (obj instanceof Array) {
        copy = [];
        for (var i = 0, len = obj.length; i < len; i++) {
            copy[i] = clone(obj[i]);
        }
        return copy;
    }

    // Handle Object
    if (obj instanceof Object) {
        copy = {};
        for (var attr in obj) {
            if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy obj! Its type isn't supported.");
}

The above function will work adequately for the 6 simple types I mentioned, as long as the data in the objects and arrays form a tree structure. That is, there isn’t more than one reference to the same data in the object. For example:

// This would be cloneable:
var tree = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "right" : null,
    "data"  : 8
};

// This would kind-of work, but you would get 2 copies of the 
// inner node instead of 2 references to the same copy
var directedAcylicGraph = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "data"  : 8
};
directedAcyclicGraph["right"] = directedAcyclicGraph["left"];

// Cloning this would cause a stack overflow due to infinite recursion:
var cyclicGraph = {
    "left"  : { "left" : null, "right" : null, "data" : 3 },
    "data"  : 8
};
cyclicGraph["right"] = cyclicGraph;

It will not be able to handle any JavaScript object, but it may be sufficient for many purposes as long as you don’t assume that it will just work for anything you throw at it.

4

  • This is missing symbol keys and symbol values. Nowadays, using Object.getOwnPropertyDescriptors is better.

    Jul 10, 2021 at 15:33

  • structuredClone is only 75% compatible globally

    May 17 at 21:27

  • In Nodejs, structuredClone(object) works for node v17.0.0 and later.

    Jun 11 at 7:08

  • 1

    Update on @JoshuaDavid, currently supported in 82.57% of all browsers.

    Jun 15 at 14:23


1134

If you do not use Dates, functions, undefined, regExp or Infinity within your object, a very simple one liner is JSON.parse(JSON.stringify(object)):

const a = {
  string: 'string',
  number: 123,
  bool: false,
  nul: null,
  date: new Date(),  // stringified
  undef: undefined,  // lost
  inf: Infinity,  // forced to 'null'
}
console.log(a);
console.log(typeof a.date);  // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date);  // result of .toISOString()

This works for all kind of objects containing objects, arrays, strings, booleans and numbers.

See also this article about the structured clone algorithm of browsers which is used when posting messages to and from a worker. It also contains a function for deep cloning.

4

  • 1

    sometimes the best answers are the simplest. genius.

    – dewd

    Nov 23, 2021 at 16:30

  • Helpful, but when comparing objects which contains other objects, I ran through unexpected behaviour when two exactly equal objects where not taken as equals. used JSON.stringify(x) == JSON.stringify(JSON.parse(JSON.stringify(a))) to fix it. For some reason, comparing as strings works perfectly as expected when comparing, could not match otherwise.

    Apr 28 at 13:36

  • @AgustinL.Lacuara You cannot compare complex datatypes in JS. a={};b={}; a==b is false. But after a=b it becomes true, because it is not only identical but it is the same object.

    – heinob

    Apr 28 at 18:47

  • does the job, but, this is goes against any good programming practice. In brazil, we call that a ‘Gambiarra’

    Jul 5 at 19:03

810

With jQuery, you can shallow copy with extend:

var copiedObject = jQuery.extend({}, originalObject)

subsequent changes to the copiedObject will not affect the originalObject, and vice versa.

Or to make a deep copy:

var copiedObject = jQuery.extend(true, {}, originalObject)

0