JavaScript Copy vs Reference

[devtunis]

🧠 JavaScript Copy vs Reference

A small note I wrote while learning how objects behave in JavaScript.

Sometimes when we assign variables we think we made a copy,
but actually we only created a reference.

Understanding this saved me from many bugs.

---

1️⃣ Primitive Values (Safe Copy)

Primitive values are copied automatically.

Examples:

• number
• string
• boolean
• null
• undefined

let a = 5
let b = a

b = 10

console.log(a) // 5

Here a is not affected because primitives are copied.

---

2️⃣ Objects (Reference)

Objects behave differently.

let a = { x: 0 }

let b = a

b.x = 10

console.log(a) // { x: 10 }

Why?

Because b does not copy the object.
It only stores a reference to the same object in memory.

a ───► { x:0 }
b ────┘

Both variables point to the same object.

---

3️⃣ Creating a Safe Copy

We can use the spread operator.

let a = { x: 0 }

let b = { ...a }

b.x = 10

console.log(a) // { x: 0 }

Now a and b are different objects.

a ───► { x:0 }

b ───► { x:0 }

---

4️⃣ Common Mistake

This does NOT copy the object.

let a = { x: 0 }

let b = { a }

This creates a new object that contains a.

b = {
  a: { x:0 }
}

If you modify it:

b.a.x = 10

Then a will change too.

---

5️⃣ Important Note

The spread operator makes a shallow copy, not a deep copy.

Example:

let a = { x: { y: 1 } }

let b = { ...a }

b.x.y = 10

Now:

a.x.y === 10

Because the nested object is still a reference.

---

🎯 Rule I Remember

Primitives → Copy
Objects → Reference

Understanding this helps avoid many bugs when working with:

• React
• State
• Arrays
• Objects

---

✨ Small concepts like this make big differences in real projects.