Javascript shallow and deep copy

💡 Copy-Paste Confusion in JavaScript? Here’s the Simple Fix!

Ever tried to copy an array in JavaScript and ended up messing things up without knowing why? 😕 Let’s break down three simple ways to copy an array and what really happens behind the scenes — in plain, friendly language.

📦 The Original Array

Let’s say you have an array like this:

let a = [{a: 1}, {b: 2}, {c: {d: 4}}];

This array has objects inside it — some simple, some a bit nested.

1. copyA = a – The Twin That Shares Everything 🧍‍♂️🧍‍♂️

let copyA = a;

Here’s the simplest (and sometimes the trickiest) one. This isn’t a real copy. It’s like giving your friend the same notebook you’re writing in. If either of you writes something, both will see it. Because it’s the same object in memory.

When you write let copyA = a;, you’re not really copying the array. Instead, both a and copyA point to the exact same thing in memory.

The array and its elements aren’t copied. What actually happens is that both variables — a and copyA — hold the same reference to the array in memory. So, when you modify something inside copyA, the changes affect a as well. This can lead to unintended side effects if you’re not careful.

copyA[0].a = 99;  // This also changes `a[0].a`!
console.log(a[0].a); // Outputs: 99

So, be aware: both a and copyA are the same array. Any changes you make to one will reflect on the other. If that’s what you want — perfect! But if you need independent copies, this is not the way to go.

2. copyB = […a] – The Shallow Lookalike 🎭

let copyB = [...a];

This one copies the array itself, but not the stuff inside it. Think of it as copying the structure of the bookshelf, but the books (objects) inside the shelf are still the same. This is a shallow copy of the array. It creates a new array, but only copies the references to the objects inside.

The array copyB itself is new and independent from a. But if you modify the objects inside copyB, those changes also affect a, because the objects inside copyB are the same ones inside a.

copyB[0] = 100;  // This does not change `a`
// but
copyB[1].b = 99;  // This changes `a[b].b`
console.log(a); // Outputs: [ { a: 1 }, { b: 99 }, { c: { d: 4 } } ]
console.log(copyB); // Outputs: [ 100, { b: 99 }, { c: { d: 4 } } ]

So while copyB is an independent array (you can add/remove items), the objects inside the array are shared. This can be fine for simple, flat arrays, but if your array has objects or nested data, changes in copyB could still impact a.

3. copyC = JSON.parse(JSON.stringify(a)) – The Real Clone 🧬

let copyC = JSON.parse(JSON.stringify(a));

Now, we get to the deep copy. This one goes full ninja. It copies everything, including the deep stuff inside. It does this by turning the data into a string, and then back into a brand new array.

It creates a completely independent copy of everything in the array — even the objects inside. It works by first turning the entire array into a JSON string, then parsing it back into a fresh object. This ensures that even nested objects are copied and don’t share references.

• This method creates a whole new structure for the array and its objects. So if you change anything in copyC, a remains completely untouched.

copyC[2].c.d = 5;  
console.log(a[2].c.d); // Outputs: 4 (no change!)

• However, this method only works with data that can be serialized into JSON, so it won’t work properly with:

• Functions
• undefined
• Date objects
• RegExp objects

If your array contains any of these, they’ll either be lost or turned into a generic object, so this method is not perfect for every situation.

⚖️ Which One Should You Use?

Use Case	Recommended Copy
Just need another name for the same array	copyA = a
Want to copy array structure, not the objects inside	copyB = […a]
Want a full, safe, deep copy	copyC = JSON.parse(JSON.stringify(a))

Final Thought 💬

Copying in JavaScript can be tricky because the behavior depends on how you copy — whether you’re creating references, shallow copies, or deep copies. Once you understand the difference, you’ll avoid common bugs where changes in one variable affect another in ways you didn’t expect.

So, whether you’re building a to-do app or handling complex data, keep this in mind when copying arrays! 🧠💡