Deep Cloning Objects in JavaScript

Deep cloning an object in JavaScript can be a complex task, especially when working with nested data structures. In this article, we’ll explore why deep cloning is important, particularly in functional programming and React, and examine various methods and their pros and cons.

What is Cloning in JavaScript?

Shallow vs. Deep Cloning

Cloning an object in JavaScript creates a new object with the same properties. But not all cloning is equal: shallow cloning only copies the top-level properties, while deep cloning duplicates every nested object and array.

Shallow Cloning Example:

const original = { a: 1, b: { c: 2 } }
const shallowClone = { ...original }

shallowClone.b.c = 3 // This also changes original.b.c!

Deep Cloning Example:

const original = { a: 1, b: { c: 2 } }
const deepClone = structuredClone(original)

// deepClone is a full, independent copy of original
deepClone.b.c = 3
console.log(original.b.c) // 2, original remains unchanged

Why Deep Cloning is Not Trivial

Deep cloning involves more complexity than it might initially seem. Here are a few reasons why:

Handling Nested Structures: When an object contains nested objects or arrays, each of these needs to be cloned individually. A shallow copy won't suffice because it only copies references to the nested structures, not the structures themselves.
Circular References: If an object references itself (directly or indirectly), naive cloning methods can lead to infinite loops or stack overflows. Special logic is needed to detect and handle these circular references appropriately.
Complex Data Types: Certain data types like Date, Map, Set, RegExp, and custom classes don't always clone properly using basic methods like JSON.parse and JSON.stringify. They require more specialized handling to ensure that all properties and behaviors are accurately copied.

Example of a Complex Data Type:

const original = {
  date: new Date(),
  map: new Map([['key', 'value']]),
  set: new Set([1, 2, 3]),
  regex: /test/i,
}

const deepClone = structuredClone(original)

console.log(deepClone.date === original.date) // false, the date object is a different instance
console.log(deepClone.map.get('key')) // 'value', the Map is correctly cloned with its entries
console.log(deepClone.set.has(2)) // true, the Set is cloned correctly with its values
console.log(deepClone.regex === original.regex) // false, the RegExp object is a different instance

The Importance of Cloning in Functional Programming

Immutability and Functional Programming

In functional programming, immutability is key. We strive to avoid mutating data, creating new copies instead. Deep cloning becomes essential when we need to work with nested structures without altering the original data.

Example of Immutability:

const original = { a: 1, b: 2 }
const copy = { ...original, a: 3 }

// original remains unchanged, promoting immutability

Cloning in React

React relies on immutability to detect changes efficiently. By cloning state objects deeply, we ensure that updates are predictable and side effects are minimized, leading to more maintainable code.

React State Example:

const [state, setState] = useState({ a: 1, b: { c: 2 } })

// To update deeply nested state:
const newState = structuredClone(state)
newState.b.c = 3
setState(newState)

4 Methods for Deep Cloning in JavaScript

Using `structuredClone`

structuredClone is a modern method introduced in recent versions of JavaScript. It’s designed to handle a wide variety of data types and even manages circular references, making it a robust solution for deep cloning.

Example:

const original = {
  a: 1,
  b: { c: 2 },
  date: new Date(),
  map: new Map([['key', 'value']]),
}
const deepClone = structuredClone(original)

console.log(deepClone.b === original.b) // false, different objects
console.log(deepClone.date === original.date) // false, dates are cloned
console.log(deepClone.map.get('key')) // 'value', map is cloned correctly

Pros:

Handles Most Data Types: structuredClone can deep clone objects, arrays, dates, maps, sets, and even more complex types.
No External Dependencies: It’s a native JavaScript method, so there's no need to install or import anything extra.
Handles Circular References: structuredClone can safely clone objects with circular references, avoiding common pitfalls.

Cons:

Limited Browser Support: As of now, structuredClone is not available in all environments, particularly older browsers or older versions of Node.js.

Using `JSON.parse` and `JSON.stringify`

A popular method for deep cloning in JavaScript is using JSON.parse and JSON.stringify. This approach serializes the object to a JSON string and then parses it back into a new object.

Example:

const original = { a: 1, b: { c: 2 } }
const deepClone = JSON.parse(JSON.stringify(original))

console.log(deepClone.b === original.b) // false, different objects

Pros:

Simple and Readily Available: This method is easy to use and doesn’t require any external libraries or additional code.
Works Well for Basic Data Types: It’s effective for deep cloning objects composed of basic data types like numbers, strings, arrays, and plain objects.

Cons:

Fails with Non-Serializable Data: This method doesn’t work with functions, undefined, Date, Map, Set, or any object with methods.
Doesn’t Handle Circular References: If your object contains circular references, this method will throw an error.

Implementing a Recursive Function

If you need more control or want to handle specific cases, you can implement a custom recursive deep clone function. This method is powerful, but it requires careful handling to manage edge cases like circular references and complex data types.

Example:

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj

  if (hash.has(obj)) return hash.get(obj) // handle circular references

  const result = Array.isArray(obj) ? [] : {}
  hash.set(obj, result)

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      result[key] = deepClone(obj[key], hash)
    }
  }

  return result
}

const original = { a: 1, b: { c: 2 }, d: { e: { f: 3 } } }
original.d.circular = original // create a circular reference
const deepClonedObject = deepClone(original)

console.log(deepClonedObject.b === original.b) // false, different objects
console.log(deepClonedObject.d.circular === deepClonedObject) // true, circular reference is maintained

Pros:

Customizable: You have full control over how cloning is performed, allowing you to handle specific cases like circular references, special data types, or custom object behaviors.
Can Handle Complex Structures: With the right logic, a recursive function can deep clone almost any structure.

Cons:

Complexity: Writing a deep clone function that handles all edge cases (like circular references, special data types) is challenging and prone to bugs if not done correctly.
Typos Performance: Recursive functions can be slower, especially for large or deeply nested objects.

Using Third-Party Libraries (e.g., Lodash)

Libraries like Lodash provide a cloneDeep function that handles deep cloning effectively and covers many edge cases. This method is well-tested and widely used in the JavaScript community.

Example:

const _ = require('lodash')
const original = {
  a: 1,
  b: { c: 2 },
  date: new Date(),
  set: new Set([1, 2, 3]),
}
const deepClone = _.cloneDeep(original)

console.log(deepClone.b === original.b) // false, different objects
console.log(deepClone.date === original.date) // false, dates are cloned
console.log(deepClone.set.has(2)) // true, set is cloned correctly

Pros:

Battle-Tested: Lodash's cloneDeep method is widely used and has been tested across countless projects, making it a reliable choice.
Feature-Rich: Lodash offers additional utilities that can complement deep cloning, such as deep merging or object manipulation.

Cons:

External Dependency: Adding Lodash or any third-party library increases your project’s size and dependencies.
Overhead: For small projects or simple cloning needs, using a library might add unnecessary complexity and bloat.

Conclusion

Deep cloning is a powerful tool in JavaScript, essential for maintaining immutability in functional programming and React. By understanding the methods and their trade-offs, you can choose the right approach for your needs, ensuring your applications remain efficient and maintainable.

What is Cloning in JavaScript?

Shallow vs. Deep Cloning

Why Deep Cloning is Not Trivial

The Importance of Cloning in Functional Programming

Immutability and Functional Programming

Cloning in React

4 Methods for Deep Cloning in JavaScript

Using structuredClone

Using JSON.parse and JSON.stringify

Implementing a Recursive Function

Using Third-Party Libraries (e.g., Lodash)

Conclusion

Using `structuredClone`

Using `JSON.parse` and `JSON.stringify`