JavaScript Deep Clone vs Shallow Clone Interview Questions

Primitive values vs object references

Understanding the difference between shallow and deep copies requires understanding how JavaScript stores values in memory. Primitive types — numbers, strings, booleans, null, undefined, Symbol, BigInt — are stored directly. When you assign or copy them, you get an independent copy of the actual value.

let a = 42
let b = a
b = 100
console.log(a)   // 42 — completely independent

Objects, arrays, and functions are stored as references. The variable holds a pointer to a location in memory, not the data itself. When you copy an object variable, you copy the pointer — both variables point to the same data.

const original = { name: 'Alice', scores: [90, 85, 92] }
const reference = original
 
reference.name = 'Bob'
console.log(original.name)     // 'Bob' — same object in memory
 
reference.scores.push(88)
console.log(original.scores)   // [90, 85, 92, 88] — same array

Shallow copy — one level deep

A shallow copy creates a new top-level object and copies the immediate properties. Primitive properties are truly independent. Nested object and array properties are still shared references.

Three ways to create a shallow copy:

const user = {
  name: 'Alice',
  age: 30,
  address: { city: 'Mumbai', pin: '400001' },
  scores: [90, 85, 92],
}
 
// 1. Object spread (most common)
const copy1 = { ...user }
 
// 2. Object.assign()
const copy2 = Object.assign({}, user)
 
// 3. Array spread for arrays
const arr  = [1, [2, 3], [4, 5]]
const copy3 = [...arr]

// Top-level primitives are independent
copy1.name = 'Bob'
console.log(user.name)     // 'Alice' — unaffected ✓
 
// But nested objects are still shared
copy1.address.city = 'Delhi'
console.log(user.address.city)   // 'Delhi' — MUTATED ✗
 
copy1.scores.push(88)
console.log(user.scores)         // [90, 85, 92, 88] — MUTATED ✗

This is the most common source of subtle bugs in React applications. Spreading state creates a shallow copy — changing a nested object in the copy mutates the original state object, bypassing React's change detection.

Deep copy method 1 — JSON.parse(JSON.stringify())

The quickest deep copy for simple data. Works well for plain data objects with no special types.

const user = {
  name: 'Alice',
  address: { city: 'Mumbai' },
  scores: [90, 85, 92],
}
 
const deep = JSON.parse(JSON.stringify(user))
 
deep.address.city = 'Delhi'
console.log(user.address.city)   // 'Mumbai' — truly independent ✓

The mechanism: JSON.stringify serializes the object to a JSON string (which contains no references, only data). JSON.parse deserializes that string into a brand-new object graph with no connection to the original.

Five significant limitations — these are the interview questions:

// 1. Functions are silently dropped
const obj1 = { name: 'Alice', greet: () => 'Hello' }
const copy = JSON.parse(JSON.stringify(obj1))
console.log(copy.greet)   // undefined — function lost
 
// 2. undefined values are silently dropped
const obj2 = { a: 1, b: undefined }
JSON.parse(JSON.stringify(obj2))   // { a: 1 } — b is gone
 
// 3. Date objects become strings
const obj3 = { created: new Date('2024-01-01') }
const c = JSON.parse(JSON.stringify(obj3))
console.log(typeof c.created)   // 'string' — not a Date
console.log(c.created instanceof Date)   // false
 
// 4. Special number values become null
const obj4 = { a: Infinity, b: NaN, c: -Infinity }
JSON.parse(JSON.stringify(obj4))   // { a: null, b: null, c: null }
 
// 5. Circular references throw immediately
const obj5 = {}
obj5.self = obj5
JSON.parse(JSON.stringify(obj5))   // TypeError: circular structure

Deep copy method 2 — structuredClone() (modern standard)

structuredClone() was introduced in 2022 and is now supported in all modern browsers and Node.js 17+. It uses the Structured Clone Algorithm — the same mechanism browsers use internally to clone data for Web Workers and IndexedDB. It is faster than JSON and handles far more types correctly.

const user = {
  name:    'Alice',
  created: new Date('2024-01-01'),
  scores:  [90, 85, 92],
  address: { city: 'Mumbai' },
}
 
const deep = structuredClone(user)
 
deep.address.city = 'Delhi'
console.log(user.address.city)   // 'Mumbai' — independent ✓
 
console.log(deep.created instanceof Date)   // true — Date preserved ✓
console.log(deep.created === user.created)  // false — different object ✓

What structuredClone handles correctly:

// Dates — preserved as Date objects
structuredClone({ d: new Date() })
 
// RegExp — preserved
structuredClone({ r: /abc/gi })
 
// Map and Set — preserved with their contents
structuredClone({ m: new Map([[1, 'a']]) })
 
// Circular references — handled correctly!
const circular = {}
circular.self = circular
const clone = structuredClone(circular)
console.log(clone.self === clone)   // true — circular structure reproduced ✓
 
// Typed Arrays, ArrayBuffer, Blob — preserved
structuredClone({ data: new Uint8Array([1, 2, 3]) })

What structuredClone cannot handle:

// Functions — throws DataCloneError
structuredClone({ fn: () => {} })    // DataCloneError: function not cloneable
 
// DOM nodes — throws DataCloneError
structuredClone({ el: document.body })   // DataCloneError
 
// class instances — loses prototype chain (becomes plain object)
class User { greet() { return 'Hi' } }
const u = new User()
u.name = 'Alice'
const clone = structuredClone(u)
console.log(clone instanceof User)   // false — prototype lost
console.log(clone.greet)             // undefined — method lost

Deep copy method 3 — recursive manual implementation

Implementing deep clone from scratch is a standard senior interview question. The key challenges are handling circular references (to avoid infinite recursion) and correctly identifying and cloning arrays vs plain objects.

function deepClone(value, seen = new WeakMap()) {
  // Base case: primitives and null — return as-is
  if (value === null || typeof value !== 'object') return value
 
  // Handle Date
  if (value instanceof Date) return new Date(value.getTime())
 
  // Handle RegExp
  if (value instanceof RegExp) return new RegExp(value.source, value.flags)
 
  // Handle circular references: if we've seen this object before, return the clone
  if (seen.has(value)) return seen.get(value)
 
  // Preserve array vs object structure
  const clone = Array.isArray(value) ? [] : {}
 
  // Register before recursing — handles circular references during recursion
  seen.set(value, clone)
 
  for (const key of Object.keys(value)) {
    clone[key] = deepClone(value[key], seen)   // recurse into each property
  }
 
  return clone
}
 
// Test: nested objects
const original = { a: 1, nested: { b: 2, deep: { c: 3 } } }
const cloned   = deepClone(original)
cloned.nested.b = 99
console.log(original.nested.b)   // 2 — independent ✓
 
// Test: circular reference
const circular = { name: 'Alice' }
circular.self  = circular
const clonedCircular = deepClone(circular)
console.log(clonedCircular.self === clonedCircular)   // true ✓
console.log(clonedCircular === circular)               // false ✓

The WeakMap tracks every object seen during the recursion. When a circular reference is encountered, the WeakMap returns the already-created clone of that object instead of recursing infinitely. This is the canonical approach interviewers expect.

Comparison table — when to use which

// Use shallow copy when:
// • You only need independence at the top level
// • Nested data will not be mutated
// • Performance matters more than deep independence
const shallowCopy = { ...obj }
 
// Use JSON.parse/JSON.stringify when:
// • Data is plain JSON-serializable (strings, numbers, arrays, nested objects)
// • No functions, Dates, undefined, Infinity, NaN, circular refs
// • Quick and readable code matters
const jsonCopy = JSON.parse(JSON.stringify(obj))
 
// Use structuredClone() when:
// • Modern environment (2022+, Node 17+)
// • Data contains Dates, RegExp, Map, Set, typed arrays, circular refs
// • Need better performance than JSON approach
const modernCopy = structuredClone(obj)
 
// Use recursive manual clone when:
// • Need to preserve class instances and prototype chains
// • Custom cloning logic for specific types
// • Interview context — demonstrates understanding
const customCopy = deepClone(obj)