1. Shallow Copy
A shallow copy creates a new object with copies of the values of the original object’s properties.
If the properties are primitive values (like numbers, strings, booleans), they are copied as-is.
However, if a property is a reference to an object, only the reference is copied, not the actual object.
This means changes to the nested object in the copy will affect the original object.
Examples of Shallow Copy Methods:
Object.assign()
- Spread operator
{ ...obj }
Array.prototype.slice()
Array.from()
Example:
const original = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
// Shallow copy
const copy = { ...original };
copy.name = 'Mike'; // Changes only the copy
copy.address.city = 'Los Angeles'; // Changes the original too!
console.log(original.name); // 'John'
console.log(original.address.city); // 'Los Angeles'
Key Point:
- Primitive values (like
name
) are copied by value. - Objects inside (like
address
) are copied by reference.
2. Deep Copy
A deep copy creates a new object along with recursively copying all nested objects.
No references to the original objects remain in the copied object.
Changes in the copy will not affect the original object.
Ways to Create a Deep Copy:
JSON.parse(JSON.stringify(object))
(Simple but has limitations)- Libraries like Lodash:
_.cloneDeep(object)
- Custom recursive function
Example:
const original = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
// Deep copy using JSON methods
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.address.city = 'Los Angeles'; // Changes only the deep copy
console.log(original.address.city); // 'New York'
Limitations of JSON.parse(JSON.stringify())
:
- Does not handle functions,
undefined
,Symbol
,Date
,RegExp
, etc. properly. - Works best for simple objects with JSON-compatible values.
Key Differences Summary:
Aspect | Shallow Copy | Deep Copy |
---|---|---|
Copies Primitive Values? | Yes | Yes |
Copies Nested Objects? | By Reference | Creates New Copies |
Changes in Copy Affect Original? | Yes (For nested objects) | No |
Common Methods | Object.assign() , {...obj} , Array.slice() | JSON.parse(JSON.stringify()) , _.cloneDeep() |
Handles Functions, Dates, etc.? | Yes | JSON way: No (Use Lodash for robust deep copying) |
When to Use Which?
Use Case | Suggested Copy Type |
---|---|
Simple Objects (No nested structure) | Shallow Copy |
Nested Objects / Complex Objects | Deep Copy |
Performance is Critical, No Nesting | Shallow Copy |
Ensuring Full Data Separation | Deep Copy |
Final Example Showing the Difference:
const original = { name: 'Alice', info: { age: 25 } };
const shallow = { ...original };
const deep = JSON.parse(JSON.stringify(original));
// Modifying nested object in shallow copy
shallow.info.age = 30;
// Modifying nested object in deep copy
deep.info.age = 40;
console.log(original.info.age); // 30 (because shallow copy affected original)
console.log(shallow.info.age); // 30
console.log(deep.info.age); // 40 (deep copy is independent)