Shallow copy vs deep copy in JavaScript

Shallow vs Deep Copy

When copying objects in JavaScript, understanding the difference between shallow and deep copy is critical to avoid unexpected bugs.

The Problem

javascript

const original = { name: "Alice", scores: [90, 85, 92] };
const copy = original; // ❌ Not a copy — just another reference!

copy.name = "Bob";
console.log(original.name); // "Bob" — original is also changed!

Shallow Copy

A shallow copy creates a new object with copies of the top-level properties. However, nested objects are still shared (same references).

Methods for Shallow Copy

javascript

const obj = { a: 1, nested: { b: 2 } };

// Spread operator
const copy1 = { ...obj };

// Object.assign
const copy2 = Object.assign({}, obj);

// Array methods
const arr = [1, [2, 3]];
const arrCopy1 = [...arr];
const arrCopy2 = arr.slice();
const arrCopy3 = Array.from(arr);

Shallow Copy Limitation

javascript

const original = { name: "Alice", address: { city: "Kyiv" } };
const shallow = { ...original };

shallow.name = "Bob";           // ✅ Independent
shallow.address.city = "Lviv";  // ❌ Modifies original!

console.log(original.address.city); // "Lviv"

Deep Copy

A deep copy creates a completely independent clone — all nested objects are also copied.

1. structuredClone() (Modern, Recommended)

javascript

const original = {
  name: "Alice",
  scores: [90, 85],
  address: { city: "Kyiv" },
  date: new Date()
};

const deep = structuredClone(original);
deep.address.city = "Lviv";
console.log(original.address.city); // "Kyiv" ✅ Independent!

Supports: objects, arrays, Date, Map, Set, RegExp, ArrayBuffer, etc. Doesn't support: functions, DOM nodes, Error objects, symbols as keys.

2. JSON.parse(JSON.stringify())

javascript

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

Limitations:

❌ Loses undefined, functions, Symbol
❌ Converts Date to string
❌ Doesn't handle circular references
❌ Loses Map, Set, RegExp

3. Custom Recursive Function

javascript

function deepClone(obj) {
  if (obj === null || typeof obj !== "object") return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (Array.isArray(obj)) return obj.map(deepClone);
  
  const clone = {};
  for (const key of Object.keys(obj)) {
    clone[key] = deepClone(obj[key]);
  }
  return clone;
}

4. Libraries

javascript

// Lodash
import { cloneDeep } from 'lodash';
const deep = cloneDeep(original);

Method	Type	Functions	Date	Circular
`{ ...obj }`	Shallow	✅	✅	N/A
`Object.assign()`	Shallow	✅	✅	N/A
`structuredClone()`	Deep	❌	✅	✅
`JSON.parse/stringify`	Deep	❌	❌	❌
`lodash.cloneDeep()`	Deep	✅	✅	✅

Use structuredClone() for deep copying in modern environments (available in all browsers since 2022 and Node.js 17+). Use spread ({ ...obj }) for shallow copies. Avoid JSON serialization for complex objects with Dates, functions, or circular references.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems