Mastering Deep Copy vs Shallow Copy in JavaScript: A Must-Know for Developers

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);   // "Pratik" → unchanged
console.log(original.skills); // ["JavaScript", "React", "Node.js"] → changed

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:

• Object spread: { ...obj }

• Object.assign({}, obj)

• Array methods like:

  • arr.slice()

  • [...arr]

---

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"]
};

// Deep copy using structuredClone
const deepCopy = structuredClone(original);

deepCopy.name = "Alex";
deepCopy.skills.push("Node.js");

console.log(original.name);   // "Pratik" → safe
console.log(original.skills); // ["JavaScript", "React"] → safe

Here, the deepCopy object is fully independent. Any change in deepCopy does not affect original.

Common Ways to Create Deep Copies:

1. structuredClone() (works in modern browsers and Node.js 17+)

    const clone = structuredClone(obj);
   

2. 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.

3. Libraries like Lodash (_.cloneDeep(obj)) or Immer.

---

When Should You Use Each?

• Shallow Copy is enough when:

  • You only need to copy simple, top-level data.

  • You are sure that nested objects or arrays will not be modified.

• Deep Copy is necessary when:

  • You want complete independence between the copy and the original.

  • You are working with frameworks like React/Redux, where immutability is important.

  • You are dealing with nested or complex data structures.

---

Quick Comparison

---

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.

• Use shallow copy when you only need a quick top-level copy.

• Use deep copy when you want complete isolation between the original and the copied data.

This clarity will save you from a lot of hidden issues in real-world applications.