🧠 JavaScript’te Mutation vs Immutability

(Sessiz Katil Hatalar, Kayıp Referanslar ve “Ben Sadece sort Yapmıştım…” Dramı)

JavaScript’te bazı hatalar vardır…

• Console’da bağırmaz ❌
• Error fırlatmaz ❌
• Testleri geçer ✅
• Ama prod’da ortalığı yakar 🔥

Ve sonra biri sana gelir ve o efsane cümleyi kurar:

“Bu liste neden bozuldu?”

Sen de düşünürsün:

“Ama… ben… sadece… sort yapmıştım…” 😐

Hoş geldin:
Mutation vs Immutability evrenine.

🧨 Mutation Nedir? (Masum Görünümlü Sabotaj)

Mutation, bir veri yapısını (array, object)
👉 yerinde değiştirmek demektir.

Yani:

• Aynı referans
• Aynı adres
• Ama içerik artık başka biri 😬

🔧 Basit Ama Tehlikeli Örnek

const numbers = [3, 1, 2];
numbers.sort();

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

🧠 İlk bakışta:

“Eee? Çalışıyor işte.”

Ama perde arkasında olan şu:

• numbers artık eski numbers değil
• Orijinal veri kalıcı olarak değişti
• Geri dönüş yok
• Undo yok
• Geçmiş olsun 🎭

📌 sort() sonucu döndürür gibi görünür ama aslında diziyi yerinde değiştirir.

🧠 Neden Mutation Bu Kadar Tehlikeli?

Çünkü gerçek hayatta:

• Aynı veri birden fazla yerde kullanılır
• Component A bu veriye güvenir
• Component B başka bir sıralama bekler
• API response cache’lenmiştir
• Sen masum masum sort() yaparsın

Ve sonra…

💥 UI bozulur
💥 State tutarsız olur
💥 Debug kabusa döner

Ama hata nerede?

“Hiçbir yerde… galiba?” 😅

🧪 Gerçek Production Hikâyesi (Sessiz Felaket)

const users = [
  { name: "Ayşe", age: 25 },
  { name: "Mehmet", age: 30 },
  { name: "Zeynep", age: 20 }
];

const sortedUsers = users.sort((a, b) => a.age - b.age);

🧠 Senin beklentin:

• sortedUsers → sıralı
• users → orijinal hâl

❌ Gerçek:

• users değişti
• sortedUsers sadece referans
• Artık herkes yaşa göre sıralı 😐

Sonra biri gelir:

“Dropdown niye değişti?”

Sen:

“O dropdown’a dokunmadım ki…”

Ama dokundun.
Dolaylı yoldan.
İşte mutation böyle çalışır 🕳️

☠️ En Yaygın Mutation Yapan Metotlar (Kara Liste)

Bunlar sessizce mutate eder:

📛 Array Metotları

• sort()
• push()
• pop()
• shift()
• unshift()
• splice()

📛 Object Üzerinde

user.age = 30;

Bu satır:

• Masum görünür
• Ama object artık eski object değildir

📌 Eğer bu object:

• state ise ❌
• props ise ❌
• shared data ise ❌
  geçmiş olsun.

🛡️ Immutability Nedir? (Senior Refleksi)

Immutability şu zihniyettir:

“Ben mevcut veriye dokunmam.
Yeni bir kopya oluştururum.”

🧘‍♂️ Daha sakin debug
🧠 Daha öngörülebilir kod
🛠️ Daha az sürpriz

Senior’ların “huzurlu” olmasının sebebi budur.

✨ Spread Operator: Kurtarıcı Pelerin 🦸‍♂️

🔧 Array Kopyalayarak Sıralama

const numbers = [3, 1, 2];

const sortedNumbers = [...numbers].sort((a, b) => a - b);

🧠 Ne oldu?

• ...numbers → yeni bir array
• sort() → kopya üzerinde çalıştı
• Orijinal veri güvende ✔

console.log(numbers);       // [3, 1, 2]
console.log(sortedNumbers); // [1, 2, 3]

🎉 Herkes mutlu.

🔧 Object Güncelleme (Doğru Yol)

const user = { name: "Ayşe", age: 25 };

const updatedUser = {
  ...user,
  age: 26
};

🧠 Burada:

• user → değişmedi
• updatedUser → yeni object
• React → render eder
• Debug → kolaylaşır

📌 Bu pattern’i alışkanlık yap.

⚛️ React Neden Immutability Takıntılı?

React şuna bakar:

“Referans değişti mi?”

❌ Yanlış (Mutation)

state.users.sort();
setState(state);

🧠 React der ki:

“Aynı referans, boş ver.”

✅ Doğru (Immutable)

setState({
  users: [...state.users].sort((a, b) => a.age - b.age)
});

🧠 React:

“Aaa yeni referans! Render ediyorum.”

🔥 İşte bu fark:

• “Neden render olmadı?”
• vs
• “Tabii ki render oldu.”

🧠 Mutation Nerede Kabul Edilebilir?

Evet, her mutation kötü değildir.
Ama bilinçli olmalı.

✅ Kabul Edilebilir

• Local değişken
• Fonksiyon içi geçici veri
• UI dışı hesaplamalar

❌ Tehlikeli

• State
• Props
• Global data
• Cache
• API response

📌 Kural:

“Paylaşılıyorsa → immutable davran.”

🆚 Mini Karşılaştırma Tablosu

🧠 Altın Değerinde Senior İpuçları

✨ sort() masum değildir
✨ State kutsaldır, dokunma
✨ Kopyalamak pahalı değil, bug pahalı
✨ Immutability seni yavaşlatmaz
✨ Seni daha hızlı debug eden biri yapar

☕ Son Söz (Senior Cümlesi)

JavaScript’te en tehlikeli hatalar:

• Sessizdir
• Masum görünür
• Ama prod’da çıkar

Ve biri sana:

“Bu veri neden değişti?”

diye sorduğunda…

Sen sakince gülümsersin 😎☕
ve dersin ki:

“Muhtemelen bir yerde mutation var.”

👑
İşte bu cümle senior cümlesidir.