Sylwia Laskowska

Posted on Oct 24

Beginner’s Guide #5: Mutable vs Immutable in JS — The Silent Bug Factory Nobody Warns You About 😳

#webdev #javascript #beginners #programming

aka “Why your variable sometimes politely stays still… and sometimes burns your codebase to the ground 🔥😂”

So you're writing JS, life is good, everything kinda works…
…until one day two variables suddenly change at the same time, and you sit there like:

“EXCUSE ME — WHO INVITED THE SPIDER-MAN MULTIVERSE INTO MY VARIABLES??” 😳🕸️🕷️

Let’s uncover the crime scene 🕵️‍♀️

🧪 Quick Reality Check

Type	Examples	Can I break it?
Immutable	numbers, strings, booleans	❌ nope
Mutable	objects, arrays, functions	✅ oh yes you can

Immutable = “no touchy” 🚫
Mutable = “I'm editable chaos in disguise” 😈

Immutable: behaves like a calm, well-adjusted adult 😇

let a = 10;
let b = a;
a = 20;

console.log(a); // 20
console.log(b); // 10

Every “change” = actually a new value in memory.
You didn’t modify 10. You just threw it away and picked up a 20 instead.

Like buying a new coffee instead of reheating the old one ☕→♨️→🤢

Even strings are like “don’t touch me, I’m precious”:

let t = "Hello";
t[0] = "h";
console.log(t); // still "Hello"

The "H" is forever. You can't hurt it. Taylor Swift-level emotional armor 💅

👉 PS: Symbol and BigInt also belong to this “don’t touch me, I was born perfect” squad.
They’re primitives too — which means you can only replace them, never mutate them.
Once created → locked in 🔒✨

Mutable: the drama queen of JavaScript 🎭💥

let arr1 = [1, 2, 3];
let arr2 = arr1;

arr1.push(4);

console.log(arr2); // [1, 2, 3, 4]

You think you cloned the array ✅
JavaScript: “lol no, enjoy your shared trauma” 😌

       [1,2,3]
         ↑
arr1 ---┘
         └--- arr2

Two variables. ONE array.
Congrats, you just enabled joint custody.

The CONST Illusion™ 😎

People be like:

“I used const so my data is safe, right?” 😇

JavaScript:

“bestie… no 💅”

const arr = [1, 2];
arr.push(3);     // ✅ totally fine

arr = [1, 2, 3]; // ❌ TypeError

const means the reference can’t change.
The object behind it is still doing zoomies 🐕💨

👉 And if you really want to pretend an object is immutable:

const obj = Object.freeze({ a: 1 });
obj.a = 999; // silently ignored 😌

This is only shallow freeze™ — the first layer is frozen,
but anything nested inside is still running around with raccoon energy 🦝💨

“Copy” that isn’t a copy (aka JavaScript gaslighting)

const a = [1, 2, 3];
const b = a; // FAKE COPY 😈
b.push(99);

console.log(a); // [1, 2, 3, 99] ... oh no

Real copy (shallow):

const a = [1, 2, 3];
const b = [...a]; // finally a healthy relationship 💖

TL;DR 🧠⚡

	Immutable	Mutable
can I ruin this?	❌ sadly no	✅ absolutely
stored as	value	reference
danger level	1/10	11/10 🔥
emotional vibe	zen monk	chaotic raccoon 🦝

🏁 tiny wholesome ending

And that’s the whole secret:
primitives = always replaced,
objects = mutated in place.
Once this clicks, JavaScript suddenly stops feeling like dark magic and starts making actual sense ✨

Top comments (6)

shemith mohanan • Oct 25

Loved the way you explained this — especially the “shared trauma” analogy for reference copying 😄. The stack vs heap difference is the part most beginners miss, and your examples make it click fast.

If you ever expand this, a quick note on shallow vs deep copies (e.g., structuredClone or spread vs JSON tricks) would be a great next step for beginners.

This made a tricky JS concept feel fun and simple — great job! 🙌

Sylwia Laskowska • Oct 25

Thanks! 😄
Yes — the “shared trauma” part is exactly what finally makes people feel the reference vs value difference 😅

And you’re 100% right: the moment stack vs heap “clicks”, all the weird JS behaviour suddenly stops feeling weird.

I’ll definitely cover shallow vs deep copies next — especially structuredClone (the secretly underrated hero) vs spread / JSON hacks. That’s where the second wave of “why is this mutating again??” usually hits beginners 😂

Thanks a lot for the thoughtful comment 🙌