What is the most efficient way to deep clone an object in JavaScript?

In JavaScript, objects are reference types, meaning simple assignment creates a reference to the original object, not a copy. Deep cloning creates a completely independent copy with separate memory allocation for nested objects and arrays.

Understanding Deep vs Shallow Cloning

Shallow cloning copies only the top-level properties, while deep cloning recursively copies all nested objects. Methods like spread operator and Object.assign() only perform shallow copies.

Using JSON.parse() and JSON.stringify() (Most Common)

The most efficient and widely-used approach combines JSON.stringify() to convert the object to a string, then JSON.parse() to create a new object from that string.

Syntax

let deepCopy = JSON.parse(JSON.stringify(originalObject));

Example: Deep Cloning with JSON Methods

let employee = {
   emp_name: 'Abdul Rawoof',
   company: 'Tutorials Point',
   emp_id: 'TP10000',
   role: 'Software Engineer-Intern',
   salary: 18000,
   address: {
      city: 'Hyderabad',
      country: 'India'
   }
}

let cpyEmployee = JSON.parse(JSON.stringify(employee))
console.log("Original object:", employee)
console.log("Deep copied object:", cpyEmployee)

// Modify nested object
cpyEmployee.address.city = 'Mumbai'
cpyEmployee.emp_name = 'B Jason'

console.log("After modification:")
console.log("Original address:", employee.address.city)
console.log("Copied address:", cpyEmployee.address.city)

Original object: {
  emp_name: 'Abdul Rawoof',
  company: 'Tutorials Point',
  emp_id: 'TP10000',
  role: 'Software Engineer-Intern',
  salary: 18000,
  address: { city: 'Hyderabad', country: 'India' }
}
Deep copied object: {
  emp_name: 'Abdul Rawoof',
  company: 'Tutorials Point',
  emp_id: 'TP10000',
  role: 'Software Engineer-Intern',
  salary: 18000,
  address: { city: 'Hyderabad', country: 'India' }
}
After modification:
Original address: Hyderabad
Copied address: Mumbai

Limitations of JSON Methods

JSON methods have limitations - they cannot handle functions, undefined values, symbols, or Date objects properly:

let obj = {
   name: 'Test',
   date: new Date(),
   func: function() { return 'hello' },
   undef: undefined
}

let copy = JSON.parse(JSON.stringify(obj))
console.log("Original:", obj)
console.log("Copy:", copy)

Original: {
  name: 'Test',
  date: 2023-10-15T10:30:00.000Z,
  func: [Function: func],
  undef: undefined
}
Copy: { name: 'Test', date: '2023-10-15T10:30:00.000Z' }

Object.assign() - Shallow Copy Only

Object.assign() creates shallow copies, meaning nested objects still reference the original:

let original = {
   name: 'John',
   address: { city: 'New York' }
}

let shallowCopy = Object.assign({}, original)
shallowCopy.address.city = 'London'

console.log("Original city:", original.address.city)
console.log("Copy city:", shallowCopy.address.city)

Original city: London
Copy city: London

Comparison of Cloning Methods

Conclusion

JSON.parse(JSON.stringify()) is the most efficient method for deep cloning plain JavaScript objects. For complex objects with functions or special types, consider using libraries like Lodash's cloneDeep() method.