JavaScript Academy · Ders

Değişmez Güncelleme Desenleri

Yeni kopyalar oluşturarak verileri güncelleyin.

Değişmez Güncelleme Desenleri, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Değiştirmeden Güncelleme

Değişmez güncellemeler, değişikliği uygulayan yeni bir copy oluşturur ve original nesneyi olduğu gibi bırakır. Bu, modern JavaScript'te öngörülebilir durum yönetiminin temelidir.

Yayma operatörü ... bunun başlıca aracıdır.

Yaymayla Nesne Kopyalama

Bir nesneyi yeni bir nesneye yaydıktan sonra bir özelliği geçersiz kılın. Original nesne eski değerini korur.

const user = { name: 'Ada', age: 36 };
const older = { ...user, age: 37 };

console.log(user.age);
console.log(older.age);

Bunlar Farklı Nesnelerdir

copy, aynı başvuru olmayan yepyeni bir nesnedir. Kimlik karşılaştırması bunu doğrular.

const original = { x: 1 };
const copy = { ...original };

console.log(original === copy);
console.log(original.x === copy.x);

Bir Özelliği Değişmez Biçimde Ekleme

Bir alan eklemek için eski nesneyi yayın ve yeni key'i ekleyin. Original nesneye hiçbir şey eklenmez.

const point = { x: 1, y: 2 };
const point3d = { ...point, z: 3 };

console.log(point);
console.log(point3d);

Bir Özelliği Değişmez Biçimde Kaldırma

İstenmeyen key'i çıkarmak ve kalanını almak için yapısal atama kullanın. Kalan nesne bu key'i içermez.

const user = { id: 1, name: 'Ada', secret: 'x' };
const { secret, ...safe } = user;

console.log(safe);
console.log(user.secret);

Dizileri Yaymayla Kopyalama

Bir diziyi kopyalamak için yayın. map ve filter gibi yöntemler de yeni diziler döndürür; kaynak diziyi hiçbir zaman değiştirmez.

const nums = [1, 2, 3];
const copy = [...nums];
const doubled = nums.map(n => n * 2);

console.log(nums);
console.log(doubled);

Diziye Değişmez Biçimde Ekleme

Değişiklik yapan push yerine yayma kullanarak yeni bir dizi oluşturun. Original dizinin uzunluğu aynı kalır.

const list = ['a', 'b'];
const added = [...list, 'c'];
const prepended = ['z', ...list];

console.log(list);
console.log(added);
console.log(prepended);

Diziden Değişmez Biçimde Kaldırma

İstenmeyen öğe olmadan yeni bir dizi oluşturmak için filter kullanın; original dizi olduğu gibi kalır.

const nums = [1, 2, 3, 4];
const withoutThree = nums.filter(n => n !== 3);

console.log(nums);
console.log(withoutThree);

İç İçe Nesneleri Güncelleme

İç içe güncellemelerde, değiştirdiğiniz her düzeyde yayma kullanmanız gerekir. Yalnızca dokunulan dal yeniden oluşturulur; geri kalanı başvuru yoluyla paylaşılır.

const state = { user: { name: 'Ada', age: 36 }, theme: 'dark' };
const updated = {
  ...state,
  user: { ...state.user, age: 37 }
};

console.log(state.user.age);
console.log(updated.user.age);
console.log(state.theme === updated.theme);

Dizideki Bir Öğeyi Güncelleme

Eşleşen öğe için değiştirilmiş bir copy, geri kalan öğeler için ise original öğeyi döndürmek üzere map kullanın. Hiçbir öğe değiştirilmez.

const todos = [
  { id: 1, done: false },
  { id: 2, done: false }
];
const updated = todos.map(t =>
  t.id === 2 ? { ...t, done: true } : t
);

console.log(todos[1].done);
console.log(updated[1].done);

Değişmez Güncellemeler Neden Önemlidir?

Paylaşılan durumu hiçbir zaman değiştirmemek, değişiklik algılamayı ucuz hâle getirir (başvuruları karşılaştırabilirsiniz), geri alma/yinelemeyi mümkün kılar ve beklenmedik yan etki hatalarını önler. Kalıp şudur: copy oluşturun, ardından copy üzerinde değişiklik yapın. Derin kopyalar için sonraki bölümde structuredClone ele alınır.

function setName(state, name) {
  return { ...state, name };
}
const s1 = { name: 'old', count: 0 };
const s2 = setName(s1, 'new');
console.log(s1.name, s2.name);

Kısa Kontrol

user zaten bir age'e sahipse { ...user, age: 37 } ne üretir?

Özet: Değişmez Güncelleme Kalıpları

Değiştirmeden güncelleme yapmayı öğrendiniz:

Kopyalayıp geçersiz kılmak için { ...obj, key: value } yaymasını kullanın.
Bir özelliği değişmez biçimde kaldırmak için kalan kısmı yapısal atamayla ayırın.
push/splice yerine map, filter ve dizi yaymasını kullanın.
İç içe güncellemelerde her düzeyde yayma kullanın; geri kalanını başvuru yoluyla paylaşın.

Sıkça Sorulan Sorular

“Değişmez Güncelleme Desenleri” dersi ücretsiz mi?

Evet — “Değişmez Güncelleme Desenleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Değişmez Güncelleme Desenleri” dersinde ne öğreneceğim?

Yeni kopyalar oluşturarak verileri güncelleyin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Değişmez Güncelleme Desenleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön