How to Understand Deep vs Shallow Copy in JavaScript

JavaScript has two categories of data types. Primitives like numbers, strings, booleans, null, undefined, and symbols are stored directly as values. Objects and arrays are reference types, stored as references to a location in memory. When you copy a primitive, you get an independent duplicate. When you copy a reference type naively, you copy the reference, not the data, so both variables point to the same object in memory.

A shallow copy creates a new object and copies the top-level properties of the original into it. If those top-level properties are primitives, they are copied by value and are independent. If they are nested objects or arrays, the copy only copies the reference to those nested structures. The original and the shallow copy share the same nested objects, so modifying a nested object through one variable affects the other.

Use the spread operator to create a shallow copy of an object or array. For an object, write const copy = {...original}. For an array, write const copy = [...original]. This creates a new object or array with all top-level properties copied. Modifying a top-level primitive property on the copy does not affect the original, but modifying a nested object through the copy does affect the original because they share the reference.

Object.assign also creates a shallow copy. Pass an empty object as the first argument and the source object as the second. It copies all own enumerable properties from the source into the target and returns the target. Like the spread operator, it only copies references for nested objects, not their actual content. Both approaches have identical limitations for nested structures.

A deep copy creates a completely independent duplicate of an object, including all nested objects and arrays at every level of nesting. Modifying any part of the deep copy has absolutely no effect on the original. A true deep copy requires either recursively copying every level of nesting or using a serialization approach that naturally traverses the entire structure.

The simplest deep copy approach is JSON.parse combined with JSON.stringify. Stringify converts the object to a JSON string, and parse converts it back to a new object. Since the intermediate step is a plain string, the output has no shared references with the original. This approach works well for plain objects and arrays but fails for values that JSON does not support including functions, undefined, Symbols, Dates become strings, and circular references throw errors.

The structuredClone function is a modern built-in available in all current browsers and Node.js 17 and above. It performs a true deep copy using the structured clone algorithm. It correctly handles Dates, RegExps, Maps, Sets, ArrayBuffers, and circular references. It does not clone functions or DOM nodes. For most use cases involving plain data, structuredClone is the correct and most straightforward deep copy solution.

Use the spread operator or Object.assign when you only need to modify top-level properties and the nested structures will not be modified. Use structuredClone when you need a fully independent copy of an object with nested data. Use JSON methods only when you have confirmed the data contains no functions, Dates, undefined values, or circular references. For complex objects with custom class instances, implement a custom clone method or use a library like Lodash's cloneDeep.