Shallow vs. Deep Copy in JavaScript: Master Data Duplication

Understanding Data Duplication: Shallow vs. Deep Copy in JavaScript

Working with objects and arrays in JavaScript often requires duplicating data. However, simply assigning one object to another doesn't create a true copy; it merely creates another reference to the same underlying object. This can lead to unexpected side effects and bugs when modifying the "copied" data.

This guide will deep dive into the critical concepts of shallow copy and deep copy in JavaScript. We'll explore various techniques, their nuances, advantages, and limitations, equipping you to make informed decisions for robust and predictable data management in your applications.

The Nature of Shallow Copies

A shallow copy creates a new object or array, but it only duplicates the top-level properties. If any of the original object's properties are themselves objects or arrays (i.e., nested objects or reference types), only their references are copied, not the objects they point to. This means that both the original and the shallow-copied object will share the same nested objects.

Common methods for performing a shallow copy include:

• Object.assign(target, ...sources): Copies all enumerable own properties from one or more source objects to a target object. It returns the target object.
• Spread Syntax (...): A concise way to create a shallow copy of an object or array by expanding its elements into a new literal.
• Array.prototype.slice(): For arrays, creates a shallow copy of a portion of an array into a new array object.
• Array.from(): Creates a new, shallow-copied Array instance from an array-like or iterable object.

const originalObject = {
  id: 1,
  name: 'Widget A',
  details: {
    price: 25,
    currency: 'USD'
  },
  tags: ['electronics', 'utility']
};

// Method 1: Object.assign
const shallowCopyAssign = Object.assign({}, originalObject);

// Method 2: Spread Syntax
const shallowCopySpread = { ...originalObject };

console.log('Original Object:', originalObject);
console.log('Shallow Copy (Assign):', shallowCopyAssign);
console.log('Shallow Copy (Spread):', shallowCopySpread);

// Demonstrate shared reference for nested objects
shallowCopyAssign.details.price = 30;
shallowCopySpread.tags.push('new');

console.log('\n--- After Modification ---');
console.log('Original Object (after modification):', originalObject);
// Notice originalObject.details.price is now 30, originalObject.tags has 'new'
console.log('Shallow Copy (Assign, after modification):', shallowCopyAssign);
console.log('Shallow Copy (Spread, after modification):', shallowCopySpread);

The Necessity of Deep Copies

When you need to create a completely independent duplicate of an object, including all its nested objects and arrays, a deep copy is required. A deep copy ensures that changes to the copied object's properties, no matter how deeply nested, will not affect the original object, and vice-versa.

Achieving a true deep copy is more complex than a shallow copy, as it involves recursively copying every nested reference type. Let's explore several approaches, starting with a commonly used, albeit limited, native method.

const originalObject = {
  id: 1,
  name: 'Product X',
  config: {
    isEnabled: true,
    settings: { logLevel: 'info' }
  },
  categories: ['electronics', 'gadgets']
};

// Deep copy using JSON serialization/deserialization
const deepCopyJSON = JSON.parse(JSON.stringify(originalObject));

console.log('Original Object:', originalObject);
console.log('Deep Copy (JSON):', deepCopyJSON);

// Modify the deep-copied object
deepCopyJSON.config.settings.logLevel = 'debug';
deepCopyJSON.categories.push('new-category');

console.log('\n--- After Modification ---');
console.log('Original Object (after modification):', originalObject);
// Notice originalObject.config.settings.logLevel is still 'info'
console.log('Deep Copy (JSON, after modification):', deepCopyJSON);

Modern Deep Copy with structuredClone()

For modern JavaScript environments (browsers, Node.js 17+), the structuredClone() global function provides a robust and reliable way to create deep copies. This API is designed to create a deep clone of a given value using the structured cloning algorithm, which is also used for transferring values between different realms (e.g., Web Workers, iframes).

structuredClone() inherently handles many data types that JSON.stringify() cannot, including:

• Nested objects and arrays
• Date objects (clones correctly)
• RegExp objects (clones correctly)
• Map and Set objects
• ArrayBuffer and typed arrays
• Blob, File, FileList, ImageData
• Error objects
• MessagePort, ImageBitmap, OffscreenCanvas

Crucially, it also handles circular references without throwing an error.

const now = new Date();
const regex = /test/i;
const userProfile = {
  id: 'abc-123',
  name: 'Alice',
  settings: {
    theme: 'dark',
    notifications: true,
    lastLogin: now,
    searchPattern: regex,
  },
  permissions: new Set(['read', 'write']),
  data: new Map([['key1', 'value1'], ['key2', 123]])
};

// Introduce a circular reference (for demonstration, structuredClone handles this)
userProfile.self = userProfile;

// Deep copy using structuredClone()
const deepCopyStructuredClone = structuredClone(userProfile);

console.log('Original Profile:', userProfile);
console.log('Deep Copy (structuredClone):', deepCopyStructuredClone);

// Modify the deep-copied object
deepCopyStructuredClone.settings.theme = 'light';
deepCopyStructuredClone.permissions.add('delete');
deepCopyStructuredClone.settings.lastLogin.setFullYear(2025);

console.log('\n--- After Modification ---');
console.log('Original Profile (after modification):', userProfile);
// Verify original object is untouched
console.log('Deep Copy (structuredClone, after modification):', deepCopyStructuredClone);

Implementing Custom Deep Copy (for legacy or specific needs)

While structuredClone() is the preferred modern approach, you might encounter scenarios where a custom deep copy implementation is necessary:

• Legacy environments: If your target environment doesn't support structuredClone() (e.g., older Node.js versions or browser versions).
• Specific object types: If you need to handle exotic data types not supported by structuredClone() or apply custom cloning logic (e.g., instances of custom classes, DOM nodes, functions you do want to copy, although typically functions are not copied in deep clones).
• Performance optimization: For extremely large objects or very frequent deep copies, a hand-optimized custom function might offer better performance, although structuredClone() is generally highly optimized.

For most practical purposes, a recursive function that iterates through properties and deep copies them if they are objects (and not null) or arrays is sufficient.

function deepCopy(obj, visited = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') {
    return obj; // Return primitive values directly
  }

  // Handle circular references
  if (visited.has(obj)) {
    return visited.get(obj);
  }

  let copy;
  if (Array.isArray(obj)) {
    copy = [];
    visited.set(obj, copy);
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepCopy(obj[i], visited);
    }
  } else {
    copy = {};
    visited.set(obj, copy);
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepCopy(obj[key], visited);
      }
    }
  }
  return copy;
}

const originalComplex = {
  a: 1,
  b: 'hello',
  c: [1, 2, { d: 3 }],
  e: {
    f: 'world',
    g: new Date()
  }
};

// Adding a circular reference for testing the custom function's handling
originalComplex.e.h = originalComplex;

const customDeepCopy = deepCopy(originalComplex);

console.log('Original Complex:', originalComplex);
console.log('Custom Deep Copy:', customDeepCopy);

// Modify the custom deep-copied object
customDeepCopy.c[2].d = 99;
customDeepCopy.e.f = 'javascript';
customDeepCopy.e.g.setMonth(0);

console.log('\n--- After Modification ---');
console.log('Original Complex (after modification):', originalComplex);
// Verify original object is untouched
console.log('Custom Deep Copy (after modification):', customDeepCopy);

Performance Considerations

While choosing the correct copying strategy is paramount, it's also worth briefly considering performance, especially for very large objects or performance-critical applications:

• Shallow Copy: Generally very fast, as it only copies references.
• JSON.parse(JSON.stringify()): Can be surprisingly fast for simple, flat objects. However, the serialization and deserialization overhead can be significant for deeply nested or very large objects.
• structuredClone(): Highly optimized at the native level, making it very performant for most use cases, often outperforming custom JavaScript implementations for complex objects.
• Custom Recursive Functions: Performance can vary widely depending on the implementation quality and the complexity of the object being copied. Recursive calls can introduce stack overhead, and manual property iteration might be slower than native methods.

In most modern applications, structuredClone() offers the best balance of robustness, correctness, and performance for deep copying.

Conclusion: Choosing the Right Copying Strategy

Mastering the distinction between shallow and deep copies is fundamental for writing robust and bug-free JavaScript code. Incorrectly copying data can lead to subtle bugs that are hard to trace.

Here's a quick recap and decision guide:

• Use Shallow Copy (Spread ..., Object.assign(), Array.prototype.slice()):
  • When you only need to copy the top-level properties of an object or array.
  • When your object contains only primitive values at all levels.
  • When you intend to modify top-level properties without affecting the original, and you understand that nested objects/arrays will remain shared by reference.
• Use Deep Copy (structuredClone() or Custom Implementation):
  • When you need a completely independent duplicate of an object, including all its nested objects and arrays.
  • When you need to modify any part of the copied object without any impact on the original.
  • Prefer structuredClone() for modern environments due to its comprehensive handling of various data types and circular references.
  • Consider a custom recursive implementation or a library like Lodash's _.cloneDeep() for legacy environments or highly specific cloning requirements.

By understanding these concepts and applying the appropriate techniques, you can confidently manage data in your JavaScript applications, preventing unintended side effects and ensuring data integrity.