Proyek Mini: Olah Data Array

1. Analogi: Dari Resep Masakan ke Jamuan Lengkap

Selama modul-modul sebelumnya, kamu belajar teknik memasak satu per satu: memotong (map), menyaring (filter), meremas (reduce), menyusun (sort). Sekarang saatnya memasak jamuan lengkap. Seorang koki tidak dinilai dari cara dia memotong satu bawang, tapi dari hidangan utuh yang tersaji di meja.

Proyek ini sama: kamu diberi data penjualan toko selama seminggu, dan tugasmu mengubah data mentah itu menjadi laporan yang berguna: total omzet, produk terlaris, laporan harian, dan daftar produk unik. Tidak ada kode jadi, tidak ada playground. Kamu menulis dari nol, seperti programmer sungguhan.

2. Kenapa Proyek Ini Ada?

Di dunia kerja, method array hampir tidak pernah dipakai sendirian. Data nyata selalu butuh rangkaian operasi: saring dulu, ubah bentuknya, jumlahkan, lalu urutkan. Pola pikir "rantai operasi" inilah yang membedakan orang yang hafal sintaks dengan orang yang bisa menyelesaikan masalah.

Proyek ini melatih tiga hal sekaligus: memecah masalah besar menjadi langkah kecil, memilih method yang tepat untuk tiap langkah, dan merangkai semuanya menjadi program yang rapi. Tiga kemampuan ini dipakai setiap hari oleh programmer JavaScript profesional, dari dashboard admin sampai aplikasi kasir.

3. Contoh Bertahap: Cara Berpikirnya

Sebelum mengerjakan, lihat dulu pola pikirnya lewat contoh kecil. Misal data:

const contoh = [
  { produk: "Kopi", qty: 10, harga: 15000 },
  { produk: "Teh", qty: 5, harga: 10000 },
];

Langkah 1, total omzet (reduce: banyak jadi satu):

const omzet = contoh.reduce((acc, x) => acc + x.qty * x.harga, 0);
console.log(omzet); // 200000

Langkah 2, produk terlaris (reduce sebagai "kompetisi": bandingkan tiap elemen dengan juara sementara):

const terlaris = contoh.reduce((juara, x) => (x.qty > juara.qty ? x : juara));
console.log(terlaris.produk); // "Kopi"

Perhatikan: di sini tidak ada nilai awal, karena juara pertama logisnya adalah elemen pertama. Tapi ingat jebakannya: kalau array kosong, ini error. Untuk data yang pasti ada isinya seperti data penjualan, pola ini aman dan elegan.

Langkah 3 (lebih realistis), laporan per hari dengan filter + map:

const data = [
  { hari: "Senin", produk: "Kopi", qty: 12, harga: 15000 },
  { hari: "Senin", produk: "Roti", qty: 8, harga: 8000 },
  { hari: "Selasa", produk: "Teh", qty: 15, harga: 10000 },
];

const laporanSenin = data
  .filter(x => x.hari === "Senin")          // ambil Senin saja
  .map(x => x.produk + ": Rp" + x.qty * x.harga); // ubah jadi string
console.log(laporanSenin); // ["Kopi: Rp180000", "Roti: Rp64000"]

Inilah "rantai operasi": filter menyaring, map mengubah bentuk. Hasil tiap tahap menjadi input tahap berikutnya. Kuasai pola ini dan kamu bisa membaca hampir semua kode pengolahan data JavaScript.

4. Kesalahan Umum Pemula: SALAH vs BENAR

Kesalahan 1: mengerjakan semuanya dalam satu raksasa reduce.

SALAH (bisa jalan, tapi mimpi buruk dibaca):

const hasil = data.reduce((acc, x) => {
  acc.total += x.qty * x.harga;
  if (!acc.hari[x.hari]) acc.hari[x.hari] = 0;
  acc.hari[x.hari] += x.qty * x.harga;
  // ... 20 baris lagi
  return acc;
}, { total: 0, hari: {} });

BENAR: pecah menjadi fungsi kecil, satu fungsi satu tugas:

function totalOmzet(data) {
  return data.reduce((acc, x) => acc + x.qty * x.harga, 0);
}
function omzetPerHari(data, hari) {
  return data
    .filter(x => x.hari === hari)
    .reduce((acc, x) => acc + x.qty * x.harga, 0);
}

Fungsi kecil mudah dites satu per satu, mudah dibaca, dan mudah diperbaiki saat ada bug.

Kesalahan 2: lupa bahwa filter dan map mengembalikan array BARU.

SALAH:

data.filter(x => x.hari === "Senin");
console.log(data.length); // tetap 6! data asli tidak berubah

BENAR: tangkap hasilnya ke variabel baru, atau rangkai langsung:

const senin = data.filter(x => x.hari === "Senin");

Kesalahan 3: membandingkan object dengan === untuk cari produk unik.

SALAH: unik.indexOf(item) === -1 tidak akan pernah menemukan object yang "sama" karena tiap object literal adalah identitas berbeda. BENAR: bandingkan properti kuncinya (nama produk), atau gunakan Set berisi string nama produk.

5. Ringkasan dan Cara Mengerjakan

Strategi yang terbukti berhasil: kerjakan SATU nomor dalam satu waktu, uji dengan console.log, pastikan benar, baru lanjut ke nomor berikutnya. Urutan yang disarankan: (1) total omzet dulu karena paling mudah, (2) produk terlaris, (3) laporan per hari, (4) produk unik yang paling menantang.

Tulis kodemu di editor tugas di bawah, lalu minta penilaian AI. Jangan khawatir kalau percobaan pertamamu berantakan: programmer profesional pun menulis draf kasar dulu, lalu merapikannya. Yang penting tiap fungsi kecilnya benar dan hasilnya sesuai.

Data

const penjualan = [
  { hari: "Senin", produk: "Kopi", qty: 12, harga: 15000 },
  { hari: "Senin", produk: "Roti", qty: 8, harga: 8000 },
  { hari: "Selasa", produk: "Kopi", qty: 20, harga: 15000 },
  { hari: "Selasa", produk: "Teh", qty: 15, harga: 10000 },
  { hari: "Rabu", produk: "Kopi", qty: 5, harga: 15000 },
  { hari: "Rabu", produk: "Roti", qty: 25, harga: 8000 },
];

Yang Harus Dihasilkan

1. Total omzet seminggu (reduce).
2. Produk terlaris berdasarkan qty (reduce + perbandingan, atau sort).
3. Array baru berisi string laporan per hari: "Senin: Rp244000" (map + filter per hari).
4. Daftar produk unik yang terjual (Set atau filter manual).

Catatan teknis: Pecah masalah besar jadi fungsi kecil: totalOmzet(data), terlaris(data), dst. Kode yang terorganisir lebih mudah dites dan dinilai.