Computed property
- Node.js kursu
- Başlangıç
- Ders 67/116
- 5 dk
[key] ile hesaplanan özellik adlarını öğrenirsin.
Computed property
Bazen nesnenin bir özelliğinin adını bir değişkenden veya hesaplanan bir ifadeden almak istersin. Buna hesaplanan özellik (computed property) denir. Nesne literalı içinde köşeli parantez kullanılarak yazılır.
Sözdizimi: { [ifade]: deger }. Köşeli parantez içindeki ifade değerlendirilir ve sonuçu özellik adı olur. Örnek: const key = 'name'; const obj = { [key]: 'Ayşe' };. Burada key değişkeni 'name' değerini verir; nesne { name: 'Ayşe' } olur.
Bu özellik özellik olay adları, ID'lerden alan adları veya kullanıcı girdisinden gelen anahtarlar üretirken işe yarar. Sabit ad yazmak yerine dinamik ad oluşturabilirsin.
Dinamik ad oluşturma
Computed property'nin gücü, adın yalnızca değişken değil, herhangi bir ifade olabilmesinden gelir. Örneğin ['event_' + type] gibi bir ifade, olay türünü adın sonuna ekler. Bu, olay dinleyicilerinde ve durum yönetiminde yaygın bir desendir.
Örnek: const type = 'click'; const handler = { ['on_' + type]: function () {} };. Burada özellik adı on_click olur. Bunu sabit yazmak yerine, type değişkeniyle üretirsin.
Computed property sözdizimi yalnızca nesne literalında çalışır. Sonradan özellik eklemek için obj[yeniAd] = deger yazımını kullanabilirsin; bu da aynı dinamik davranışı verir.
Uygulama Olay adından nesne üret
type değişkeni 'submit' değerini tutsun. Computed property kullanarak ['on_' + type] adında bir özelliği true değerine sahip bir flag nesnesi tanımla. Sonra bu özelliğin değerini console.log ile yazdır.
Başlangıç kodu
const type = 'submit';
// flag nesnesini computed property ile tanımla ve değeri yazdırÖrnek çözüm
const type = 'submit';
const flag = { ['on_' + type]: true };
console.log(flag['on_' + type]);Beklenen çıktı
true
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Computed property parçalarını eşle
| Kavram | Anlamı |
|---|---|
[key] |
Hesaplanan ad |
key |
Adı taşıyan değişken |
value |
Özelliğin değeri |
{ } |
Nesne literalı |
2 Hangisi computed property?
- { 'key': value }
- { key: value }
- { [key]: value } Doğru cevap
- { key = value }
Açıklama: köşeli parantez içindeki ifade hesaplanır.
3 Olay adından nesne
const type = 'click';
const handler = { ['on_' + ____]: () => {}};const type = 'click';
const handler = { ['on_' + type]: () => {}};Açıklama: 'on_' + type ifadesi 'on_click' adını üretir.