How Do I Correctly Clone a JavaScript Object?

To clone a JavaScript object, you can use the following methods:

1. Shallow Copy:
   • Spread Operator (...):
     javascript

     CopyEdit

     const clone = { ...originalObject };


     This method creates a shallow copy, meaning nested objects or arrays within the original object are still referenced, not duplicated.

     SamanthaMing.com
   • Object.assign() Method:
     javascript

     CopyEdit

     const clone = Object.assign({}, originalObject);


     Like the spread operator, this also performs a shallow copy.

     GeeksforGeeks
2. Deep Copy:
   • structuredClone() Function:
     javascript

     CopyEdit

     const clone = structuredClone(originalObject);


     This built-in function creates a deep copy of the object, duplicating all nested structures. However, it’s not supported in all environments.

   • JSON Serialization:
     javascript

     CopyEdit

     const clone = JSON.parse(JSON.stringify(originalObject));


     This approach creates a deep copy but has limitations: it doesn’t support functions, symbols, undefined, or objects with circular references.

For complex objects or those containing non-serializable properties, consider using libraries like Lodash’s _.cloneDeep() method to ensure accurate deep cloning.