Nesne Destructuring ve Spread
Destructuring ile nesne özelliklerini çıkarın, spread operatörüyle nesneleri kopyalayıp birleştirin ve işlev imzalarında rest parametrelerini kullanın.
Nesne Destructuring ve Spread, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Yapı Sökümü Nedir?
Yapı sökümü, nesnelerden ve dizilerden değerleri çıkararak adlandırılmış değişkenlere atar. Birden çok özellik erişimi ifadesinin kısa biçimidir; kodu daha öz hâle getirir ve hangi özelliklerin kullanıldığını açıkça belirtir.
Nesne Yapı Sökümünün Temelleri
Adlandırılmış özellikleri çıkarmak için atamanın sol tarafında süslü ayraçları kullanın.
const user = { name: 'Alice', age: 30, role: 'admin' };
// Without destructuring:
const name = user.name;
const age = user.age;
// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age); // 30Yapı Sökümüyle Değişkenleri Yeniden Adlandırma
Yapı sökümü sırasında bir özelliği yeniden adlandırmak için property: newName söz dizimini kullanın. Özellik adı mevcut bir değişkenle çakıştığında veya yeterince açıklayıcı olmadığında kullanışlıdır.
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'Yapı Sökümünde Varsayılan Değerler
Bir özellik undefined ise varsayılan bir değer kullanılır. Yeniden adlandırmayla birlikte kullanabilirsiniz.
const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)İç İçe Nesne Yapı Sökümü
İç içe kalıplar sağlayarak iç içe nesnelerin yapı sökümünü yapın.
const order = {
id: 42,
customer: { name: 'Bob', email: 'bob@example.com' },
total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'Dizi Yapı Sökümü
Dizilerin yapı sökümünü konumlarına göre yapmak için köşeli ayraçları kullanın. Öğeleri virgüllerle atlayın.
const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first); // 10
console.log(second); // 20
console.log(fourth); // 40
// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1İşlev Parametrelerinde Yapı Sökümü
Daha temiz arayüzler ve kendi kendini açıklayan kod için yapı sökümünü doğrudan işlev parametrelerinde yapın. React bileşen işlevlerinde çok yaygındır.
function greet({ name, greeting = 'Hello' }) {
return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' }); // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'Nesnelerde Yayma Operatörü
Yayma operatörü { ...obj }, bir nesnenin sığ kopyasını oluşturur ve nesneleri birleştirebilir. Anahtarlar çakıştığında daha sonra gelen anahtarlar önce gelenlerin üzerine yazılır.
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }Dizilerde Yayma Operatörü
[...arr], bir dizinin sığ kopyasını oluşturur. Dizileri birleştirmek ve öğeleri değişmez biçimde başa veya sona eklemek için yaymayı kullanın.
const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base]; // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]Yapı Sökümünde Kalan Söz Dizimi
Kalan söz dizimi, geriye kalan özellikleri veya öğeleri yeni bir nesne ya da dizi içinde toplar. Kalan kalıp son sırada olmalıdır.
const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]Sığ ve Derin Kopya
Hem yayma hem de yapı sökümü sığ kopyalar oluşturur. İç içe nesneler ve diziler hâlâ paylaşılan başvurulardır. structuredClone(obj) (modern) veya JSON.parse(JSON.stringify(obj)) (eski) ile derin kopya oluşturun.
const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99; // a.x is still 1 (shallow copy OK)
b.nested.y = 99; // a.nested.y is now 99! (reference shared)Hızlı Kontrol
const { a, ...rest } = obj ne yapar?
Özet: Yapı Sökümü ve Yayma
Nesne yapı sökümü adlandırılmış özellikleri çıkarır. Dizi yapı sökümü konuma göre çıkarır. İki nokta üst üste ile yeniden adlandırın, = ile varsayılan değer belirleyin. Derin nesneler için iç içe kalıplar kullanın. Yayma, sığ kopyalar oluşturur ve nesneleri/dizileri birleştirir. Kalan söz dizimi geriye kalan özellikleri/öğeleri toplar.
Sıkça Sorulan Sorular
“Nesne Destructuring ve Spread” dersi ücretsiz mi?
Evet — “Nesne Destructuring ve Spread” 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 Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Nesne Destructuring ve Spread” dersinde ne öğreneceğim?
Destructuring ile nesne özelliklerini çıkarın, spread operatörüyle nesneleri kopyalayıp birleştirin ve işlev imzalarında rest parametrelerini kullanın. Frontend 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.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend 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.
“Nesne Destructuring ve Spread” 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 Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend 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
- Dizi Metotları: map filter reduce find
- Nesne Destructuring ve Spread
- Şablon Dizeleri ve İsteğe Bağlı Zincirleme
- Modüller: import ve export