When we work with objects and arrays in JavaScript, we often need to copy data. But copying in JavaScript is not always as simple as it looks. Depending on the method you use, you may end up with shared references which can cause unexpected changes in your data. To handle this properly, it’s important to understand the concepts of shallow copy and deep copy.
Shallow Copy
A shallow copy creates a new object but only copies the top-level properties.
If the property is a primitive value like string, number, boolean, null, undefined, symbol, or bigint, it gets copied directly.
If the property is an object, array, or function (reference type), then only the reference is copied. This means both the original and the copied object will point to the same nested structure.
Example:
const original = {
name: "Pratik",
skills: ["JavaScript", "React"]
};
const shallowCopy = { ...original };
shallowCopy.name = "Alex";
shallowCopy.skills.push("Node.js");
console.log(original.name);
console.log(original.skills);
Here, the primitive property name is copied safely, but the skills array is shared. Updating shallowCopy.skills also updates original.skills.
Common Ways to Create Shallow Copies:
Deep Copy
A deep copy goes one step further. It copies not only the top-level properties but also all nested objects and arrays. This makes the copied object completely independent of the original.
Example:
const original = {
name: "Pratik",
skills: ["JavaScript", "React"]
};
const deepCopy = structuredClone(original);
deepCopy.name = "Alex";
deepCopy.skills.push("Node.js");
console.log(original.name);
console.log(original.skills);
Here, the deepCopy object is fully independent. Any change in deepCopy does not affect original.
Common Ways to Create Deep Copies:
structuredClone() (works in modern browsers and Node.js 17+)
const clone = structuredClone(obj);
JSON method (works but has limitations)
const clone = JSON.parse(JSON.stringify(obj));
Note: This method removes functions, symbols, undefined values, and fails with circular references.
Libraries like Lodash (_.cloneDeep(obj)) or Immer.
When Should You Use Each?
Quick Comparison
| Feature | Shallow Copy | Deep Copy |
| Copies primitives | Yes | Yes |
| Copies references | Yes (shared) | No (independent) |
| Performance | Faster | Slower |
| Use case | Simple, flat objects/arrays | Nested or complex objects |
Conclusion
Understanding the difference between shallow copy and deep copy is very important for every JavaScript developer. It helps avoid unexpected bugs, especially when handling state management in frameworks like React.
This clarity will save you from a lot of hidden issues in real-world applications.
