Destructuring
Destructuring, bir object içindeki property'leri veya bir array içindeki öğeleri bir kalıpla değişkenlere atayan JavaScript söz dizimidir. Kaynak değişmez. Şu siparişi kullanacağız:
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
Temel object destructuring
{} içindeki adlar, sağdaki değerden aynı adlı property'leri seçer ve iki yeni sabit oluşturur.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest, drink } = order;
console.log(guest);
console.log(drink);
Önce lida, sonra tea yazdırılır. Bu, order.guest ile order.drink okumalarının kısa biçimidir; order içinden hiçbir şey silinmez.
Yeniden adlandırma ve varsayılan değer
property: variable kalıbı değişken için farklı bir ad seçer. = sonrasındaki değer yalnızca property undefined olduğunda kullanılır.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { guest: customer, size = "regular" } = order;
console.log(customer);
console.log(size);
customer, lida değerini alır. size bulunmadığı için regular kullanılır. Bu kalıp guest adlı bir değişken oluşturmaz.
İç içe property okuma
İç içe kalıp object yapısını izler. İçteki { city }, order.address içinden city değerini okur.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const { address: { city } } = order;
console.log(city);
Çıktı rasht olur; address adlı değişken oluşmaz. address yoksa veya undefined ise city okumak hata verebilir. Optional chaining bu kalıbın içine yazılamaz; önce değeri denetleyin ya da uygun hâle getirin.
Array destructuring
Köşeli parantezler [] öğeleri konumlarına göre eşler. İlk değişken index 0, ikinci değişken index 1 değerini alır.
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
const [firstExtra, secondExtra] = order.extras;
console.log(firstExtra);
console.log(secondExtra);
Çıktı mint, ardından lemon olur. Adları siz seçersiniz, değeri konum belirler. order.extras iki öğeyi de korur.
Fonksiyon parametresinde destructuring
Bir fonksiyon aldığı object içinden gereken property'leri doğrudan parametre listesinde çıkarabilir. Bu fonksiyon yalnızca guest ve drink kullanır.
function label({ guest, drink }) {
return guest + " ordered " + drink;
}
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
console.log(label(order));
Çağrı lida ordered tea döndürür. Parametre kalıbı çağrı sırasında uygulanır; fonksiyon önlem almamışsa null veya undefined hata oluşturur.
Tam sayfa örneği
Sayfa object, array ve parametre destructuring biçimlerini birleştirerek sipariş özetini gösterir.
<!doctype html>
<html lang="tr">
<head><meta charset="utf-8"><title>JavaScript Destructuring</title></head>
<body>
<p id="result"></p>
<script>
const order = { guest: "lida", drink: "tea", extras: ["mint", "lemon"], address: { city: "rasht" } };
function summary({ guest, drink, extras }) {
const [firstExtra] = extras;
return guest + " / " + drink + " / " + firstExtra;
}
document.getElementById("result").textContent = summary(order);
</script>
</body>
</html>
Görünür çıktı tam olarak lida / tea / mint olur. Fonksiyon yalnızca gerekli verileri okur ve order değerini değiştirmez.
include_try
drink property’sini beverage adıyla alın ve eksik table için varsayılan değer ekleyin. Ardından address içermeyen bir siparişi iç içe kalıptan önce denetleyin.
mistakes
Property adıyla yeni değişken adını karıştırmayın. Varsayılan değer null yerine geçmez ve iç içe object her zaman bulunmayabilir. {} property'leri, [] array konumlarını eşler; kaynak değişmez. Rest ve spread sonraki spread-rest dersindedir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek