Deep vs Shallow Copy in JavaScript

This article explains the fundamental differences between shallow and deep copying of complex objects in JavaScript. You will learn how JavaScript manages object references in memory, the behavior of shallow copies versus deep copies when dealing with nested data structures, the most common methods to create both types of copies, and how to choose the right approach for your applications.

Understanding Object References in JavaScript

JavaScript assigns primitive data types (like numbers, strings, and booleans) by value. When you copy a primitive, a completely separate copy of the data is created.

Complex types (like objects, arrays, and functions) are stored and assigned by reference. Assigning an object to a new variable does not duplicate the object; it simply creates a new reference pointing to the same memory location:

const original = { name: "Alice" };
const copy = original;

copy.name = "Bob";
console.log(original.name); // "Bob" (Both variables point to the same object)

To prevent unintended mutations, you must explicitly copy the object using either a shallow or deep copy.

What is a Shallow Copy?

A shallow copy creates a new object and copies the top-level properties of the original object.

• Primitive values at the top level are duplicated by value.
• Nested objects or arrays are copied by reference.

If the original object contains nested structures, the shallow copy and the original object will still share the memory references for those nested properties. Modifying a nested property in the copy will mutate the original object.

Common Methods for Shallow Copying

1. Spread Operator (...):

   const original = { a: 1, nested: { b: 2 } };
   const shallowCopy = { ...original };
   
   shallowCopy.a = 99;
   shallowCopy.nested.b = 42;
   
   console.log(original.a); // 1 (Top-level is unaffected)
   console.log(original.nested.b); // 42 (Nested object is mutated)

2. Object.assign():

   const shallowCopy = Object.assign({}, original);

3. Array Methods (slice(), Array.from(), concat()):

   const originalArr = [1, [2, 3]];
   const shallowArr = originalArr.slice();
   shallowArr[1][0] = 99;
   
   console.log(originalArr[1][0]); // 99

What is a Deep Copy?

A deep copy duplicates the original object and recursively duplicates every nested object, array, or complex data structure contained within it.

The resulting copy is completely independent of the original. Modifying any level of the deep copy—including deeply nested properties—will never alter the original object.

Common Methods for Deep Copying

1. structuredClone() (Modern Standard): The built-in global method structuredClone() is the native standard for deep cloning in modern JavaScript environments (browsers and Node.js 17+). It handles circular references, Maps, Sets, Dates, and TypedArrays.

   const original = { a: 1, nested: { b: 2 } };
   const deepCopy = structuredClone(original);
   
   deepCopy.nested.b = 42;
   console.log(original.nested.b); // 2 (Original remains untouched)

2. JSON.parse(JSON.stringify()) (Legacy Approach): This method serializes the object to a JSON string and parses it back into a new object.

   const deepCopy = JSON.parse(JSON.stringify(original));

   Limitations: It cannot handle functions, undefined, Symbol, BigInt, Date objects (converted to strings), RegExp, or circular references.

3. External Libraries (e.g., Lodash cloneDeep): For complex edge cases or older environments lacking structuredClone:

   import cloneDeep from 'lodash/cloneDeep';
   const deepCopy = cloneDeep(original);

Summary of Differences