Shallow Copy vs Deep Copy in JavaScript (Explained Like You’re Five) — By Ankit Mehta

Have you every copied something in JavaScript…

…changed one small thing…

…and suddenly your original data also changed?

If yes, then you’re welcomed to the Shallow Copy vs Deep Copy problem.

When I first learned JS, this concept confused me so badly that i felt JS was betraying me. So i finally sat down, understood, and here’s the simplest explanation you’ll ever find.

Let’s start with ‘ What ’ Question.

⭐What Does “ Copying ” Even Mean ?

If someone asks you to “copy” your homework, you’ll probably create a new page, right?

However, In JavaScript, copying works a little differently depending on whether the data is:

👉Primitive → numbers, strings, booleans

👉Non-primitive → arrays and objects

And things get a little weird with non-primitives.

⭐The Core Idea ( Point To Remember! )

There’s a golden rule:

A shallow copy copies the reference.
A deep copy copies the value.

Simple.

But to fully understand i’ll break it down with an analogy.

⭐The Pizza Analogy (So Simple You’ll Never Forget)

Just Imagine, you and your friend share a pizza.

Shallow Copy = You both get the SAME pizza.

If your friend eats a slice → your pizza also shrinks.

Deep Copy = You each get your OWN pizza.

Your friend eats → your pizza is safe.

And That’s it.

This is the entire concept.

Now let’s look at JavaScript examples.

⭐Shallow Copy in JavaScript

A shallow copy looks like a new copy…

..but inside, it still points to the same memory.

Example:

const original = { name: "Ankit" };

const copy = original; //not a real copy

if you change copy.name, the original also changes.

copy.name =  "Ankit"

console.log(original.name); // "Ankit"

Why?

Because both original and copy point to the same object in memory.

⭐Real Shallow Copy Methods in JavaScript

These create a new object/array…

…but only the top level values are copied.

Become a member
Array shallow copies

const arr = [1, 2, 3];
const shallow = [...arr];
// OR arr.slice();

Object shallow copies

const obj = { a: 1, b: 2 };
const shallow = { ...obj };
// OR Object.assign({}, obj);

But the trap:

If the object contains nested objects, those nested ones are STILL shared.

const user = {
  name: "Ankit",
  hobbies: ["coding", "gaming"],
};

const shallowCopy = { ...user };

shallowCopy.hobbies.push("fitness");

console.log(user.hobbies);  
// ["coding", "gaming", "fitness"] 😱

Because inside the object, hobbies is still the same array.

⭐Deep Copy in JavaScript

A deep copy makes a completely new object.

Nothing is shared.
Changes in the copy never affect the original.

Example:

const original = { name: "Ankit", skills: ["JS", "C++"] };

const deepCopy = JSON.parse(JSON.stringify(original));

deepCopy.skills.push("Node.js");

console.log(original.skills); 
// ["JS", "C++"] ✔️ unchanged

⭐Ways to Do Deep Copy

some common methods are:

1. JSON.parse( JSON.stringify() )
✔️easy

❌does NOT work for functions, dates, undefined, etc.

2. structuredClone() (Modern JS — BEST)

const deepCopy = structuredClone(original);

✔️ perfect deep copy
✔️ handles nested data
✔️ keeps types
✔️ fastest, cleanest
❌ not supported in very old browsers

3. Lodash cloneDeep()

if you use lodash:

const deepCopy = _.cloneDeep(obj);

When Should You Use What?

Use Shallow Copy when:

• no nested objects inside
• performance matters
• the data is simple
• you just need a quick copy

Use Deep Copy when:

• there are nested objects/arrays
• modifying the copy shouldn’t touch original
• you’re dealing with APIs, forms, configs, Redux state, etc.

Key Points (Remember This!)

• Shallow copy → copies reference
• Deep copy → copies actual value
• Spread operator (...) is shallow
• structuredClone() is the best deep copy method
• If your nested data is changing unexpectedly → you made a shallow copy by mistake

❤️Lastly…

If you are learning JavaScript, you will face bugs caused by shallow copying.

I faced them too. Everyone does.

But once you understand the difference between shallow and deep copy, your debugging will become easier, your code becomes cleaner and JS starts to make sense.

This article is not just for readers, it helped me understand the topic too.

Two birds, one stone.