İç içe destructuring

JavaScript kursu · İleri seviye · Ders 28/100

İç içe nesnelerin derin özelliklerini çıkarmayı öğrenirsin.

İç içe destructuring

Bir nesne içindeki nesnenin özelliğini de çıkarabilirsin. Bunun için iç içe desen yazarsın: const { address: { city } } = user. Burada user.address.city değeri city değişkenine gider.

Dışarıdaki address değişkeni oluşmaz; yalnızca içteki city oluşur. Desen, nesnenin yapısıyla birebir eşleşmelidir; yoksa değer undefined olur.

Dizi ve nesne desenini birleştirme

İç içe desenlerde nesne ve dizi desenlerini birleştirebilirsin. const { items: [first] } = order yazdığında order.items bir dizi olarak alınır ve ilk elemanı first'e geçer.

Yine items değişkeni oluşmaz; yalnızca first. Bu desen, API cevaplarında ilk öğeyi hızlıca almak için çok kullanışlıdır. Çok derinleşmekten kaçın; iki seviye genelde yeter.

Uygulama Sipariş detaylarını çıkar

order adında bir nesne oluştur; içinde customer (bir nesne, name özelliği olsun) ve items (bir dizi, en az bir öğe olsun) bulunsun. İç içe destructuring kullanarak customer.name'i name değişkenine ve items'ın ilk öğesini first değişkenine çıkar. Sonra her ikisini console.log ile ayrı ayrı yazdır.

Örnek çözümü göster

const order = {
  customer: { name: "Ayşe" },
  items: ["Kalem", "Defter"]
};
const { customer: { name }, items: [first] } = order;
console.log(name);
console.log(first);

Kendini test et

`const { address: { city } } = user` ne yapar?
- `address` ve `city` adında iki değişken oluşturur
- Yalnızca `city` değişkenini oluşturur
- Yalnızca `address` değişkenini oluşturur
- Hata fırlatır çünkü iç içe olamaz
Cevabı göster

Yalnızca `city` değişkenini oluşturur — Doğru. Dıştaki `address` yalnızca desen için kullanılır, değişken oluşmaz.

İç içe deseni tamamla

const account = { profile: { name: "Ayşe" } };
const { profile: { ____ } } = account;
console.log(name);

Cevabı göster

const account = { profile: { name: "Ayşe" } };
const { profile: { name } } = account;
console.log(name);

Hangisi `order.items[0]` değerini `first` değişkenine atar?
- `const { items[0]: first } = order`
- `const [items: first] = order`
- `const { items: first } = order`
- `const { items: [first] } = order`
Cevabı göster

`const { items: [first] } = order` — Doğru. `items` bir dizi olduğu için köşeli parantez deseni uygulanır.
Kavramları eşleştir

iç içe desen

Derin özelliği tek adımda çıkarır
dıştaki ad

Yalnızca desen için kullanılır
uymayan desen

Sonuç undefined olur

İç içe destructuring