Deep cloning an object in Javascript

In JavaScript, object cloning is a common task, but deep cloning, which involves creating a complete and independent copy of an object and its nested properties, presents unique challenges. Here, we’ll explore the concept of deep cloning and learn how to implement it effectively in JavaScript.

What is Deep Cloning?

Deep cloning refers to the process of creating a new object that is a complete and independent copy of another object, including all nested objects and their properties. Unlike shallow cloning, which only creates a copy of the top-level object, deep cloning ensures that every level of nesting is duplicated.

Approach 1: There are various approaches to deep cloning in JavaScript, each with its pros and cons. One common approach is to use a recursive function that traverses the object tree and clones each nested property.

We need to handle the cloning of Date, Arrays, null and undefined scenarios well, to clone an object, we need to iterate over each and every key, if the value of the key is an object then we need to call the deepClone function iteratively. Below is the implementation for the same.

const deepClone = (obj) => {
  // If the input is null or not an object, return it as is
  if (obj === null || "object" != typeof obj) {
    return obj;
  }

  // Create a new object or array based on the type of the input
  const newObj = Array.isArray(obj) ? [] : {};

  // If the input is a Date object, clone it
  if (obj instanceof Date) {
    const copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
  }

  // Iterate through the properties of the input object
  for (let key in obj) {
    // Check if the property is an object (excluding null)
    if (typeof obj[key] === "object" && obj[key] !== null) {
      // Recursively clone nested objects
      newObj[key] = deepClone(obj[key]);
    } else {
      // Copy non-object properties directly
      newObj[key] = obj[key];
    }
  }

  // Return the cloned object
  return newObj;
};

// Test with nested objects
const originalObj = {
  a: 1,
  b: {
    c: 2,
    d: {
      e: 3
    }
  }
};

const clonedObj = deepClone(originalObj);

console.log(clonedObj);

Approach 2: This approach involves serializing and deserializing the object using JSON methods.

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

This approach works well for objects containing simple data types like strings, numbers, booleans, arrays, and plain objects. However, it has limitations:

It cannot handle functions, undefined or symbols, as they are omitted during serialization/deserialization.
It cannot clone objects with circular references, as JSON.stringify will throw an error.

Deep cloning an object in Javascript

1 comment