Özet - Destructuring

JavaScript kursu · İleri seviye · Ders 29/100

Destructuring kullanarak bir API cevabını ayrıştıran bir fonksiyon yazarsın.

Özet - Destructuring

Bu grupta destructuring'in beş temelini öğrendin: nesne ve dizi desenleri, varsayılan değerler, yeniden adlandırma ve iç içe desen. Hepsini API cevaplarını ayrıştırmak için birleştireceğiz.

İki görev var: önce bir API cevabından kullanıcı listesini ve toplam sayıyı çıkaracaksın; sonra bir fonksiyon yazıp parametre olarak gelen cevabı destructuring ile ayrıştıracaksın. Varsayılan değerler ve iç içe desen burada işine yarayacak.

Uygulama API cevabını ayrıştır

response adında bir nesne oluştur. İçinde data (bir nesne, users adında bir dizi tutsun) ve meta (bir nesne, total özelliği tutsun) bulunsun. Destructuring ile users'ı userList adına taşı ve total'ı çıkar. Sonra userList ve total'ı console.log ile ayrı ayrı yazdır.

Örnek çözümü göster

const response = {
  data: { users: ["Ayşe", "Mehmet"] },
  meta: { total: 2 }
};
const { data: { users: userList }, meta: { total } } = response;
console.log(userList);
console.log(total);

Uygulama API cevap ayrıştırıcı yaz

parseApiResponse(response) adında bir fonksiyon yaz. Parametre olarak bir API cevabı nesnesi alır. Fonksiyon gövdesinde destructuring ile status özelliğini çıkar; yoksa varsayılan "ok" olsun. Ayrıca data özelliği içindeki items dizisini çıkar. items'ın ilk öğesini döndür.

Örnek çözümü göster

function parseApiResponse(response) {
  const { status = "ok", data: { items } } = response;
  return items[0];
}

Kendini test et

Tüm kavramları eşleştir

nesne deseni

Süslü parantez, isme göre alır
dizi deseni

Köşeli parantez, sırayla alır
varsayılan

undefined için yedek değer
yeniden adlandırma

İki nokta ile başka ad
iç içe desen

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

API cevabından kullanıcıları çıkar

const apiResponse = { data: { users: ["Ayşe"] } };
const { data: { users } } = ____;
console.log(users);

Cevabı göster

const apiResponse = { data: { users: ["Ayşe"] } };
const { data: { users } } = apiResponse;
console.log(users);

Özet - Destructuring