Belajar JavaScript - Array, Objek, dan Struktur Data Dasar

#Pendahuluan

Fungsi membuat kode terorganisasi, tapi untuk memecahkan masalah nyata kalian butuh cara menyimpan kumpulan data dengan rapi. Episode 5 membahas tiga struktur data inti JavaScript: array untuk daftar nilai berurutan, objek untuk memodelkan entitas dengan properti, dan kombinasi keduanya untuk membangun data bertingkat yang realistis.

Selain itu, kalian akan mengenal Set dan Map — dua struktur data yang lebih spesifik. Set menyimpan nilai unik tanpa duplikasi, dan Map menyimpan pasangan kunci-nilai dengan kunci bebas tipe. Keduanya sering menjadi pilihan yang lebih tepat daripada array atau objek biasa.

Kalian akan melihat data yang menyerupai aplikasi sungguhan: daftar pengguna, produk, dan relasi antar keduanya. Struktur data yang dipilih dengan benar akan membuat episode 7 sampai 12 terasa jauh lebih mudah.

#Array dan Operasi Dasarnya

#Membuat dan Mengakses Array

Array menyimpan kumpulan nilai dengan urutan. Setiap elemen diakses lewat indeks yang dimulai dari nol:

Membuat dan mengakses array

const buah = ["apel", "pisang", "mangga"];
 
console.log(buah[0]);
console.log(buah[2]);
console.log(buah.length);
console.log(buah[buah.length - 1]);

buah[0] mengembalikan "apel", buah[2] mengembalikan "mangga", dan buah.length mengembalikan 3. Elemen terakhir selalu ada di indeks length - 1. Array bisa menampung campuran tipe, tapi praktik baiknya membuat satu array berisi satu tipe yang konsisten.

#Menambah dan Menghapus Elemen

Operasi dasar mutasi array memakai method push, pop, shift, dan unshift:

Menambah dan menghapus elemen

const angka = [2, 4];
 
angka.push(6);
console.log(angka);
angka.pop();
console.log(angka);
angka.unshift(1);
console.log(angka);
angka.shift();
console.log(angka);

angka.push(6) menambah di akhir sehingga array menjadi [2, 4, 6]. pop menghapus dari akhir, unshift menambah di awal, dan shift menghapus dari awal. Wajib diingat: push dan pop sangat cepat, sedangkan shift dan unshift lambat karena seluruh elemen harus digeser.

#Objek dan Properti

#Membuat dan Mengakses Objek

Objek memodelkan entitas dengan pasangan kunci-nilai. Kunci disebut properti, dan nilainya bisa tipe apa pun:

Membuat dan mengakses objek

const pengguna = {
  nama: "Arman",
  role: "Engineer",
  tahunMasuk: 2020,
};
 
console.log(pengguna.nama);
console.log(pengguna["role"]);
console.log(pengguna.tahunMasuk);

pengguna.nama mengakses properti dengan dot notation, dan pengguna["role"] memakai bracket notation yang berguna saat kunci bersifat dinamis. Objek adalah tulang punggung JavaScript — hampir semua hal di bahasa ini adalah objek, termasuk array yang sebenarnya objek khusus.

#Mutasi Properti

Properti objek bisa diubah, ditambah, atau dihapus setelah objek dibuat:

Mengubah dan menghapus properti

const produk = { nama: "Kopi", harga: 25000 };
 
produk.harga = 30000;
produk.stok = 12;
console.log(produk);
delete produk.stok;
console.log(produk);

produk.harga = 30000 mengubah nilai yang ada, dan produk.stok = 12 menambah properti baru. Operator delete menghapus properti dari objek. Catatan: const hanya melindungi binding variabel, bukan isi objek — propertinya tetap bisa dimutasi.

#Struktur Data Bertingkat

#Array dalam Objek dan Objek dalam Array

Data dunia nyata jarang datar. Kombinasi array dan objek memodelkan data realistis: objek yang berisi array, atau array yang berisi banyak objek.

Array berisi objek

const tim = [
  { nama: "Arman", role: "Backend" },
  { nama: "Sari", role: "Frontend" },
  { nama: "Budi", role: "DevOps" },
];
 
for (const anggota of tim) {
  console.log(`${anggota.nama} - ${anggota.role}`);
}

tim adalah array berisi objek, dan for (const anggota of tim) mengulang setiap anggota. Akses anggota.nama dan anggota.role menggabungkan semua yang sudah kalian pelajari: array, objek, loop, dan template literal. Pola ini adalah bentuk data paling umum di aplikasi JavaScript.

#Data Bersarang Lebih Dalam

Data bisa bersarang lebih dalam lagi — objek di dalam objek, array di dalam properti:

Objek dengan array di dalamnya

const penulis = {
  nama: "Arman Dwi Pangestu",
  buku: [
    { judul: "Belajar JavaScript", tahun: 2026 },
    { judul: "Belajar HTML", tahun: 2025 },
  ],
};
 
console.log(penulis.buku[0].judul);
console.log(penulis.buku.length);

penulis.buku[0].judul membuka rantai akses: properti buku yang berisi array, elemen pertama, lalu properti judul-nya. Semakin dalam struktur, semakin penting memakai nama variabel yang jelas agar rantai akses tidak membingungkan.

#Set dan Map

#Set: Kumpulan Nilai Unik

Set menyimpan nilai unik. Menambahkan nilai yang sudah ada tidak akan menambah elemen baru:

Set menghilangkan duplikasi

const angka = [1, 2, 2, 3, 3, 3];
const unik = new Set(angka);
 
console.log(unik);
console.log([...unik]);

new Set(angka) menghapus semua duplikasi sehingga unik berisi 1, 2, 3. Penyebaran [...unik] mengubah Set kembali menjadi array. Pola new Set(angka) ini sangat umum untuk menghilangkan duplikasi dalam satu baris — dan ... adalah spread operator yang akan kita bedah di episode 7.

#Map: Pasangan Kunci-Nilai Bebas Tipe

Map menyimpan pasangan kunci-nilai dengan kunci bebas tipe, termasuk objek. Berbeda dari objek biasa, Map menjaga urutan dan punya ukuran yang akurat:

Map dengan kunci dan nilai

const skor = new Map();
 
skor.set("Arman", 92);
skor.set("Sari", 88);
skor.set("Arman", 95);
 
console.log(skor.get("Arman"));
console.log(skor.size);

skor.set("Arman", 95) menimpa nilai lama untuk kunci yang sama, sehingga get mengembalikan 95 dan size mengembalikan 2. Map lebih tepat daripada objek ketika kunci dinamis atau sering ditambah dan dihapus — perilakunya lebih terprediksi.

#Penutup

Episode 5 melengkapi perangkat struktur data dasar kalian: array dengan method push, pop, shift, dan unshift, objek dengan properti dan mutasi, data bertingkat yang menggabungkan keduanya, serta Set dan Map sebagai pilihan yang lebih spesifik untuk kebutuhan tertentu.

Inti yang harus dibawa pulang:

• Array diakses lewat indeks nol-based dan punya properti length.
• push dan pop bekerja di akhir; shift dan unshift di awal.
• Objek memodelkan entitas dengan pasangan kunci-nilai.
• const tidak mengunci isi objek atau array, hanya bindingnya.
• Data bertingkat menggabungkan array di dalam objek dan sebaliknya.
• Set menghilangkan duplikasi; Map menyimpan pasangan kunci-nilai bebas tipe.

Di episode 6 selanjutnya kita akan membahas manipulasi string dan tanggal — memotong, mencari, dan mengganti teks dengan method string, memformat angka dan tanggal, serta bekerja dengan objek Date untuk logika berbasis waktu. Keduanya adalah skill praktis yang dipakai hampir di setiap aplikasi.