A shallow copy duplicates only top-level properties while nested objects share references; a deep copy recursively duplicates all nested objects creating fully independent copies.
Shallow Copy:
Methods that create shallow copies:
{...obj}, [...arr])Object.assign({}, obj)Array.prototype.slice()Array.from()Deep Copy:
Methods for deep copy:
structuredClone() (Recommended - ES2022+)
JSON.parse(JSON.stringify()) (Legacy)
lodash _.cloneDeep() - Most comprehensive, handles edge cases
const original = {
name: 'John',
address: { city: 'NYC', zip: '10001' }
};
// Shallow copy with spread operator
const shallow = { ...original };
// Modifying top-level works as expected
shallow.name = 'Jane';
console.log(original.name); // 'John' - unchanged
// But nested objects are shared!
shallow.address.city = 'LA';
console.log(original.address.city); // 'LA' - original mutated!
// Same issue with Object.assign
const shallow2 = Object.assign({}, original);
shallow2.address.zip = '90001';
console.log(original.address.zip); // '90001' - mutated again!