Kiki/🎮🍉⌨️🍩💻
Hampir semua program nyata bekerja dengan kumpulan data — daftar produk, data pengguna, konfigurasi aplikasi. Di JavaScript, dua struktur data utama untuk menyimpan kumpulan informasi adalah Array (daftar terurut) dan Object (kumpulan key-value). Menguasai keduanya adalah kunci untuk bekerja dengan data di JavaScript.
Array
Array adalah daftar nilai yang terurut. Setiap elemen punya indeks dimulai dari 0.
// Membuat array
const buah = ["apel", "mangga", "jeruk", "pisang"];
const angka = [1, 2, 3, 4, 5];
const campur = ["teks", 42, true, null, { nama: "Budi" }];
const kosong = [];
// Akses elemen
console.log(buah[0]); // "apel"
console.log(buah[2]); // "jeruk"
console.log(buah[buah.length - 1]); // "pisang" (elemen terakhir)
Method Array yang Penting
const arr = [1, 2, 3, 4, 5];
// Menambah dan menghapus
arr.push(6); // tambah di akhir → [1,2,3,4,5,6]
arr.pop(); // hapus dari akhir → kembalikan 6
arr.unshift(0); // tambah di awal → [0,1,2,3,4,5]
arr.shift(); // hapus dari awal → kembalikan 0
arr.splice(1, 2); // hapus 2 elemen mulai indeks 1 → [1,4,5]
// Mencari
console.log(arr.indexOf(4)); // 1 (indeks dari nilai 4)
console.log(arr.includes(5)); // true
console.log(arr.find(n => n > 3)); // 4 (elemen pertama yang cocok)
console.log(arr.findIndex(n => n > 3)); // indeks dari elemen yang cocok
// Transformasi — selalu return array BARU
const double = [1,2,3].map(n => n * 2); // [2, 4, 6]
const genap = [1,2,3,4].filter(n => n % 2 === 0); // [2, 4]
const total = [1,2,3,4].reduce((acc, n) => acc + n, 0); // 10
const flat = [[1,2],[3,4]].flat(); // [1, 2, 3, 4]
// Sortir dan balik
[3,1,4,1,5].sort((a, b) => a - b); // [1, 1, 3, 4, 5]
[1,2,3].reverse(); // [3, 2, 1]
// Utilitas
[1,2,3].join(" - "); // "1 - 2 - 3"
[1,2,3].slice(1, 3); // [2, 3] (copy sebagian)
[...arr1, ...arr2]; // gabung dua array (spread)
Destructuring Array
const koordinat = [10, 20, 30];
const [x, y, z] = koordinat;
console.log(x, y, z); // 10 20 30
// Skip elemen
const [pertama, , ketiga] = [1, 2, 3];
console.log(pertama, ketiga); // 1 3
// Rest
const [kepala, ...ekor] = [1, 2, 3, 4, 5];
console.log(kepala); // 1
console.log(ekor); // [2, 3, 4, 5]
Object
Object menyimpan data dalam pasangan key: value. Key adalah string (atau Symbol), value bisa tipe apapun.
const pengguna = {
id: 1,
nama: "Miftakhuddin",
email: "me@kiki.my.id",
aktif: true,
alamat: { // nested object
kota: "Surabaya",
provinsi: "Jawa Timur"
},
hobi: ["coding", "gaming"] // array di dalam object
};
// Akses property
console.log(pengguna.nama); // "Miftakhuddin" (dot notation)
console.log(pengguna["email"]); // "me@kiki.my.id" (bracket notation)
console.log(pengguna.alamat.kota); // "Surabaya"
// Ubah dan tambah property
pengguna.nama = "Kiki";
pengguna.telepon = "081234567890";
// Hapus property
delete pengguna.aktif;
// Cek keberadaan property
console.log("nama" in pengguna); // true
console.log(pengguna.hasOwnProperty("nama")); // true
Shorthand Property dan Method
const nama = "Budi";
const usia = 25;
// Tanpa shorthand
const user1 = { nama: nama, usia: usia };
// Dengan shorthand (ES6) — jika nama variabel sama dengan key
const user2 = { nama, usia };
// Method di dalam object
const kalkulator = {
nilai: 0,
// Cara lama
tambah: function(n) { this.nilai += n; },
// Shorthand method (ES6)
kurang(n) { this.nilai -= n; },
// Arrow function — JANGAN untuk method yang pakai this
tampilkan: () => console.log("nilai saat ini")
};
Destructuring Object
const produk = {
id: 101,
nama: "Laptop Gaming",
harga: 15000000,
stok: 5
};
// Destructuring dasar
const { nama, harga } = produk;
console.log(nama, harga); // "Laptop Gaming" 15000000
// Rename variabel
const { nama: namaProduk, harga: hargaProduk } = produk;
// Default value
const { warna = "hitam" } = produk;
console.log(warna); // "hitam" (karena tidak ada di produk)
// Nested destructuring
const { alamat: { kota } } = pengguna;
// Destructuring di parameter fungsi
function tampilkanProduk({ nama, harga, stok = 0 }) {
console.log(`${nama}: Rp${harga.toLocaleString()} (stok: ${stok})`);
}
tampilkanProduk(produk);
Spread dan Rest pada Object
const dasar = { a: 1, b: 2 };
const tambahan = { c: 3, d: 4 };
// Gabungkan object (spread)
const gabungan = { ...dasar, ...tambahan }; // { a:1, b:2, c:3, d:4 }
// Copy object (shallow)
const salinan = { ...dasar };
// Override property
const updated = { ...produk, harga: 14000000, stok: 10 };
Method Object Bawaan
const obj = { a: 1, b: 2, c: 3 };
Object.keys(obj); // ["a", "b", "c"]
Object.values(obj); // [1, 2, 3]
Object.entries(obj); // [["a",1], ["b",2], ["c",3]]
// Iterasi object
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});
// Gabungkan object
Object.assign({}, dasar, tambahan);
// Freeze — cegah perubahan
const config = Object.freeze({ env: "production", port: 3000 });
Array of Objects — Pola yang Paling Sering Dipakai
const produkList = [
{ id: 1, nama: "Laptop", harga: 15000000, kategori: "elektronik" },
{ id: 2, nama: "Mouse", harga: 250000, kategori: "elektronik" },
{ id: 3, nama: "Meja", harga: 500000, kategori: "furnitur" }
];
// Filter produk elektronik
const elektronik = produkList.filter(p => p.kategori === "elektronik");
// Hitung total harga
const totalHarga = produkList.reduce((total, p) => total + p.harga, 0);
// Ambil hanya nama produk
const namaList = produkList.map(p => p.nama);
// ["Laptop", "Mouse", "Meja"]
// Sort berdasarkan harga
produkList.sort((a, b) => a.harga - b.harga);
// Cari produk berdasarkan id
const produkDicari = produkList.find(p => p.id === 2);
Kesimpulan
Array dan Object adalah dua struktur data yang akan kamu gunakan di hampir setiap program JavaScript. Dengan menguasai method seperti map, filter, reduce, dan destructuring, kamu bisa memanipulasi data dengan cara yang bersih dan ekspresif.
Di artikel berikutnya, kita masuk ke manipulasi DOM — cara JavaScript berinteraksi langsung dengan elemen HTML di halaman web.