Implementing a Custom Deep Clone in JavaScript

Implementing a custom deep clone function in JavaScript involves creating a function that can create a copy of an object and all of its nested objects. This is useful for scenarios where you need to ensure that changes to the cloned object do not affect the original object.

What is Deep Cloning?

Deep cloning is the process of creating a new object that is a complete copy of an original object, including all nested objects. This ensures that modifications to the clone do not affect the original.

Real Interview Insights

Interviewers might ask you to:

Implement a deep clone function.
Handle various data types, including objects, arrays, dates, and other primitives.
Manage circular references gracefully.

Implementing Custom Deep Clone

Here’s an implementation of a custom deep clone function:

function deepClone(obj, visited = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
 
  if (visited.has(obj)) {
    return visited.get(obj);
  }
 
  let clone;
  if (Array.isArray(obj)) {
    clone = [];
    visited.set(obj, clone);
    obj.forEach((item, index) => {
      clone[index] = deepClone(item, visited);
    });
  } else if (obj instanceof Date) {
    clone = new Date(obj);
  } else if (obj instanceof Map) {
    clone = new Map();
    visited.set(obj, clone);
    obj.forEach((value, key) => {
      clone.set(key, deepClone(value, visited));
    });
  } else if (obj instanceof Set) {
    clone = new Set();
    visited.set(obj, clone);
    obj.forEach((value) => {
      clone.add(deepClone(value, visited));
    });
  } else {
    clone = {};
    visited.set(obj, clone);
    Object.keys(obj).forEach(key => {
      clone[key] = deepClone(obj[key], visited);
    });
  }
 
  return clone;
}

Explanation:

Base Case: Return the value directly if it is not an object or is null.
Circular References: Use a WeakMap to track visited objects and their clones to handle circular references.
Array Cloning: Create a new array and recursively clone each item.
Date Cloning: Create a new Date object.
Map and Set Cloning: Handle Map and Set collections by recursively cloning their entries.
Object Cloning: Create a new object and recursively clone each property.

Practical Examples

Consider examples of using the custom deep clone:

const original = {
  name: "John",
  age: 30,
  details: {
    hobbies: ["reading", "gaming"],
    address: {
      city: "New York",
      country: "USA"
    }
  },
  birthdate: new Date(1990, 1, 1),
  marks: new Map([
    ["Math", 90],
    ["English", 85]
  ]),
  set: new Set([1, 2, 3])
};
 
const cloned = deepClone(original);
 
console.log(cloned);
// Output: Deep clone of the original object
 
console.log(cloned.details === original.details); // false
console.log(cloned.birthdate === original.birthdate); // false
console.log(cloned.marks === original.marks); // false
console.log(cloned.set === original.set); // false

Handling Edge Cases

Circular References: Ensure circular references are handled using a WeakMap.
Special Data Types: Properly clone special data types such as Date, Map, and Set.
Non-Cloneable Types: Handle non-cloneable types like functions, symbols, and undefined values appropriately.

Enhanced Implementation with Additional Features

function deepClone(obj, visited = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
 
  if (visited.has(obj)) {
    return visited.get(obj);
  }
 
  let clone;
  if (Array.isArray(obj)) {
    clone = [];
    visited.set(obj, clone);
    obj.forEach((item, index) => {
      clone[index] = deepClone(item, visited);
    });
  } else if (obj instanceof Date) {
    clone = new Date(obj);
  } else if (obj instanceof Map) {
    clone = new Map();
    visited.set(obj, clone);
    obj.forEach((value, key) => {
      clone.set(key, deepClone(value, visited));
    });
  } else if (obj instanceof Set) {
    clone = new Set();
    visited.set(obj, clone);
    obj.forEach((value) => {
      clone.add(deepClone(value, visited));
    });
  } else if (typeof obj === 'object') {
    clone = {};
    visited.set(obj, clone);
    Object.keys(obj).forEach(key => {
      clone[key] = deepClone(obj[key], visited);
    });
  } else {
    clone = obj;
  }
 
  return clone;
}
 
// Example usage with enhanced implementation
const original = {
  name: "John",
  age: 30,
  details: {
    hobbies: ["reading", "gaming"],
    address: {
      city: "New York",
      country: "USA"
    }
  },
  birthdate: new Date(1990, 1, 1),
  marks: new Map([
    ["Math", 90],
    ["English", 85]
  ]),
  set: new Set([1, 2, 3]),
  circularRef: {}
};
original.circularRef.self = original;
 
const cloned = deepClone(original);
 
console.log(cloned);

Use Cases for Custom Deep Clone

State Management: Ensuring immutability in state management systems like Redux.
Data Persistence: Creating deep copies of data structures for safe manipulation and storage.
Debugging: Creating deep copies of objects to compare states during debugging.