Cloning any javascript object by copying all own properties

Question

If I wanted to clone any javascript object (that's not null), I would think I could just copy all of its own properties (enumerable and non-enumerable) -- using Object.getOwnPropertyNames -- onto a new empty object.

But I've noticed that an example of a deep cloning function provided by Dojo toolkit (https://davidwalsh.name/javascript-clone) treats RegExp, Date, and Node objects as special cases, and lodash.cloneDeep also has a lot of logic that is a lot more complicated than simply copying properties, including having some special cases of its own and apparently not supporting all types of objects: (https://github.com/lodash/lodash/blob/master/.internal/baseClone.js).

Why is simply copying the object properties not sufficient? What else is there to a javascript object besides its properties that I don't know about?

EDIT: to be clear, I'm talking about deep cloning an object. Sorry for the confusion.

Answer 1

If the top level properties are all value objects like strings and numbers then just copying the top level properties is fine for a clone of an object. If there are any reference objects such as dates, arrays or other objects then all your are doing is copying a reference from one object to another. If you change the reference object on the clone you will mutate the original object.

Take a look at my clone function at https://stackblitz.com/edit/typescript-qmzgf7

If it is an array it clones every item in the array, if it is a date it creates a new date with the same time, if it is an object it clones every property else if just copies the property.

The cloned object can now be mutated without worrying about effects it might have on the original object.

const clone = obj =>
  Array.isArray(obj)
    ? obj.map(item => clone(item))
    : obj instanceof Date
      ? new Date(obj.getTime())
      : (typeof obj === 'object') && obj
        ? Object.getOwnPropertyNames(obj).reduce((o, prop) => ({ ...o, [prop]: clone(obj[prop]) }), {})
        : obj;
        
let original = { prop1: "Original", objProp: { prop1: "Original" } };
let swallowCopy = { ...original };
let clonedObj = clone(original);

clonedObj.prop1 = "Changed";
clonedObj.objProp.prop1 = "Changed";

console.log(`Original objects properties are '${original.prop1}' and '${original.objProp.prop1}'`);

swallowCopy.prop1 = "Changed";
swallowCopy.objProp.prop1 = "Changed";

console.log(`Original objects properties are '${original.prop1}' and '${original.objProp.prop1}'`);

Notice how modifying the property on the object property shallow copy causes the original to change as well.

Answer 2

The easiest way to clone an object in JS is by using the ... spread operator.

Let's say you have this object:

const object = { foo: 1, bar: 2 }

To clone it, you can simply declare:

const objectClone = {...object}.

This will create all the properties present in the original object onto the clone, as well as their values.

Now the problem is, if you have any object nested in there, the copies will be made by reference. Suppose the original object is this instead:

const student = { studentID: 1, tests: { test1: 90, test2: 95}}

If you create a copy of that object by using the spread operator(or Object.assign, spread is just syntactic sugar), the nested object will actually point to the object inside the original object! So repeating this:

const studentClone = {...student}

And now you edit a property of the nested object inside the clone:

studentClone.tests.test1 = 80

This will change the value in both clone, and original object, as the nested object is really just pointing to 1 object in memory.

Now what those utilities, like _.cloneDeep will do, is iterate through all inner objects in the object you're cloning, and repeat the process. You could technically do it yourself, but you wouldn't be able to do it on objects with many nested objects easily. Something like this:

const studentClone = {...studentClone, tests: {...studentClone.tests}}

This would create new objects, with no reference problems.

Hope this helped!

EDIT: Just adding, object spreading would only work properly for prototype objects, of course. Each instantiated objects,such as arrays, Date objects etc, would have their own way of cloning.

Arrays can be copied similarly, through [...array]. It does follow the same rules regarding to references. For dates, you can simply pass the original date object into the Date constructor again:

const clonedDate = new Date(date)

This is where the third-party utilities will come in handy, as they'll usually handle most use cases.

Answer 3

This answer does a good job of explaining two of the problems with cloning a normal JavaScript object: prototype properties and circular references. But to answer your question regarding certain built-in types, the TL;DR answer is that there are 'under the hood' properties that you have no programmatic access to.

Consider:

let foo = [1, 2];
let bar = {};
Object.assign(bar, foo);
Object.setPrototypeOf(bar, foo.constructor.prototype); // aka Array.prototype
bar[0]; // 1
bar instanceof Array; // true
bar.map(x => x + 1); // [] ????

Empty array? Why? Just to make sure we're not crazy

foo.map(x => x + 1); // [2, 3]

The reason why map (and the other array methods) fail to work is that an Array isn't simply an object: it has internal slot properties for the stuff you put in it that you don't get to see as the JavaScript programmer. As another example, every JavaScript object has an internal [[Class]] property that says what kind of object it is. Fortunately for us, there's a loophole in the spec that allows us indirect access to it: the good ol Object.prototype.toString.call hack. So let's see what that has to say about various stuff:

 Object.prototype.toString.call(true);   // [object Boolean]
 Object.prototype.toString.call(3);      // [object Number]
 Object.prototype.toString.call({});     // [object Object]
 Object.prototype.toString.call([]);     // [object Array]
 Object.prototype.toString.call(null);   // [object Null]
 Object.prototype.toString.call(/\w/);   // [object RegExp]
 Object.prototype.toString.call(JSON);   // [object JSON]
 Object.prototype.toString.call(Math);   // [object Math]

Let's see what it says about our foo and bar:

 Object.prototype.toString.call(foo); // [object Array]
 Object.prototype.toString.call(bar); // [object Object] Doh!

There's no way to 'convert' a random object to an Array... or a Date... or an HTMLElement... or a regex. Now, there are in fact ways to clone all of those things, but they require special logic: you can't just copy properties, or even set the prototype, because they have internal logic you can't access or directly replicate.

In normal everyday JavaScript programming we don't worry too much about this stuff, it's the kind of thing that's generally of interest to library authors (or language implementers). We everyday working stiffs just use a library to cover the edge cases and call it a day. But every once in a while the abstractions we use leak and the ugly bubbles through. This is however a great illustration of why you should probably use battle-tested libraries rather than trying to roll your own.

Answer 4

An object in javascript includes fields and functions together, and every field could be another object (Like Date type). If you copy a date field, it will be a reference type assignment. Example:

var obj1 = { myField : new Date('2018/9/17') };

var obj2 = {};
obj2.myField = obj1.myField;

Now, if we change "obj2.myField" like this:

obj2.myField.setDate(obj2.myField.getDate() + 2);

console.log(obj1.myField);   // Result =====>  Wed Sep 19 2018 00:00:00 GMT+0430

As you see, obj1 and obj2 still are linked.

Correct way to copy a date field:

obj2.myField = new Date(obj1.myField.getTime());

Answer 5

Most native objects(like you have mentioned - I don't know for is the correct naming for them; maybe built-in?) are treated as "simple": it does not make sense to copy Date object property-by-property. In the same time they all are mutable in some way.

let a = {test: new Date(1)}; // test === Thu Jan 01 1970 00:00:00GMT
let copy_a = {test: a.test}; // looks like cloned
a.test.setDate(12); // let's mutate original date
console.log(copy_a.test); // Thu Jan 12 1970 00:00:00GMT ooops modified as well

So you either should handle that exceptions(special cases) explicitly or take a risk of side effects for some cases.