Panduan Associative Array JavaScript Beserta Sintaks
Irhan Hisyam Dwi Nugroho
•
08 August 2025
•
172
Di JavaScript, meskipun nggak ada associative array secara langsung, kita bisa pakai object untuk itu. Warga Bimbingan, object memungkinkan kita menyimpan data dalam format key-value yang mudah diakses.
Yuk, simak cara pakai associative array JavaScript dengan sintaks simpel dan contoh langsung di panduan ini!
Baca juga: Panduan Memilih Bootcamp Full Stack Developer yang Tepat
Apa Itu Associative Array JavaScript?
Associative array di JavaScript merujuk pada penggunaan object untuk menyimpan data dalam format key-value.
Meskipun JavaScript tidak memiliki tipe data “associative array” secara langsung, kita bisa menggunakan object untuk tujuan ini.
Di dalam object, key berfungsi sebagai identifikasi unik, sedangkan value adalah data yang ingin disimpan.
Struktur ini sangat berguna untuk menyimpan informasi yang memiliki label atau nama tertentu, seperti data pengguna atau produk.
Baca juga: Ingin Belajar Front End Development? Cek Roadmapnya di sini!
Panduan Associative Array JavaScript Beserta Sintaks
Sumber: Canva
Warga Bimbingan, meskipun JavaScript nggak punya associative array terpisah, kita bisa simulasikan dengan menggunakan object.
Object di JavaScript menyimpan data dalam format key-value, yang sangat fleksibel. Yuk, kita pelajari lebih lanjut!
1. Membuat Associative Array dengan Object
Di JavaScript, associative array dibuat menggunakan object. Setiap key di object adalah sebuah string yang mengidentifikasi nilai yang ingin disimpan.
Contoh:
const user = { name: "Budi", age: 25, city: "Jakarta" }; console.log(user); |
Output:
{ name: 'Budi', age: 25, city: 'Jakarta' } |
Penjelasan:
Pada contoh di atas, user adalah object yang menyimpan data dengan format key (name, age, city) dan value-nya masing-masing. Kita dapat mengakses data tersebut menggunakan key-nya.
Baca juga: 12 Bahasa Pemrograman Front End Teratas & Terpopuler 2024
2. Mengakses Data dalam Associative Array
Untuk mengakses nilai di dalam associative array, kita bisa menggunakan dot notation atau bracket notation.
Contoh:
console.log(user.name); // Dot notation console.log(user["age"]); // Bracket notation |
Output:
Budi 25 |
Penjelasan:
Dengan menggunakan dot notation, kita bisa mengakses properti seperti user.name, sedangkan dengan bracket notation, kita bisa menggunakan string yang berisi nama properti, seperti user["age"]. Keduanya mengembalikan nilai yang ada pada key tersebut.
3. Menambahkan Data ke Associative Array
Menambahkan data ke dalam associative array sangat mudah. Cukup tentukan key baru dan berikan nilai untuk itu.
Contoh:
user.email = "budi@example.com";
console.log(user);
Output:
{ name: 'Budi', age: 25, city: 'Jakarta', email: 'budi@example.com' }
Penjelasan:
Di sini, kita menambahkan properti baru email ke object user. Cukup dengan menggunakan dot notation dan memberikan nilai untuk properti tersebut.
4. Menghapus Data dalam Associative Array
Untuk menghapus data dalam associative array, kita bisa menggunakan delete.
Contoh:
delete user.city; console.log(user); |
Output:
{ name: 'Budi', age: 25, email: 'budi@example.com' } |
Penjelasan:
Pada contoh di atas, kita menghapus properti city dari object user menggunakan operator delete. Setelah dihapus, properti tersebut tidak akan lagi ada di dalam object.
5. Mencari Data dalam Associative Array
Kadang kita perlu mencari nilai berdasarkan key tertentu. Dengan Object.keys(), kita bisa mendapatkan array berisi semua key, dan menggunakan find() atau includes() untuk pencarian.
Contoh:
const keys = Object.keys(user); console.log(keys); console.log(keys.includes("email")); // Cek apakah key "email" ada |
Output:
[ 'name', 'age', 'email' ] true |
Penjelasan:
Dengan menggunakan Object.keys(), kita bisa mendapatkan semua key dalam object user. Kemudian, kita bisa menggunakan includes() untuk mengecek apakah suatu key ada di dalam array key tersebut.
6. Menampilkan Semua Key dan Value
Terkadang, kita ingin menampilkan semua key dan value dalam associative array. Untuk itu, kita bisa menggunakan Object.entries() yang akan mengembalikan array berisi pasangan key-value.
Contoh:
const entries = Object.entries(user); console.log(entries); |
Output:
[ [ 'name', 'Budi' ], [ 'age', 25 ], [ 'email', 'budi@example.com' ] ] |
Penjelasan:
Dengan Object.entries(), kita mendapatkan array dua dimensi yang berisi pasangan key dan value dari object user. Ini sangat berguna jika kita ingin menampilkan data secara lengkap.
Ingin Jadi Full Stack Web Developer Profesional?
Setelah mempelajari associative array JavaScript dan sintaks dasar lainnya, saatnya kamu melangkah lebih jauh dan menguasai web development secara keseluruhan!
Yuk, ikuti Bootcamp Full Stack Web Development di dibimbing.id! Di sini, kamu akan mempelajari berbagai teknologi web, mulai dari HTML, CSS, JavaScript, hingga framework seperti React dan Node.js. Pelajari cara membuat aplikasi web profesional langsung dari mentor berpengalaman.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia web development semakin terbuka lebar!
Jadi, tunggu apa lagi? Daftar sekarang disini dan mulai perjalananmu menjadi Full Stack Developer yang siap bersaing di dunia profesional. #BimbingSampeJadi
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
