← Object Property Descriptors Advanced Array Methods →

Shallow vs Deep Copy

⚠️ The Copy Problem in JavaScript

JavaScript objects are copied by reference, not by value. Understanding different copy methods is crucial to avoid bugs and unexpected mutations.

Visualizing Copy Types

Reference Copy

const a = {x: 1};
const b = a; // Reference

b.x = 2;
console.log(a.x); // 2 🚨

Both point to same object

Shallow Copy

const a = {x: 1, y: {z: 2}};
const b = {...a}; // Shallow

b.y.z = 3;
console.log(a.y.z); // 3 🚨

Top-level copied, nested referenced

Deep Copy

const a = {x: 1, y: {z: 2}};
const b = deepCopy(a);

b.y.z = 3;
console.log(a.y.z); // 2 ✓

Complete independent copy

Example 1: The Problem with References

JavaScript Editor

// Shallow Copy vs Deep Copy - The Problem

const original = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York',
    coordinates: {
      lat: 40.7128,
      lng: -74.0060
    }
  },
  hobbies: ['reading', 'gaming', 'coding'],
  sayHello: function() {
    return 'Hello!';
  },
  date: new Date('2023-01-01')
};

// 1. Assignment (Reference Copy) - NOT A COPY
const referenceCopy = original;
console.log('Assignment (reference):');
console.log('referenceCopy === original:', referenceCopy === original); // true
console.log('referenceCopy.address === original.address:', referenceCopy.address === original.address); // true

// Modifying reference affects original
referenceCopy.name = 'Jane';
console.log('After modifying referenceCopy.name:');
console.log('original.name:', original.name); // Also 'Jane'! 🚨

// 2. Shallow Copy
const shallowCopy = { ...original }; // Spread operator
// or: Object.assign({}, original)

console.log('\nShallow copy:');
console.log('shallowCopy === original:', shallowCopy === original); // false ✓
console.log('shallowCopy.name === original.name:', shallowCopy.name === original.name); // true (primitive)
console.log('shallowCopy.address === original.address:', shallowCopy.address === original.address); // true 🚨
console.log('shallowCopy.hobbies === original.hobbies:', shallowCopy.hobbies === original.hobbies); // true 🚨

// Modifying top-level property doesn't affect original
shallowCopy.name = 'Bob';
console.log('\nAfter modifying shallowCopy.name:');
console.log('shallowCopy.name:', shallowCopy.name); // 'Bob'
console.log('original.name:', original.name); // 'Jane' (unchanged) ✓

// Modifying nested object AFFECTS original!
shallowCopy.address.city = 'Boston';
console.log('\nAfter modifying shallowCopy.address.city:');
console.log('shallowCopy.address.city:', shallowCopy.address.city); // 'Boston'
console.log('original.address.city:', original.address.city); // 'Boston' too! 🚨

shallowCopy.hobbies.push('swimming');
console.log('\nAfter pushing to shallowCopy.hobbies:');
console.log('shallowCopy.hobbies:', shallowCopy.hobbies);
console.log('original.hobbies:', original.hobbies); // Same array!

// 3. What is "shallow"?
// Only the first level is copied
// Nested objects/arrays are still references

🔍 Why This Matters

Common Bug Scenarios

Modifying state in React/Vue without proper copying
Accidentally mutating configuration objects
Sharing data between components/functions
Caching or memoization bugs
Race conditions in async code

Real Impact

Hard-to-debug state corruption
Security issues with shared data
Performance problems from unintended mutations
Testing failures due to shared state
Concurrency issues in web workers

Example 2: Shallow Copy Methods

JavaScript Editor

// Different Shallow Copy Methods

const original = {
  name: 'Alice',
  skills: ['JS', 'React'],
  metadata: { id: 1 }
};

console.log('Different shallow copy methods:\n');

// Method 1: Spread operator (ES6)
const copy1 = { ...original };
console.log('1. Spread operator:');
console.log('copy1 === original:', copy1 === original); // false
console.log('copy1.skills === original.skills:', copy1.skills === original.skills); // true

// Method 2: Object.assign()
const copy2 = Object.assign({}, original);
console.log('\n2. Object.assign():');
console.log('copy2 === original:', copy2 === original); // false
console.log('copy2.skills === original.skills:', copy2.skills === original.skills); // true

// Method 3: Array.prototype.slice() (for arrays only)
const arr = [1, 2, [3, 4]];
const arrCopy = arr.slice();
console.log('\n3. Array.slice():');
console.log('arrCopy === arr:', arrCopy === arr); // false
console.log('arrCopy[2] === arr[2]:', arrCopy[2] === arr[2]); // true

// Method 4: Array.from() (for arrays)
const arrCopy2 = Array.from(arr);
console.log('\n4. Array.from():');
console.log('arrCopy2 === arr:', arrCopy2 === arr); // false
console.log('arrCopy2[2] === arr[2]:', arrCopy2[2] === arr[2]); // true

// Method 5: concat() (for arrays)
const arrCopy3 = [].concat(arr);
console.log('\n5. [].concat():');
console.log('arrCopy3 === arr:', arrCopy3 === arr); // false
console.log('arrCopy3[2] === arr[2]:', arrCopy3[2] === arr[2]); // true

// Method 6: Object.create() (different prototype)
const copy3 = Object.create(Object.getPrototypeOf(original));
Object.assign(copy3, original);
console.log('\n6. Object.create() + Object.assign():');
console.log('copy3 === original:', copy3 === original); // false
console.log('copy3.skills === original.skills:', copy3.skills === original.skills); // true

// Method 7: Manual shallow copy
function shallowCopy(obj) {
  const copy = {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = obj[key];
    }
  }
  return copy;
}

const copy4 = shallowCopy(original);
console.log('\n7. Manual shallow copy:');
console.log('copy4 === original:', copy4 === original); // false
console.log('copy4.skills === original.skills:', copy4.skills === original.skills); // true

// Testing mutation
console.log('\nMutation test:');
copy1.skills.push('Node.js');
console.log('original.skills:', original.skills); // ['JS', 'React', 'Node.js'] 🚨
console.log('All methods share nested references!');

✅ When Shallow Copy is Enough

Objects with only primitive values
When nested objects are immutable
React state updates (with spread operator)
Configuration objects without nested structures
Performance-critical code paths
When you want to share nested references

❌ When Shallow Copy Fails

Objects with nested objects/arrays
When complete isolation is needed
Sending data to web workers
Caching/memoization implementations
Undo/redo functionality
Immutable state management

Example 3: Deep Copy Methods

JavaScript Editor

// Deep Copy Methods

const original = {
  name: 'Test',
  nested: {
    array: [1, 2, { inner: 'value' }],
    date: new Date('2023-01-01'),
    regex: /test/gi,
    func: function() { return 'hello'; },
    set: new Set([1, 2, 3]),
    map: new Map([['key', 'value']]),
    undefined: undefined,
    infinity: Infinity,
    nan: NaN,
    symbol: Symbol('test'),
    bigint: BigInt(123)
  }
};

console.log('Deep copy methods comparison:\n');

// Method 1: JSON.parse(JSON.stringify()) - LIMITED
const jsonCopy = JSON.parse(JSON.stringify(original));
console.log('1. JSON.parse(JSON.stringify()):');
console.log('Success?', jsonCopy !== null);
console.log('Type of nested.date:', typeof jsonCopy.nested.date); // string (not Date)
console.log('nested.regex:', jsonCopy.nested.regex); // {} (empty object)
console.log('nested.func:', jsonCopy.nested.func); // undefined (lost)
console.log('nested.set:', jsonCopy.nested.set); // {} (empty object)
console.log('nested.undefined:', jsonCopy.nested.undefined); // undefined? No, removed!
console.log('nested.symbol:', jsonCopy.nested.symbol); // undefined (lost)
console.log('nested.bigint:', jsonCopy.nested.bigint); // undefined (lost)

// Method 2: structuredClone() - MODERN (Node 17+, browsers)
let structuredCopy;
try {
  structuredCopy = structuredClone(original);
  console.log('\n2. structuredClone():');
  console.log('Success?', true);
  console.log('nested.date instanceof Date:', structuredCopy.nested.date instanceof Date); // true ✓
  console.log('nested.regex instanceof RegExp:', structuredCopy.nested.regex instanceof RegExp); // true ✓
  console.log('Type of nested.func:', typeof structuredCopy.nested.func); // undefined (functions lost)
  console.log('nested.set instanceof Set:', structuredCopy.nested.set instanceof Set); // true ✓
  console.log('nested.map instanceof Map:', structuredCopy.nested.map instanceof Map); // true ✓
  console.log('nested.undefined:', structuredCopy.nested.undefined); // undefined ✓
  console.log('nested.symbol:', typeof structuredCopy.nested.symbol); // symbol ✓
  console.log('nested.bigint:', typeof structuredCopy.nested.bigint); // bigint ✓
} catch (error) {
  console.log('\n2. structuredClone() not available:', error.message);
}

// Method 3: Custom deep copy function
function deepCopy(obj, hash = new WeakMap()) {
  // Handle primitives and null/undefined
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  
  // Handle Date
  if (obj instanceof Date) {
    return new Date(obj.getTime());
  }
  
  // Handle Array
  if (Array.isArray(obj)) {
    return obj.map(item => deepCopy(item, hash));
  }
  
  // Handle Map
  if (obj instanceof Map) {
    const copy = new Map();
    obj.forEach((value, key) => {
      copy.set(deepCopy(key, hash), deepCopy(value, hash));
    });
    return copy;
  }
  
  // Handle Set
  if (obj instanceof Set) {
    const copy = new Set();
    obj.forEach(value => {
      copy.add(deepCopy(value, hash));
    });
    return copy;
  }
  
  // Handle RegExp
  if (obj instanceof RegExp) {
    return new RegExp(obj.source, obj.flags);
  }
  
  // Handle circular reference
  if (hash.has(obj)) {
    return hash.get(obj);
  }
  
  // Handle plain objects
  if (Object.getPrototypeOf(obj) === Object.prototype) {
    const copy = {};
    hash.set(obj, copy);
    
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepCopy(obj[key], hash);
      }
    }
    
    // Handle symbol properties
    const symbols = Object.getOwnPropertySymbols(obj);
    for (let sym of symbols) {
      copy[sym] = deepCopy(obj[sym], hash);
    }
    
    return copy;
  }
  
  // Handle other objects (like class instances)
  const proto = Object.getPrototypeOf(obj);
  const copy = Object.create(proto);
  hash.set(obj, copy);
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key], hash);
    }
  }
  
  return copy;
}

const customCopy = deepCopy(original);
console.log('\n3. Custom deepCopy():');
console.log('Success?', customCopy !== null);
console.log('customCopy === original:', customCopy === original); // false
console.log('customCopy.nested === original.nested:', customCopy.nested === original.nested); // false ✓
console.log('customCopy.nested.array === original.nested.array:', customCopy.nested.array === original.nested.array); // false ✓
console.log('customCopy.nested.date instanceof Date:', customCopy.nested.date instanceof Date); // true ✓
console.log('customCopy.nested.regex instanceof RegExp:', customCopy.nested.regex instanceof RegExp); // true ✓
console.log('Type of nested.func:', typeof customCopy.nested.func); // function ✓
console.log('customCopy.nested.set instanceof Set:', customCopy.nested.set instanceof Set); // true ✓
console.log('customCopy.nested.symbol:', typeof customCopy.nested.symbol); // symbol ✓

// Test mutation
console.log('\nMutation test:');
customCopy.nested.array.push(4);
console.log('original.nested.array:', original.nested.array); // [1, 2, {inner: 'value'}] unchanged ✓
console.log('customCopy.nested.array:', customCopy.nested.array); // [1, 2, {inner: 'value'}, 4] changed ✓

📊 Deep Copy Method Comparison

Method	Functions	Dates	RegExp	Circular Refs	Maps/Sets	Symbols	Performance
`JSON.parse(JSON.stringify())`	❌ Lost	❌ String	❌ Object	❌ Error	❌ Lost	❌ Lost	Fast
`structuredClone()`	❌ Lost	✅ Preserved	✅ Preserved	✅ Works	✅ Preserved	✅ Preserved	Medium
Custom Implementation	✅ Preserved	✅ Preserved	✅ Preserved	✅ Works	✅ Preserved	✅ Preserved	Slow
Lodash `_.cloneDeep()`	✅ Preserved	✅ Preserved	✅ Preserved	✅ Works	✅ Preserved	✅ Preserved	Medium

Example 4: Performance and Use Cases

JavaScript Editor

// Performance Comparison and Use Cases

console.log('Performance comparison (copying 1000 objects):\n');

// Create test data
const createTestObject = () => ({
  id: Math.random(),
  name: 'Test Object',
  metadata: {
    created: new Date(),
    tags: ['tag1', 'tag2', 'tag3'],
    nested: {
      level1: {
        level2: {
          value: 'deep'
        }
      }
    }
  },
  data: Array(100).fill(0).map((_, i) => i),
  func: function() { return this.id; }
});

const testObjects = Array(1000).fill(0).map(createTestObject);

// 1. Shallow copy performance
console.time('Shallow copy (spread)');
const shallowCopies = testObjects.map(obj => ({ ...obj }));
console.timeEnd('Shallow copy (spread)');

// 2. JSON deep copy performance
console.time('JSON deep copy');
const jsonCopies = testObjects.map(obj => JSON.parse(JSON.stringify(obj)));
console.timeEnd('JSON deep copy');

// 3. Custom deep copy performance
console.time('Custom deep copy');
const customCopies = testObjects.map(obj => {
  function simpleDeepCopy(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    if (obj instanceof Date) return new Date(obj.getTime());
    if (Array.isArray(obj)) return obj.map(simpleDeepCopy);
    const copy = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = simpleDeepCopy(obj[key]);
      }
    }
    return copy;
  }
  return simpleDeepCopy(obj);
});
console.timeEnd('Custom deep copy');

// 4. structuredClone performance (if available)
if (typeof structuredClone === 'function') {
  console.time('structuredClone');
  const structuredCopies = testObjects.map(obj => structuredClone(obj));
  console.timeEnd('structuredClone');
}

console.log('\nMemory usage comparison:');
const sample = createTestObject();

// Calculate approximate memory
function getObjectSize(obj) {
  const visited = new WeakSet();
  
  function sizeOf(obj) {
    if (obj === null || typeof obj !== 'object' || visited.has(obj)) {
      return 0;
    }
    
    visited.add(obj);
    let bytes = 0;
    
    if (Array.isArray(obj)) {
      bytes = obj.reduce((acc, item) => acc + sizeOf(item), 0);
    } else if (obj instanceof Date || obj instanceof RegExp) {
      bytes = 8; // Approximation
    } else if (typeof obj === 'object') {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          bytes += key.length * 2; // Key size (UTF-16)
          bytes += sizeOf(obj[key]);
        }
      }
    } else if (typeof obj === 'string') {
      bytes = obj.length * 2; // UTF-16
    } else if (typeof obj === 'number') {
      bytes = 8; // 64-bit float
    } else if (typeof obj === 'boolean') {
      bytes = 4;
    }
    
    return bytes;
  }
  
  return sizeOf(obj);
}

console.log('Original size:', getObjectSize(sample), 'bytes (approx)');
console.log('Shallow copy size:', getObjectSize({ ...sample }), 'bytes (approx)');
console.log('Deep copy size:', getObjectSize(JSON.parse(JSON.stringify(sample))), 'bytes (approx)');

console.log('\nWhen to use which:\n');

console.log('✅ Use SHALLOW COPY when:');
console.log('  • Only need to copy top-level properties');
console.log('  • Nested objects are immutable or don't need copying');
console.log('  • Performance is critical');
console.log('  • Working with React state updates');
console.log('  • Cloning configuration objects with primitives');

console.log('\n✅ Use DEEP COPY when:');
console.log('  • Need complete isolation of nested objects');
console.log('  • Modifying nested data without affecting original');
console.log('  • Working with mutable state management');
console.log('  • Sending data to web workers');
console.log('  • Caching or memoization');

console.log('\n⚠️ Avoid JSON methods when:');
console.log('  • Object contains functions, Dates, RegExp, Maps, Sets');
console.log('  • Need to preserve prototype chain');
console.log('  • Object contains circular references');
console.log('  • Object contains undefined or Infinity values');

console.log('\n🎯 Use structuredClone() when:');
console.log('  • Available in your environment (Node 17+, modern browsers)');
console.log('  • Need reliable deep copy of most built-in types');
console.log('  • Don't need to copy functions or DOM elements');

console.log('\n⚡ Use custom implementation when:');
console.log('  • Need complete control over copying behavior');
console.log('  • Working with special object types or class instances');
console.log('  • Need to handle circular references');
console.log('  • Performance optimization for specific use case');

⚡ Performance Guidelines

Small Objects (< 100 props)

Any method works. Choose based on features needed.

Medium Objects (100-1000 props)

Avoid custom recursive deep copy. Use structuredClone() or libraries.

Large Objects (> 1000 props)

Consider shallow copy or immutable data structures.

Memory Considerations

Deep copies use 2x memory (temporarily)
Shallow copies use minimal extra memory
Consider copy-on-write patterns
Use object pooling for frequent copies

CPU Considerations

JSON methods are fastest for serializable data
structuredClone() is optimized in browsers
Custom functions are slowest but most flexible
Avoid deep copies in hot loops

Example 5: Special Cases and Edge Cases

JavaScript Editor

// Special Cases and Edge Cases

console.log('Special cases in copying:\n');

// 1. Circular References
const circularObj = { name: 'Circular' };
circularObj.self = circularObj; // Circular reference

console.log('1. Circular references:');
try {
  const jsonCopy = JSON.parse(JSON.stringify(circularObj));
  console.log('JSON method:', 'Throws error or loses reference');
} catch (error) {
  console.log('JSON method failed:', error.message);
}

try {
  if (typeof structuredClone === 'function') {
    const structuredCopy = structuredClone(circularObj);
    console.log('structuredClone():', 'Works!');
    console.log('structuredCopy.self === structuredCopy:', structuredCopy.self === structuredCopy); // true ✓
  }
} catch (error) {
  console.log('structuredClone failed:', error.message);
}

// Custom deep copy with circular reference handling
function deepCopyWithCircular(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj);
  
  const copy = Array.isArray(obj) ? [] : {};
  hash.set(obj, copy);
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopyWithCircular(obj[key], hash);
    }
  }
  
  return copy;
}

const circularCopy = deepCopyWithCircular(circularObj);
console.log('Custom deep copy:', 'Works!');
console.log('circularCopy.self === circularCopy:', circularCopy.self === circularCopy); // true ✓

// 2. Function Methods
const objWithMethods = {
  value: 10,
  double() {
    return this.value * 2;
  },
  arrow: () => 'arrow function'
};

console.log('\n2. Functions and methods:');
const jsonCopy2 = JSON.parse(JSON.stringify(objWithMethods));
console.log('JSON method - double:', jsonCopy2.double); // undefined
console.log('JSON method - arrow:', jsonCopy2.arrow); // undefined

// 3. Class Instances
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hello, I'm ${this.name}`;
  }
  
  get birthYear() {
    return new Date().getFullYear() - this.age;
  }
}

const person = new Person('John', 30);
person.friend = new Person('Jane', 28); // Nested instance

console.log('\n3. Class instances:');
const jsonCopy3 = JSON.parse(JSON.stringify(person));
console.log('JSON copy instanceof Person:', jsonCopy3 instanceof Person); // false
console.log('JSON copy.greet:', jsonCopy3.greet); // undefined
console.log('JSON copy.birthYear:', jsonCopy3.birthYear); // undefined

// Custom solution for class instances
function copyClassInstance(instance) {
  const proto = Object.getPrototypeOf(instance);
  const copy = Object.create(proto);
  
  for (let key in instance) {
    if (instance.hasOwnProperty(key)) {
      const value = instance[key];
      copy[key] = (value && typeof value === 'object') ? copyClassInstance(value) : value;
    }
  }
  
  return copy;
}

const classCopy = copyClassInstance(person);
console.log('Custom copy instanceof Person:', classCopy instanceof Person); // true
console.log('Custom copy.greet():', classCopy.greet()); // Works!
console.log('Custom copy.birthYear:', classCopy.birthYear); // Works!

// 4. DOM Elements and Browser Objects
console.log('\n4. Browser/DOM objects:');
const domLike = {
  element: document?.createElement?.('div') || { nodeType: 1 },
  window: typeof window !== 'undefined' ? window : { location: {} },
  navigator: typeof navigator !== 'undefined' ? navigator : { userAgent: 'test' }
};

try {
  if (typeof structuredClone === 'function') {
    // structuredClone can clone some DOM elements
    const domCopy = structuredClone(domLike);
    console.log('structuredClone works for some DOM objects');
  }
} catch (error) {
  console.log('structuredClone failed for DOM:', error.message);
}

// 5. Symbol and Private Fields
const objWithSymbol = {
  regular: 'value',
  [Symbol('secret')]: 'symbol value'
};

class WithPrivate {
  #privateField = 'secret';
  publicField = 'public';
  
  getPrivate() {
    return this.#privateField;
  }
}

console.log('\n5. Symbols and private fields:');
const symbolCopy = { ...objWithSymbol };
console.log('Spread copies symbols?', Object.getOwnPropertySymbols(symbolCopy).length > 0); // true ✓

const privateInstance = new WithPrivate();
console.log('Private fields in copy?', 'Cannot be accessed from outside');

// 6. Performance with Large Objects
console.log('\n6. Large object performance tips:');
console.log('• Use shallow copy when possible');
console.log('• Consider immutable data structures');
console.log('• Use Object.freeze() to prevent mutations');
console.log('• Implement copy-on-write patterns');
console.log('• Use specialized libraries for specific types');

// 7. Best Practice Pattern: Immutable Update
const state = {
  user: {
    name: 'Alice',
    preferences: {
      theme: 'dark',
      notifications: true
    }
  },
  items: [{ id: 1 }, { id: 2 }]
};

// Instead of mutating, create new object
const updatedState = {
  ...state,
  user: {
    ...state.user,
    preferences: {
      ...state.user.preferences,
      theme: 'light'
    }
  },
  items: state.items.map(item => 
    item.id === 2 ? { ...item, selected: true } : item
  )
};

console.log('\n7. Immutable update pattern:');
console.log('Original theme:', state.user.preferences.theme);
console.log('Updated theme:', updatedState.user.preferences.theme);
console.log('Original unchanged:', state.user.preferences.theme === 'dark');

Exercise: Implement Copy Utilities

JavaScript Editor

// Implement these copy utility functions

// Task 1: Smart copy function
function smartCopy(obj, depth = 'shallow') {
  // Should handle:
  // depth = 'shallow' → shallow copy
  // depth = 'deep' → deep copy (use best method available)
  // depth = number → copy to that depth (1 = shallow, 2 = one level deep, etc.)
  // Return appropriate copy based on depth parameter
}

// Task 2: Immutable update helper (like React setState)
function immutableUpdate(obj, path, value) {
  // Should update a nested property without mutating original
  // path can be string like 'user.profile.name' or array ['user', 'profile', 'name']
  // Return new object with updated value
  // Example: immutableUpdate(state, 'user.name', 'Alice')
}

// Task 3: Copy with transformation
function copyWithTransform(obj, transformMap) {
  // Should copy object while applying transformations
  // transformMap = { propName: transformFunction }
  // Example: copyWithTransform(user, { age: age => age + 1 })
}

// Task 4: Diff-based copy
function copyChangedOnly(original, updated) {
  // Should create new object containing only properties that changed
  // For nested objects, only include changed nested properties
  // Useful for React optimization
}

// Task 5: Circular reference safe copy
function safeDeepCopy(obj) {
  // Handle circular references
  // Handle Dates, RegExp, Maps, Sets, Arrays, Objects
  // Preserve class instances if possible
}

// Test cases
const testObject = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'New York',
    coordinates: {
      lat: 40.7128,
      lng: -74.0060
    }
  },
  scores: [95, 87, 92],
  getInfo() {
    return `${this.name}, ${this.age}`;
  },
  createdAt: new Date('2023-01-01'),
  tags: new Set(['admin', 'user']),
  metadata: new Map([['id', 1], ['version', '1.0']])
};

// Add circular reference
testObject.self = testObject;

console.log('=== Testing smartCopy ===');
const shallow = smartCopy(testObject, 'shallow');
const deep = smartCopy(testObject, 'deep');
const depth2 = smartCopy(testObject, 2);

console.log('Shallow copy - same nested address?', shallow.address === testObject.address);
console.log('Deep copy - same nested address?', deep.address === testObject.address);
console.log('Depth 2 - same coordinates?', depth2.address.coordinates === testObject.address.coordinates);

console.log('\n=== Testing immutableUpdate ===');
const updated = immutableUpdate(testObject, 'address.city', 'Boston');
console.log('Original city:', testObject.address.city);
console.log('Updated city:', updated.address.city);
console.log('Same address object?', updated.address === testObject.address);

console.log('\n=== Testing copyWithTransform ===');
const transformed = copyWithTransform(testObject, { 
  age: a => a + 1,
  name: n => n.toUpperCase()
});
console.log('Original age:', testObject.age);
console.log('Transformed age:', transformed.age);
console.log('Transformed name:', transformed.name);

console.log('\n=== Testing copyChangedOnly ===');
const changed = copyChangedOnly(
  { a: 1, b: { c: 2, d: 3 } },
  { a: 1, b: { c: 2, d: 4 } }
);
console.log('Diff result:', changed); // Should be { b: { d: 4 } }

console.log('\n=== Testing safeDeepCopy ===');
const safeCopy = safeDeepCopy(testObject);
console.log('Copy successful?', safeCopy !== null);
console.log('Circular reference preserved?', safeCopy.self === safeCopy);
console.log('Date preserved?', safeCopy.createdAt instanceof Date);
console.log('Function preserved?', typeof safeCopy.getInfo === 'function');

💡 Best Practices Summary

Default to shallow copy unless you need deep copy
Use structuredClone() when available and appropriate
Avoid JSON.parse(JSON.stringify()) for complex objects
Consider using immutable data structures for frequently copied data
Use libraries like Lodash for production deep copying
Always test edge cases: circular refs, special objects, large data
Document your copy strategy in team projects
Consider performance implications in hot code paths

🎯 Interview Questions on Copying

What's the difference between shallow and deep copy?
How does Object.assign() differ from spread operator for copying?
What are the limitations of JSON.parse(JSON.stringify())?
How would you handle circular references in deep copy?
What is structuredClone() and when would you use it?
How do you copy an array of objects deeply?
What are the performance implications of different copy methods?
How would you implement an immutable update pattern?
What's the difference between copy and clone in JavaScript?
How do you handle copying of class instances?

← Object Property Descriptors Advanced Array Methods →

JavaScript Tutorial

Shallow vs Deep Copy

⚠️ The Copy Problem in JavaScript

Visualizing Copy Types

Reference Copy

Shallow Copy

Deep Copy

Example 1: The Problem with References

🔍 Why This Matters

Common Bug Scenarios

Real Impact

Example 2: Shallow Copy Methods

✅ When Shallow Copy is Enough

❌ When Shallow Copy Fails

Example 3: Deep Copy Methods

📊 Deep Copy Method Comparison

Example 4: Performance and Use Cases

⚡ Performance Guidelines

Small Objects (< 100 props)

Medium Objects (100-1000 props)

Large Objects (> 1000 props)

Memory Considerations

CPU Considerations

Example 5: Special Cases and Edge Cases

Exercise: Implement Copy Utilities

💡 Best Practices Summary

🎯 Interview Questions on Copying

Follow Us

Our Tools

Our Company

Special Tools