Object spread

... ile nesne birleştirme ve kopyalama öğrenirsin.

Object spread

Spread operatörü ... bir nesnenin tüm özelliklerini başka bir nesne literalına kopyalar. Bu, nesne birleştirme ve kopyalama için kısa bir yazımdır.

Sözdizimi: { ...kaynak, ek: deger }. Burada kaynak'taki tüm özellikler yeni nesneye kopyalanır, sonra ek özelliği eklenir. Aynı adlı özellik hem kaynakta hem de sonradan verilirse, son yazılan kazanır.

Örnek: const a = { x: 1 }; const b = { ...a, y: 2 };. Burada b nesnesi { x: 1, y: 2 } olur. Orijinal a nesnesi değişmez; spread bir sığ kopya (shallow copy) üretir.

Sığ kopya ve birleştirme

Spread ile yaptığın kopya sığdır: yalnızca en üst düzeydeki özellikler kopyalanır. İç içe nesneler referans olarak kopyalanır; yani içteki nesneyi değiştirirsen her iki nesne de etkilenir.

Örnek: const a = { profile: { name: 'Ayşe' } }; const b = { ...a }; b.profile.name = 'Mara';. Burada a.profile.name de 'Mara' olur çünkü profile her iki nesnede de aynı nesneyi gösterir.

İki nesneyi birleştirmek için spread zinciri kullanabilirsin: { ...a, ...b }. b'nin özellikleri a'dan gelen aynı adlı özellikleri geçersiz kılar. Bu basit birleştirme için yeterlidir.

Uygulama Profil birleştir

base adında { name: 'Ayşe', city: 'İstanbul' } nesnesini tanımla. extra adında { age: 30, city: 'İzmir' } nesnesini tanımla. Spread ile ikisini birleştirip merged nesnesi oluştur (extra içindeki city kazanır). merged.city değerini console.log ile yazdır.

Örnek çözümü göster

const base = { name: 'Ayşe', city: 'İstanbul' };
const extra = { age: 30, city: 'İzmir' };
const merged = { ...base, ...extra };
console.log(merged.city);

Kendini test et

Spread parçalarını eşle

...

Spread operatörü
{ ...a, y: 2 }

Birleştirme
a

Kaynak nesne
y: 2

Sonradan eklenen özellik
Spread ne yapar?
- Özellikleri yeni nesneye kopyalar
- Nesneyi siler
- Metot ekler
- Tür değiştirir
Cevabı göster

Özellikleri yeni nesneye kopyalar — spread özellikleri yeni nesneye kopyalar.

Spread ile override

const base = { age: 30 };
const updated = { ...base, age: ____ };

Cevabı göster

const base = { age: 30 };
const updated = { ...base, age: 31 };

Sıradaki ders: Özet - Nesneler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler