Yüzeysel ve Derin Dondurma
Dondurma işleminin ne kadar ilerlediğini anlayın.
Yüzeysel ve Derin Dondurma, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. 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.
Freeze Sığ Çalışır
Object.freeze, bir nesnenin yalnızca üst düzeyini kilitler. Başvurduğu iç içe nesne veya dizi tamamen değiştirilebilir kalır.
Bu durum birçok geliştiriciyi şaşırtır ve incelikli hatalara yol açar.
Sığ Sınırı Kanıtlama
İç içe bir nesne içeren bir nesneyi dondurun. Üst düzey kilitlenir, ancak iç içe nesne yine de değiştirilebilir.
const user = Object.freeze({
name: 'Ada',
address: { city: 'London' }
});
user.name = 'Grace';
user.address.city = 'Paris';
console.log(user.name);
console.log(user.address.city);İç İçe Diziler de Etkilenir
Dondurulmuş bir nesnenin içindeki diziler de korunmaz. Bu dizilere push ve pop uygulayabilir, öğelerini yeniden atayabilirsiniz.
const state = Object.freeze({ tags: ['a', 'b'] });
state.tags.push('c');
state.tags[0] = 'X';
console.log(state.tags);isFrozen Bunu Doğrular
İç içe nesne, isFrozen sonucunu false olarak bildirir; bu da dondurma işleminin iç kısma ulaşmadığını doğrular.
const obj = Object.freeze({ inner: { v: 1 } });
console.log(Object.isFrozen(obj));
console.log(Object.isFrozen(obj.inner));deepFreeze Yazma
Her şeyi kilitlemek için özyineleme kullanın: nesneyi dondurun, ardından iç içe her nesne özelliğini dondurun. Buna derin dondurma denir.
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const value = obj[key];
if (value && typeof value === 'object') {
deepFreeze(value);
}
}
return Object.freeze(obj);
}
const data = deepFreeze({ a: { b: { c: 1 } } });
data.a.b.c = 999;
console.log(data.a.b.c);Dizilerde deepFreeze
Diziler de nesne olduğundan aynı özyineleme onları da dondurur. Böylece push işlemleri ve öğe yazma işlemleri her derinlikte engellenir.
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const value = obj[key];
if (value && typeof value === 'object') deepFreeze(value);
}
return Object.freeze(obj);
}
const state = deepFreeze({ list: [1, 2, 3] });
state.list.push(4);
state.list[0] = 99;
console.log(state.list);Derin Dondurmayı Doğrulama
Derin dondurma sonrasında her iç içe nesne, isFrozen sonucunu true olarak bildirir.
function deepFreeze(obj) {
for (const key of Object.keys(obj)) {
const v = obj[key];
if (v && typeof v === 'object') deepFreeze(v);
}
return Object.freeze(obj);
}
const o = deepFreeze({ a: { b: 1 } });
console.log(Object.isFrozen(o));
console.log(Object.isFrozen(o.a));Döngülere Karşı Koruma
Bir nesne kendisine başvuruyorsa, saf özyineleme sonsuza kadar sürer. Güvenli kalmak için zaten dondurulmuş nesneleri atlayın.
function deepFreeze(obj) {
if (Object.isFrozen(obj)) return obj;
for (const key of Object.keys(obj)) {
const v = obj[key];
if (v && typeof v === 'object') deepFreeze(v);
}
return Object.freeze(obj);
}
const a = { name: 'a' };
a.self = a;
deepFreeze(a);
console.log(Object.isFrozen(a.self));Derin Dondurmanın Maliyeti
Derin dondurma her iç içe değeri ziyaret eder; bu da büyük yapılar için zaman ve bellek maliyeti oluşturur. Yalnızca paylaşılan config veya sabitler gibi gerçekten korunması gerekenleri dondurun.
function deepFreeze(obj) {
if (Object.isFrozen(obj)) return obj;
Object.keys(obj).forEach(k => {
const v = obj[k];
if (v && typeof v === 'object') deepFreeze(v);
});
return Object.freeze(obj);
}
const small = deepFreeze({ a: 1, b: { c: 2 } });
console.log('frozen deeply:', Object.isFrozen(small.b));Sığ Dondurma Ne Zaman Yeterlidir?
Bir nesne yalnızca ilkel değerler içeriyorsa, sığ bir Object.freeze onu tamamen korumaya zaten yeter. Derin dondurma yalnızca iç içe nesneler veya diziler olduğunda önemlidir.
const flat = Object.freeze({ a: 1, b: 'two', c: true });
flat.a = 100;
console.log(flat.a);
console.log(Object.isFrozen(flat));Neden Önemlidir?
Sığ ve derin dondurma arasındaki farkı anlamak, dondurulmuş bir nesnenin tamamen değişmez olduğunu düşünme yanılgısını önler. İç içe veriler için özyineleme kullanın. Değişikliğe alternatif olarak sonraki bölümlerde dondurmak yerine copy oluşturan değişmez güncelleme kalıpları ele alınır.
const config = Object.freeze({ db: { host: 'local' } });
config.db.host = 'changed';
console.log('shallow freeze leaked:', config.db.host);Kısa Kontrol
Object.freeze({ a: { b: 1 } }) sonrasında iç içe b'yi değiştirebilir misiniz?
Özet: Sığ ve Derin Dondurma
Dondurmanın derinlik sınırını öğrendiniz:
Object.freezesığ çalışır; iç içe nesneler ve diziler değiştirilebilir kalır.- deepFreeze, her düzeyi kilitlemek için özyineleme kullanır.
- Zaten dondurulmuş nesneleri atlayarak döngülere karşı koruma sağlayın.
- Derin dondurmanın bir maliyeti vardır; bu nedenle yalnızca korunması gerekenleri dondurun.
Sıkça Sorulan Sorular
“Yüzeysel ve Derin Dondurma” dersi ücretsiz mi?
Evet — “Yüzeysel ve Derin Dondurma” 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.
“Yüzeysel ve Derin Dondurma” dersinde ne öğreneceğim?
Dondurma işleminin ne kadar ilerlediğini anlayın. 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 2. dersidir.
“Yüzeysel ve Derin Dondurma” 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
- Object.freeze ve seal
- Yüzeysel ve Derin Dondurma
- Değişmez Güncelleme Desenleri
- Derin Kopyalar için structuredClone