DEV Community

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

Posted on

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

#javascript #programming #webdev #beginners

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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

       [1,2,3]
         ↑
arr1 ---┘
         └--- arr2
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 😌
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Real copy (shallow):

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

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 (0)