Cara Mengambil Property Object Berdasarkan Key Dinamis Javascript saat Nama Key dari Variabel

Ditulis oleh JavaScript

Cara mengambil property object berdasarkan key dinamis JavaScript adalah memakai bracket notation: obj[key]. Variabel key berisi string nama property yang berasal dari input form, pilihan dropdown, atau respons API. Pola ini berlaku di browser maupun Node.js karena murni sintaks object JavaScript.

Tipe Data dan Aturan Key Dinamis di JavaScript

Object menyimpan pasangan key string dan value. Ketika nama key baru diketahui saat program berjalan, JavaScript tidak bisa menebaknya lewat dot notation.

  • Gunakan obj[key] bila nama property tersimpan di variabel, parameter fungsi, atau hasil API.
  • Tetap pakai obj.nama hanya untuk key statis yang sudah pasti penulisannya.
  • Key angka seperti data[1] otomatis diperlakukan sebagai string oleh engine.
  • Key berisi spasi atau strip, misalnya “nama lengkap” atau “kode-pos”, hanya bisa diakses lewat bracket.

Langkah Mengambil Property dengan Key Dinamis

Ikuti urutan ini agar kode aman dari undefined yang tidak terduga:

  1. Siapkan object dan variabel key bertipe string.
  2. Ambil nilainya dengan obj[key].
  3. Tambahkan nilai default bila key tidak ada.
  4. Periksa keberadaan key dengan in atau hasOwn bila datanya penting.
const user = { nama: "Rina", umur: 24, kota: "Bandung" };
const field = "kota";

const nilai = user[field] ?? "-";
console.log(nilai); // Bandung

if (field in user) {
  console.log(user[field]);
}

Kode di atas memakai ?? supaya hasil kosong berubah menjadi tanda strip. Pemeriksaan in memastikan key memang milik object sebelum dipakai lebih lanjut.

BACA JUGA:

Perbandingan Metode Akses Property Object

Metode Fungsi Catatan
obj[key] Akses key dinamis Paling umum dan fleksibel
obj.key Akses key statis Gagal bila nama key dari variabel
obj?.[key] Akses aman bila object mungkin null Cocok untuk data API belum lengkap
Destructuring dinamis Ekstrak satu field ke variabel Sintaks: const {[key]: v} = obj
Object.entries Loop semua key dan value Baik untuk filter massal

Gunakan obj?.[key] ketika object berasal dari fetch dan strukturnya belum pasti. Hindari eval atau parsing string manual untuk membentuk akses property karena lambat dan berisiko injeksi.

FAQ

Kenapa obj.key tidak bisa untuk key dinamis?

Karena obj.key membaca property bernama harfiah “key”, bukan isi variabel key.

Bagaimana jika key dinamis tidak ada di object?

Hasilnya undefined, jadi gabungkan dengan ?? nilaiDefault atau periksa dulu dengan key in obj.

Apakah obj?.[key] aman untuk nested object?

Ya untuk satu level yang mungkin kosong, sedangkan nested dalam perlu ditulis berantai seperti data.user?.[field].

Artikel Terkait