Computed Properties

Dua chapter terakhir menuliskan nama key secara langsung di dalam literal — nama, harga, stok. Asumsinya: kita sudah tahu nama key-nya sejak menulis kode. Nyatanya banyak situasi menuntut sebaliknya. Daftar menu dibangun dari jumlah data, kunci konfigurasi dirakit dari input pengguna, dan rekap perhitungan memakai nama yang muncul dari isi array sendiri.

Untuk kebutuhan itu, object literal menyediakan computed properties: key yang ditulis dalam kurung siku [...], dan isinya dievaluasi sebagai ekspresi sebelum menjadi nama key. Chapter ini membahas sintaksnya, kesalahan umum saat lupa kurung siku, pola membangun object secara bertahap, dan contoh rekap suara yang menghitung frekuensi dari array.

Sintaks Kurung Siku dalam Literal #

Aturannya: di dalam {}, sebuah key ditulis [ekspresi], bukan nama langsung. Engine menghitung nilai ekspresi tersebut, mengubahnya menjadi string, lalu memakai string itu sebagai nama key. Ekspresinya bebas — variabel, penggabungan string, bahkan pemanggilan method:

const kunci = "diskon";
const promo = {
  [kunci]: 10,
  ["kode_" + kunci.toUpperCase()]: "PROMO10"
};
console.log(promo.diskon, promo["kode_DISKON"]);

Output yang Dihasilkan:

10 PROMO10

Properti pertama memakai isi variabel kunci sebagai nama key, sehingga tercipta promo.diskon. Properti kedua merakit nama key dari ekspresi "kode_" + "DISKON". Keduanya bisa dibaca seperti properti biasa setelah terbentuk — computed properties hanya mengatur pembuatan key, bukan cara membacanya.

Satu jenis key hanya bisa masuk lewat pintu ini: Symbol dari chapter bigint dan Symbol. Nilai Symbol tidak mungkin ditulis sebagai nama key polos, sehingga satu-satunya cara mencantumkannya di dalam literal adalah kurung siku:

const rahasia = Symbol("id");
const data = { [rahasia]: 77 };
console.log(data[rahasia]);

Output yang Dihasilkan:

77

Key berupa Symbol sengaja dirancang berbeda dari key string biasa: ia tidak muncul di Object.keys() maupun JSON.stringify, sehingga cocok untuk penanda internal yang tidak ingin terbawa saat data ditampilkan. Kita buktikan sifat ini nanti di chapter Object Methods; untuk saat ini cukup catat bahwa kurung siku adalah pintu wajibnya.

Satu detail mekanisme lagi yang sering terlupa: hasil ekspresi selalu diubah menjadi string sebelum menjadi nama key. Ekspresi numerik pun tidak terkecuali:

const angka = { [1 + 1]: "dua" };
console.log(Object.keys(angka));
console.log(angka["2"], angka[2]);

Output yang Dihasilkan:

[ '2' ]
dua dua

Ekspresi 1 + 1 menghasilkan number 2, tetapi key yang tersimpan adalah string "2" — itulah yang ditampilkan Object.keys. Karena key selalu string (atau Symbol), pembacaan angka["2"] dan angka[2] menunjuk properti yang sama. Perilaku ini persis yang dikenalkan di chapter Properties dan Methods soal key number yang disimpan sebagai string.

Kesalahan Umum: Lupa Kurung Siku #

Perbedaan { kunci: 1 } dengan { [kunci]: 1 } hanya satu pasang tanda siku, tetapi hasilnya berbeda total. Yang menyulitkan: kesalahan ini tidak memunculkan error — program berjalan lancar dengan object yang isinya salah:

const kunci = "warna";
const keliru = { kunci: 1 };   // key jadi "kunci", bukan isi variabel
const benar = { [kunci]: 1 };  // key dievaluasi dari variabel
console.log(Object.keys(keliru), Object.keys(benar));

Output yang Dihasilkan:

[ 'kunci' ] [ 'warna' ]

Tanpa kurung siku, teks di depan titik dua diperlakukan sebagai nama key apa adanya. Ini berjalan senyap tanpa error, jadi biasakan memeriksa Object.keys() bila hasil object terasa tidak sesuai harapan — cara ini memakai static method yang akan kita dalami di chapter Object Methods.

Membangun Object Secara Dinamis #

Computed properties juga bekerja ketika key baru ditambahkan lewat assignment object[ekspresi] = nilai. Kombinasi keduanya memungkinkan kita membangun object dari awal dengan jumlah key yang baru diketahui saat loop berjalan:

const menu = {};
for (let i = 1; i <= 3; i++) {
  menu["pilihan" + i] = "Menu nomor " + i;
}
console.log(menu.pilihan1);
console.log(menu.pilihan3);

Output yang Dihasilkan:

Menu nomor 1
Menu nomor 3

Object menu dimulai kosong, lalu tiga properti dibuat berturut-turut dengan nama hasil ekspresi "pilihan" + i. Jumlah propertinya mengikuti batas loop — ganti batasnya menjadi 10, dan object otomatis memuat sepuluh properti tanpa mengubah satu baris pun di dalam blok.

Pola yang sama menghidupkan penghitung karakter — versi mini dari rekap suara di bagian akhir chapter ini:

const kata = "nanas";
const hitung = {};
for (let i = 0; i < kata.length; i++) {
  const huruf = kata[i];
  hitung[huruf] = (hitung[huruf] || 0) + 1;
}
console.log(hitung);

Output yang Dihasilkan:

{ n: 2, a: 2, s: 1 }

Setiap huruf dibaca lewat index string, lalu dynamic key hitung[huruf] mencatat frekuensinya satu per satu. Perhatikan tampilan akhirnya: console.log(hitung) menampilkan object yang seluruh key-nya dirakit oleh loop saat program berjalan — tidak ada satu pun nama key yang ditulis manual di kode. Inilah pembeda utama computed properties dari penulisan key statis.

Dynamic key juga berguna untuk inisialisasi: menyiapkan object berisi semua kunci yang diketahui, lengkap dengan nilai awalnya:

const kandidat = ["Budi", "Siti", "Dewi"];
const awal = {};
for (let i = 0; i < kandidat.length; i++) {
  awal[kandidat[i]] = 0;
}
console.log(Object.values(awal));

Output yang Dihasilkan:

[ 0, 0, 0 ]

Object awal kini menjamin setiap kandidat punya hitungan — walau belum mendapat satu suara pun. Inisialisasi seperti ini melengkapi pola penghitung di bagian akhir chapter: dengan nilai awal 0 yang sudah tersedia, pola (rekap[nama] || 0) + 1 masih bekerja sama, tetapi pembaca object kini bisa membedakan “kandidat yang diikuti” dari “key yang memang tidak ada”.

Contoh Lengkap: Rekap Suara Jajak Pendapat #

Kasus dynamic key yang paling sering muncul adalah penghitung frekuensi: menghitung berapa kali setiap nilai muncul di dalam array. Nama kandidat tidak kita tentukan di kode — nama itu datang dari isi array suara:

// rekap-suara.js
// Dynamic key: menghitung suara jajak pendapat dengan computed properties.

const suara = ["Siti", "Budi", "Siti", "Siti", "Budi", "Siti"];

const rekap = {
  total: suara.length
};

for (let i = 0; i < suara.length; i++) {
  const nama = suara[i];
  rekap[nama] = (rekap[nama] || 0) + 1;   // key dievaluasi dari isi variabel
}

console.log("Total suara:", rekap.total);
console.log("Budi :", rekap["Budi"]);
console.log("Siti :", rekap["Siti"]);

Output yang Dihasilkan:

Total suara: 6
Budi : 2
Siti : 4

Mari kita telaah apa yang terjadi pada baris-baris kode di atas:

1. Baris 5 (const suara = [...]): array berisi enam suara yang datang “mentah”. Kode tidak tahu siapa saja kandidatnya — itulah kendala yang diselesaikan dynamic key.
2. Baris 7–9 (const rekap = { total: suara.length }): object rekap dimulai dengan satu properti statis total, diisi dari length array. Properti penghitung per kandidat belum ada sama sekali.
3. Baris 11 (for (let i = 0; i < suara.length; i++)): pola baku membaca array dengan index, sama seperti yang dipakai di section Control Flow.
4. Baris 12 (const nama = suara[i]): menyimpan nilai elemen saat itu ke variabel agar baris berikutnya lebih mudah dibaca.
5. Baris 13 (rekap[nama] = (rekap[nama] || 0) + 1): inti chapter ini, dibaca dari kanan. (rekap[nama] || 0) membaca hitungan lama; bila kandidat belum punya properti, hasilnya undefined yang falsy, lalu logical operator || menggantinya dengan 0. Hasilnya ditambah 1, kemudian ditulis kembali ke key yang sama. Baris ini sekaligus membuat properti baru (suara pertama) dan menaikkan properti lama (suara berikutnya).
6. Baris 16–18 (console.log(...)): setelah loop selesai, object rekap memuat total, Budi, dan Siti. Pembacaannya bisa lewat dot (rekap.total) maupun bracket (rekap["Siti"]) karena nama key sudah pasti.

Chapter berikutnya membahas arah yang berlawanan: bukannya menyusun object dari bagian-bagian, kita akan membongkar object ke variabel-variabel dengan satu baris — object destructuring.

// rekap-suara.js
// Dynamic key: menghitung suara jajak pendapat dengan computed properties.

const suara = ["Siti", "Budi", "Siti", "Siti", "Budi", "Siti"];

const rekap = {
  total: suara.length
};

for (let i = 0; i < suara.length; i++) {
  const nama = suara[i];
  rekap[nama] = (rekap[nama] || 0) + 1;   // key dievaluasi dari isi variabel
}

console.log("Total suara:", rekap.total);
console.log("Budi :", rekap["Budi"]);
console.log("Siti :", rekap["Siti"]);