Javascript Deep Clone Object with Circular References

Question

I have copied the function below from an existing answer by Dmitriy Pichugin. This function can deep clone an object without any circular references- it works.

function deepClone( obj ) {
    if( !obj || true == obj ) //this also handles boolean as true and false
        return obj;
    var objType = typeof( obj );
    if( "number" == objType || "string" == objType ) // add your immutables here
        return obj;
    var result = Array.isArray( obj ) ? [] : !obj.constructor ? {} : new obj.constructor();
    if( obj instanceof Map )
        for( var key of obj.keys() )
            result.set( key, deepClone( obj.get( key ) ) );
    for( var key in obj )
    if( obj.hasOwnProperty( key ) )
            result[key] = deepClone( obj[ key ] );
    return result;
}

However, my program loops indefinitely and I have realised that this is due to a circular reference.

An example of a circular reference:

function A() {}
function B() {}

var a = new A();
var b = new B();

a.b = b;
b.a = a;

Answer 1

There is now structuredClone in the Web API which also works with circular references.

---

Previous answer

I would suggest to use a Map to map objects in the source with their copy in the destination. In fact, I ended up using WeakMap as suggested by Bergi. Whenever a source object is in the map, its corresponding copy is returned instead of recursing further.

At the same time some of the code in the original deepClone code can be optimised further:

• The first part testing for primitive values has a small issue: it treats new Number(1) differently from new Number(2). This is because of the == in the first if. It should be changed to ===. But really, the first few lines of code seem then equivalent to this test: Object(obj) !== obj

• I also rewrote some for loops into more functional expressions

This needs ES6 support:

function deepClone(obj, hash = new WeakMap()) {
    // Do not try to clone primitives or functions
    if (Object(obj) !== obj || obj instanceof Function) return obj;
    if (hash.has(obj)) return hash.get(obj); // Cyclic reference
    try { // Try to run constructor (without arguments, as we don't know them)
        var result = new obj.constructor();
    } catch(e) { // Constructor failed, create object without running the constructor
        result = Object.create(Object.getPrototypeOf(obj));
    }
    // Optional: support for some standard constructors (extend as desired)
    if (obj instanceof Map)
        Array.from(obj, ([key, val]) => result.set(deepClone(key, hash), 
                                                   deepClone(val, hash)) );
    else if (obj instanceof Set)
        Array.from(obj, (key) => result.add(deepClone(key, hash)) );
    // Register in hash    
    hash.set(obj, result);
    // Clone and assign enumerable own properties recursively
    return Object.assign(result, ...Object.keys(obj).map (
        key => ({ [key]: deepClone(obj[key], hash) }) ));
}
// Sample data
function A() {}
function B() {}
var a = new A();
var b = new B();
a.b = b;
b.a = a;
// Test it
var c = deepClone(a);
console.log('a' in c.b.a.b); // true

Answer 2

Since object cloning has a lot of pitfalls (circular references, proto chains, Set/Map, etc)
I suggest you to use one of well-tested popular solutions.

Like, lodash's _.cloneDeep or 'clone' npm module.

Answer 3

You can store the references and results in separate arrays and when you find a property with the same reference you just need to return the cached result.

function deepClone(o) {
    var references = [];
    var cachedResults = [];

    function clone(obj) {
        if (typeof obj !== 'object')
            return obj;
        var index = references.indexOf(obj);
        if (index !== -1)
            return cachedResults[index];
        references.push(obj);
        var result = Array.isArray(obj) ? [] :
            obj.constructor ? new obj.constructor() : {};
        cachedResults.push(result);
        for (var key in obj)
            if (obj.hasOwnProperty(key))
                result[key] = clone(obj[key]);
        return result;
    }
    return clone(o);
}

I removed the map and some of the other type comparisons to make it more readable.

Check @trincot's solid ES6 answer if you can target modern browsers.

Answer 4

const cloneDeep = src => {
  const clones = new WeakMap()
  return (function baseClone(src) {
    if (src !== Object(src)) {
      return src
    }
    if (clones.has(src)) {
      return clones.get(src)
    }
    const clone = {}
    clones.set(src, clone)
    Object.entries(src).forEach(([k, v]) => (clone[k] = baseClone(v)))
    return clone
  })(src)
}

const a = { x: 1 }
a.y = a
console.log(cloneDeep(a)) // <ref *1> { x: 1, y: [Circular *1] }

Answer 5

The basic idea is that you want to avoid a "Maximum callstack exceeded" situation.

In order to do that, when it comes time to clone an object, you need to first create an empty object, cache it (with something like a WeakMap) and then update the properties on that cached object. If you try to cache it after creating the copy, it will not be cached by the time it will be recursively referenced again (and thus the call stack error).

You want to do something like:

function deepClone(value, cache = new WeakMap()) {
  if(cache.has(value)) {
    return cache.get(value)
  }
  if(isPrimitive(value) || isFunction(value)) {
    return value;
  }
  if(value instanceof AnyParticularClass) {
    // handle specially in any cases you plan to support
  }
  if(isObject(value)) {
    const result = {}
    cache.set(value, result);
    Object.entries(value).forEach(function([key, val]) {
      result[key] = deepClone(val, cache);
    })
    return result
  }
  if(Array.isArray(value)) {
    return value.map(item => cloneDeep(item, cache));
  }
}

Additionally, there's no sense in cloning a function so just return that back out. Handling instances of classes will need to be handled