Web Geliştirmede `structuredClone()` ile Derin Kopyalama Sanatı 
Selam dostlar! Bugün sizlerle, özellikle karmaşık veri yapılarıyla uğraşırken hayat kurtaran, modern JavaScript'in nispeten yeni ama bir o kadar da güçlü bir metodu olan `structuredClone()`'dan bahsetmek istiyorum.
Kaç kere bir nesneyi kopyalamaya çalıştınız ve sonra orijinal nesneyi değiştirdiğinizde kopyanızın da değiştiğini fark ettiniz? İşte bu, sığ kopyalama (shallow copy) denen can sıkıcı durum. `Object.assign()` veya spread operator (`...`) bu iş için yetersiz kalabiliyor. `structuredClone()` ise bize gerçek, derinlemesine bir kopya (deep copy) sunuyor.
Neden `structuredClone()` Kullanmalıyız?
Nasıl Kullanılır? Basit Örnekler
İşte temel kullanımı:
Gördüğünüz gibi, kopya üzerinde yaptığımız tüm değişiklikler orijinal veriyi etkilemedi.
Neleri Kopyalayabilir? (Clonable Types)
`structuredClone()` aşağıdaki tipleri destekler:
Dikkat Edilmesi Gerekenler ve Sınırlamalar
Her şey mükemmel değil elbette. Bazı noktalara dikkat etmek gerek:
[COLOR=rgb(97, 189, 109)`JSON.stringify()` ile Karşılaştırma[/COLOR]
Eski yöntemle (`JSON.parse(JSON.stringify())`) arasındaki en büyük farklar:
Tarayıcı Desteği ve Polyfill
`structuredClone()` modern tarayıcılarda (Chrome, Firefox, Safari, Edge) ve Node.js 17+ sürümlerinde destekleniyor.
Eski projeleriniz için, `core-js` gibi kütüphanelerin polyfill'ini kullanabilir veya ihtiyacınıza göre `JSON.stringify` hack'ine devam edebilirsiniz.
**Sonuç Olarak:**
Karmaşık, iç içe geçmiş JavaScript nesneleriniz varsa ve bunları gerçekten bağımsız bir şekilde kopyalamanız gerekiyorsa, `structuredClone()` artık ilk tercihiniz olmalı. Kodunuzu daha temiz, daha anlaşılır ve daha güvenli hale getiriyor. Bir sonraki state yönetimi veya veri manipülasyonu ihtiyacınızda, bu küçük sihirbazı aklınızın bir köşesinde bulundurun!
Umarım faydalı olmuştur. Sorularınız olursa yorumlarda bekliyorum. İyi kodlamalar!
Selam dostlar! Bugün sizlerle, özellikle karmaşık veri yapılarıyla uğraşırken hayat kurtaran, modern JavaScript'in nispeten yeni ama bir o kadar da güçlü bir metodu olan `structuredClone()`'dan bahsetmek istiyorum.
Kaç kere bir nesneyi kopyalamaya çalıştınız ve sonra orijinal nesneyi değiştirdiğinizde kopyanızın da değiştiğini fark ettiniz? İşte bu, sığ kopyalama (shallow copy) denen can sıkıcı durum. `Object.assign()` veya spread operator (`...`) bu iş için yetersiz kalabiliyor. `structuredClone()` ise bize gerçek, derinlemesine bir kopya (deep copy) sunuyor.
Neden `structuredClone()` Kullanmalıyız?
- Gerçek Derin Kopya: İç içe geçmiş nesneler, diziler, Map'ler, Set'ler... Hepsi bağımsız bir şekilde kopyalanır. Orijinal veriyi değiştirmek, kopyayı etkilemez.
- Kolay Kullanım: Tek bir fonksiyon çağrısı! Karmaşık recursive fonksiyonlar yazmanıza veya `JSON.parse(JSON.stringify())` hack'ine başvurmanıza gerek kalmaz.
- Daha Geniş Destek: `JSON.stringify` yöntemi, fonksiyonları, `undefined` değerleri, `Map/Set` yapılarını veya döngüsel referansları (circular references) kopyalayamaz. `structuredClone()` birçok built-in tipi destekler.
Nasıl Kullanılır? Basit Örnekler
İşte temel kullanımı:
Kod:
const orijinalObje = {
ad: "Ahmet",
yas: 30,
adres: {
sehir: "İstanbul",
semt: "Kadıköy"
},
hobiler: ["kod yazmak", "kahve", "bisiklet"]
};
// Derin kopya oluşturma
const kopyaObje = structuredClone(orijinalObje);
// Kopyayı değiştirelim
kopyaObje.ad = "Mehmet";
kopyaObje.adres.sehir = "Ankara";
kopyaObje.hobiler.push("yürüyüş");
console.log(orijinalObje.ad); // "Ahmet" - Değişmedi!
console.log(orijinalObje.adres.sehir); // "İstanbul" - Değişmedi!
console.log(orijinalObje.hobiler); // ["kod yazmak", "kahve", "bisiklet"] - Değişmedi!Gördüğünüz gibi, kopya üzerinde yaptığımız tüm değişiklikler orijinal veriyi etkilemedi.
Neleri Kopyalayabilir? (Clonable Types)
`structuredClone()` aşağıdaki tipleri destekler:
- Primitive değerler (String, Number, Boolean, vs.)
- Array, Object
- Date, RegExp, Blob, File, ImageData
- Map, Set
- ArrayBuffer ve TypedArray'ler
- Hatta döngüsel referansları (circular references) bile!
Dikkat Edilmesi Gerekenler ve Sınırlamalar
Her şey mükemmel değil elbette. Bazı noktalara dikkat etmek gerek:
- Fonksiyonlar Kopyalanmaz: Bir nesnenin içindeki fonksiyonlar (methodlar) kopyalanmaz. `DOMException` alırsınız.
- Prototip Zinciri Korunmaz: Kopyalanan nesne, orijinalinin prototipinden (constructor) miras almaz, sadece düz bir `Object` olur.
- Özel (Custom) Sınıf Örnekleri: Kendi yazdığınız `class`'lardan oluşturulan nesneler, sadece veri alanları kopyalanarak düz nesneye dönüştürülür. Methodlar ve prototip bilgisi taşınmaz.
[COLOR=rgb(97, 189, 109)`JSON.stringify()` ile Karşılaştırma[/COLOR]
Eski yöntemle (`JSON.parse(JSON.stringify())`) arasındaki en büyük farklar:
- `structuredClone()` Date objesini doğru bir şekilde kopyalar (string'e çevirmez).
- `structuredClone()` Map ve Set gibi yapıları kopyalayabilir.
- `structuredClone()` döngüsel referansları yönetebilir. `JSON.stringify` bunu yapamaz ve hata verir.
- `JSON.stringify` fonksiyonları ve `undefined` değerleri atlar/siler. `structuredClone` fonksiyonlarla çalışmaz (hata verir).
Tarayıcı Desteği ve Polyfill
`structuredClone()` modern tarayıcılarda (Chrome, Firefox, Safari, Edge) ve Node.js 17+ sürümlerinde destekleniyor.
Eski projeleriniz için, `core-js` gibi kütüphanelerin polyfill'ini kullanabilir veya ihtiyacınıza göre `JSON.stringify` hack'ine devam edebilirsiniz.**Sonuç Olarak:**
Karmaşık, iç içe geçmiş JavaScript nesneleriniz varsa ve bunları gerçekten bağımsız bir şekilde kopyalamanız gerekiyorsa, `structuredClone()` artık ilk tercihiniz olmalı. Kodunuzu daha temiz, daha anlaşılır ve daha güvenli hale getiriyor. Bir sonraki state yönetimi veya veri manipülasyonu ihtiyacınızda, bu küçük sihirbazı aklınızın bir köşesinde bulundurun!
Umarım faydalı olmuştur. Sorularınız olursa yorumlarda bekliyorum. İyi kodlamalar!