Dot Notation vs Bracket Notation: Mana yang Harus Anda Gunakan?
Dalam JavaScript, mengakses properti sebuah objek adalah aktivitas yang akan Anda lakukan ribuan kali. Meskipun terlihat sederhana, memilih antara menggunakan "titik" (.) atau "kurung siku" ([]) bukan hanya soal selera, melainkan soal kebutuhan teknis.
Artikel ini akan mengupas tuntas perbedaan, kelebihan, dan kapan waktu yang tepat untuk menggunakan masing-masing notasi.
1. Dot Notation: Si Standar yang Bersih
Dot Notation adalah cara yang paling banyak digunakan. Ia simpel, mudah dibaca, dan memberikan kesan "bersih" pada kode Anda.
Cara Penggunaan:
Cukup tuliskan nama objek, diikuti titik, lalu nama propertinya.
const user = { name: "Aris", age: 28
}; console.log(user.name); // Output: Aris
Keunggulan:
-
Readability: Kode jauh lebih mudah dibaca sekilas.
-
Kecepatan Ketik: Lebih cepat ditulis karena tidak membutuhkan tanda petik dan kurung.
Keterbatasan:
Dot Notation memiliki aturan penamaan yang ketat. Nama properti harus mengikuti aturan identifier JavaScript:
-
Tidak boleh mengandung spasi.
-
Tidak boleh diawali dengan angka.
-
Tidak boleh mengandung karakter khusus (kecuali
$dan_).
2. Bracket Notation: Si Fleksibel yang Powerfull
Bracket Notation mungkin terlihat sedikit lebih berantakan karena membutuhkan tanda petik, namun ia memiliki kemampuan yang tidak dimiliki oleh Dot Notation.
Cara Penggunaan:
Nama properti diletakkan di dalam kurung siku sebagai sebuah string.
console.log(user["name"]); // Output: Aris
Kapan Anda WAJIB Menggunakan Bracket Notation?
A. Properti dengan Nama "Ilegal"
Jika Anda bekerja dengan data dari luar (seperti API) yang memiliki nama properti dengan spasi atau tanda hubung, Dot Notation akan gagal.
const pesanan = { "nomor-antrian": 15, "nama pelanggan": "Dewi"
}; // console.log(pesanan.nomor-antrian); // ERROR! JavaScript mengira ini pengurangan
console.log(pesanan["nomor-antrian"]); // Sukses: 15
B. Mengakses Properti Secara Dinamis (Variabel)
Inilah kegunaan paling penting. Jika nama properti yang ingin Anda akses bergantung pada variabel atau logika tertentu, Anda harus memakai Bracket Notation.
const smartphone = { brand: "Samsung", price: 12000000
}; const cari = "brand"; console.log(smartphone.cari); // undefined (mencari properti bernama 'cari')
console.log(smartphone[cari]); // "Samsung" (mengambil nilai dari variabel 'cari')
3. Perbandingan Head-to-Head
| Fitur | Dot Notation (.) | Bracket Notation ([]) |
| Sintaks | obj.prop |
obj["prop"] |
| Keterbacaan | Sangat Tinggi | Sedang |
| Nama Properti Ber-spasi | Tidak Bisa | Bisa |
| Nama Properti Ber-angka | Tidak Bisa | Bisa |
| Menggunakan Variabel | Tidak Bisa | Bisa |
4. Kesimpulan: Mana yang Lebih Baik?
Jawabannya adalah: Gunakan Dot Notation secara default.
Hampir semua style guide pemrograman (seperti Airbnb JS Guide) menyarankan penggunaan Dot Notation karena lebih ringkas. Gunakan Bracket Notation hanya sebagai "senjata rahasia" ketika Anda:
-
Berhadapan dengan nama properti yang tidak standar.
-
Perlu mengakses data secara dinamis menggunakan variabel (misalnya di dalam looping).
Tips Pro: Dalam pengembangan aplikasi skala besar, jika Anda merasa harus terlalu sering menggunakan Bracket Notation karena nama properti yang aneh, pertimbangkan untuk merestrukturisasi objek Anda agar lebih ramah terhadap Dot Notation.
