Array dan Objek JavaScript: Menyimpan Kumpulan Data

Satu variabel cuma bisa menampung satu nilai — satu nama, satu harga, satu skor. Padahal program beneran tiap saat berurusan dengan kumpulan data: daftar produk, detail seorang pengguna, barang-barang di dalam keranjang belanja. Untuk hal-hal seperti itu, variabel biasa jelas nggak cukup. Makanya JavaScript menyediakan dua struktur untuk mengelompokkan banyak nilai sekaligus: array untuk daftar yang terurut, dan objek untuk kelompok yang berlabel. Dua hal ini muncul di mana-mana saat kamu menulis kode betulan, jadi begitu kamu terbiasa dengannya, kemampuanmu naik satu tingkat.

Sebelumnya kita sempat menyinggung keduanya secara singkat di artikel tipe data. Sekarang saatnya kita pakai sungguhan.

Array: daftar terurut

Array adalah daftar nilai yang punya urutan. Cara menulisnya pakai kurung siku [ ], dan tiap isinya dipisahkan dengan tanda koma:

const buah = ["apel", "pisang", "ceri"];
const angka = [10, 20, 30, 40];

Array bisa menampung tipe nilai apa saja, dan jumlahnya pun bebas. Yang jadi ciri utamanya: isinya punya urutan yang jelas — ada yang pertama, ada yang kedua, dan begitu seterusnya.

Mengakses item berdasarkan index

Untuk mengambil satu item dari array, kamu pakai posisinya, yang istilahnya disebut index. Nah, di sinilah banyak pemula kaget: index itu mulai dari 0, bukan dari 1. Jadi item pertama ada di index 0, item kedua di index 1, begitu seterusnya:

const buah = ["apel", "pisang", "ceri"];

console.log(buah[0]);   // "apel"   (item pertama)
console.log(buah[1]);   // "pisang" (item kedua)
console.log(buah[2]);   // "ceri"   (item ketiga)

Property dan method array yang berguna

Array sudah dibekali sejumlah alat bawaan. Yang paling sederhana adalah .length, yang memberitahu berapa banyak item di dalamnya:

const buah = ["apel", "pisang", "ceri"];
console.log(buah.length);   // 3

Selain itu ada juga method — yaitu fungsi yang menempel pada array — untuk mengubah isinya. Beberapa di antaranya bakal sering banget kamu pakai:

buah.push("jeruk");    // tambah ke AKHIR → ["apel","pisang","ceri","jeruk"]
buah.pop();            // hapus item TERAKHIR
buah.unshift("mangga"); // tambah ke AWAL
buah.shift();          // hapus item PERTAMA

push dan pop — yang menambah dan menghapus di bagian akhir — adalah yang paling sering dipakai. Dengan dua method ini saja, kamu sudah bisa menambah dan mengurangi isi daftar selagi programmu berjalan: memasukkan barang ke keranjang, mencoret tugas yang sudah beres, dan semacamnya.

Objek: kelompok nilai berlabel

Array cocok dipakai saat urutan itu penting dan isinya sejenis (misalnya daftar buah). Tapi sering kali yang kamu butuhkan justru mengelompokkan beberapa informasi yang saling berkaitan tapi berbeda jenis tentang satu hal — misalnya nama, umur, dan email dari seorang pengguna. Untuk kebutuhan seperti ini, kamu pakai objek.

Objek ditulis dengan kurung kurawal { }, dan menyimpan nilai dalam bentuk pasangan key-value: setiap nilai punya label (yang disebut key) yang kamu pakai untuk mengaksesnya:

const pengguna = {
  nama: "John Doe",
  umur: 28,
  anggota: true,
};

Di sini pengguna adalah satu objek yang menggambarkan satu orang, lengkap dengan tiga potong data berlabel. Bedanya dengan array, kalau di array kamu mengambil nilai lewat posisi angkanya, di objek kamu mengambilnya lewat nama key:

console.log(pengguna.nama);   // "John Doe"
console.log(pengguna.umur);   // 28

Cara penulisan objek.key ini namanya dot notation, dan inilah cara kamu membaca nilai dari dalam objek. Enaknya, ini terbaca mengalir seperti kalimat biasa: pengguna.nama berarti “nama si pengguna.” Jelas jauh lebih gampang dipahami ketimbang harus mengingat-ingat nilai itu kebetulan ada di posisi angka berapa.

Mengubah dan menambah property

Kamu bisa mengganti nilai yang sudah ada atau menambahkan yang baru, sama-sama pakai dot notation tadi:

pengguna.umur = 29;        // ubah nilai yang sudah ada
pengguna.kota = "Jakarta"; // tambah property yang sama sekali baru

Objek itu fleksibel — kamu bisa menambah isinya kapan pun dibutuhkan. Setiap nilai berlabel yang ada di dalam objek disebut property.

Menggabungkan array dan objek

Di sinilah kombinasi keduanya jadi benar-benar bertenaga, dan di sinilah data yang mirip aslinya mulai terbentuk. Array dan objek bisa saling bersarang dengan bebas, dalam susunan apa pun. Pola yang paling sering muncul di dunia nyata adalah array berisi objek — sebuah daftar yang tiap itemnya berupa catatan berlabel:

const produk = [
  { nama: "Keyboard", harga: 250000 },
  { nama: "Mouse", harga: 120000 },
  { nama: "Monitor", harga: 1500000 },
];

Persis seperti inilah biasanya bentuk data yang datang dari database atau API: sebuah daftar (array) yang berisi catatan-catatan (objek). Untuk mengambil satu nilai tertentu, kamu tinggal menggabungkan dua teknik tadi — pilih itemnya lewat index, lalu ambil property-nya lewat key:

console.log(produk[0].nama);    // "Keyboard"
console.log(produk[1].harga);   // 120000

produk[0] mengambil objek pertama, lalu .nama mengambil property nama dari objek itu. Kalau membaca produk[1].harga sudah terasa nyaman buatmu, kamu sudah bisa menyusuri hampir semua struktur data nyata yang bakal kamu temui nanti.

Contoh realistis

Coba kita susun sesuatu yang mungkin benar-benar akan kamu buat — sebuah keranjang belanja:

const keranjang = {
  pelanggan: "Jane Doe",
  items: [
    { nama: "Keyboard", harga: 250000, jumlah: 1 },
    { nama: "Mouse", harga: 120000, jumlah: 2 },
  ],
  total: 490000,
};

console.log(keranjang.pelanggan);       // "Jane Doe"
console.log(keranjang.items.length);    // 2
console.log(keranjang.items[1].nama);   // "Mouse"

Satu objek ini saja sudah menampung nama pelanggan (berupa string), daftar barang (berupa array berisi objek), dan total belanja (berupa number) — semuanya saling bertingkat dan bekerja bareng. Struktur bertingkat semacam inilah yang jadi tulang punggung data di hampir semua aplikasi nyata. Sekilas memang kelihatan rumit, padahal sebenarnya cuma array dan objek yang digabungkan, lalu diakses dengan dua teknik yang sudah kamu kuasai tadi.

Penutup

Sekarang kamu sudah bisa menyimpan sekaligus menyusuri kumpulan data yang nyata:

• Array ([ ]) adalah daftar yang terurut. Ambil isinya lewat index, yang mulai dari 0. Pakai .length untuk menghitung jumlahnya, dan method seperti push/pop untuk menambah atau menghapus.
• Objek ({ }) adalah kumpulan pasangan key-value — alias data berlabel. Ambil nilainya lewat key memakai dot notation (objek.key). Tiap nilai berlabel di dalamnya disebut property.
• Pakai array untuk daftar terurut berisi item sejenis; pakai objek untuk detail berlabel tentang satu hal.
• Keduanya bisa saling bersarang dengan bebas — array berisi objek adalah bentuk data paling umum yang akan kamu temui di dunia nyata (mirip catatan-catatan dari sebuah database). Gabungkan index dan key untuk menjangkau nilai mana pun (daftar[0].nama).

Array dan objek adalah cara kamu menampung data yang nantinya diolah oleh programmu. Pertanyaan yang muncul berikutnya kira-kira begini: gimana caranya kamu menyusuri sebuah daftar lalu melakukan sesuatu ke tiap itemnya? Nah, itu tugas perulangan, yang jadi bahasan artikel berikutnya — dan kebetulan pas banget dipasangkan dengan array yang baru saja kamu pelajari di sini.