Varsayılan değerler
- JavaScript kursu
- İleri seviye
- Ders 26/100
- 5 dk
Destructuring'de eksik özellikler için varsayılan değer vermeyi öğrenirsin.
Varsayılan değerler
Bazen bir özellik yoktur ve değişkenin undefined olmamasını istersin. Destructuring'de eşittirden sonra bir varsayılan değer yazarsın: const { theme = "light" } = settings.
Eğer settings.theme özelliği varsa değer onu alır. Yoksa veya undefined ise değişken "light" olur. Bu, fonksiyon parametrelerindeki varsayılan değer mantığıyla aynıdır.
undefined ile null farkı
Varsayılan değer yalnızca undefined için devreye girer. Özellik null ise varsayılan kullanılmaz; değişken null kalır. Bu ayrım önemli: null bilinçli bir "boş değer", undefined ise "değer yok" demektir.
Yani const { count = 5 } = { count: null } sonucu null'dır, 5 değil. Bunu test ederken unutma.
Uygulama Ayarları güvenli çıkar
settings adında bir nesne oluştur; retries özelliği olsun ama theme özelliği olmasın. Destructuring ile theme'i çıkar; yoksa varsayılan "light" olsun. Ayrıca retries'i de çıkar; yoksa varsayılan 3 olsun. Sonra her ikisini console.log ile ayrı ayrı yazdır.
Başlangıç kodu
// settings nesnesini tanımla (retries olsun, theme olmasın)
// destructuring ile theme (varsayılan "light") ve retries (varsayılan 3) çıkar
// her ikisini console.log ile yazdırÖrnek çözüm
const settings = { retries: 5 };
const { theme = "light", retries = 3 } = settings;
console.log(theme);
console.log(retries);Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 `const { x = 5 } = { x: undefined }` sonucunda `x` nedir?
- undefined
- null
- 5 Doğru cevap
- hata fırlatır
Açıklama: `undefined` değeri varsayılanı tetikler, bu yüzden `x` 5 olur.
2 Varsayılan değeri tamamla
const config = { };
const { timeout = ____ } = config;
console.log(timeout);const config = { };
const { timeout = 3000 } = config;
console.log(timeout);Açıklama: Eşittirden sonra varsayılan değer yazılır.
3 Hangisi `theme` özelliğine varsayılan `"dark"` atar?
- `const { theme } = settings || "dark"`
- `const { theme: "dark" } = settings`
- `const [ theme = "dark" ] = settings`
- `const { theme = "dark" } = settings` Doğru cevap
Açıklama: Eşittir ile varsayılan değer nesne deseninde verilir.
4 Kavramları eşleştir
| Kavram | Anlamı |
|---|---|
varsayılan değer |
Yalnızca undefined için devreye girer |
null |
Varsayılanı tetiklemez |
eşittir işareti |
Varsayılanı atar |