Computed property

[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.

Örnek çözümü göster

const type = 'submit';
const flag = { ['on_' + type]: true };
console.log(flag['on_' + type]);

Kendini test et

Computed property parçalarını eşle

[key]

Hesaplanan ad
key

Adı taşıyan değişken
value

Özelliğin değeri
{ }

Nesne literalı
Hangisi computed property?
- { 'key': value }
- { key: value }
- { [key]: value }
- { key = value }
Cevabı göster

{ [key]: value } — köşeli parantez içindeki ifade hesaplanır.

Olay adından nesne

const type = 'click';
const handler = { ['on_' + ____]: () => {}};

Cevabı göster

const type = 'click';
const handler = { ['on_' + type]: () => {}};

Sıradaki ders: Object methods

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler