Deep cloning Objects in JavaScript with Circular Reference

In JavaScript, object cloning is a common task, but deep copying an object while also handling circular references presents a unique challenge. Circular references occur when an object contains a reference to itself or to another object that eventually leads back to the original object. In this blog post, we’ll explore how to implement a function that performs a deep copy of an object while effectively handling circular references.

Understanding Deep Copying: Deep copying an object involves creating a complete and independent copy of the original object, including all nested properties and their values. Unlike shallow copying, which only creates a copy of the top-level properties, deep copying ensures that every level of nesting is duplicated.

Challenges of Circular References: Circular references can complicate the deep copying process, leading to infinite recursion loops if not handled properly. When encountering a circular reference, it’s essential to detect it and break the cycle to prevent the function from getting stuck in an endless loop.

Implementing Deep Copying with Circular Reference Handling: To tackle the challenge of deep copying with circular reference handling, we can use a technique called memoization. Memoization involves keeping track of already visited objects and their corresponding copies to avoid duplicating them again. We use WeakMap to achieve this.

function deepCopyWithCircular(obj, memo = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  if (memo.has(obj)) {
    return memo.get(obj);
  }

  const newObj = Array.isArray(obj) ? [] : {};
  memo.set(obj, newObj);

  for (let key in obj) {
    newObj[key] = deepCopyWithCircular(obj[key], memo);
  }

  return newObj;
}

we need to handle Date, Arrays and undefined scenarios properly. Like the way we have done for normal object deep clone(Deep Cloningan object in JavaScript)

const obj = {
  a: 1,
  b: {
    c: 'Hello',
    d: null,
  },
};

obj.e = obj; // Create a circular reference

const copy = deepCopyWithCircular(obj);
console.log(copy);

Deep cloning Objects in JavaScript with Circular Reference Handling