Destructuring, Spread, Map, Filter, dan Reduce

Di episode #45 kamu sudah upgrade cara menulis variabel dan function. Sekarang kita upgrade cara mengolah data. Lima jurus di artikel ini (destructuring, spread, map, filter, reduce) adalah alasan kenapa kode JavaScript modern terlihat ringkas dan elegan. Lebih penting lagi, kelimanya dipakai terus-menerus di React, jadi ini investasi wajib sebelum seri React dimulai.

Posisimu sekarang: fondasi JavaScript Basic sudah ada, syntax modern bagian 1 sudah dikuasai. Episode ini adalah bagian 2, fokus ke manipulasi data. Setelah ini tinggal module, async, dan fetch, lalu kamu siap masuk React.

Destructuring: Bongkar Paket Tanpa Ribet

Bayangkan kamu menerima paket berisi tiga barang. Cara lama mengambil isinya: buka paket, ambil satu per satu sambil menyebut nama paketnya terus. Cara destructuring: tuang sekaligus ke meja, masing-masing langsung punya nama sendiri.

const siswa = { nama: "Riko", kelas: "XII RPL 1", nilai: 85 };

// Cara lama
const namaLama = siswa.nama;
const nilaiLama = siswa.nilai;

// Destructuring: langsung bongkar
const { nama, nilai } = siswa;
console.log(nama);  // "Riko"
console.log(nilai); // 85

Kenapa ini penting? Karena di React nanti, props dan state hampir selalu dibongkar dengan cara ini. Alur berpikirnya: daripada menenteng object-nya ke mana-mana, ambil yang kamu butuhkan di awal. Kode jadi lebih pendek dan niatnya lebih jelas.

Destructuring juga bisa untuk array (pakai kurung siku, urutan menentukan) dan bisa memberi nilai default kalau propertinya tidak ada:

const [pertama, kedua] = ["apel", "jeruk", "mangga"];
console.log(pertama); // "apel"

const { nama, hobi = "ngoding" } = { nama: "Riko" };
console.log(hobi); // "ngoding" (default dipakai karena tidak ada di object)

const { a, b = 5 } = { a: 1 };
console.log(a + b);

Spread: Fotokopi yang Bisa Digabung

Operator spread (..., tiga titik) itu seperti mesin fotokopi ajaib: ia menyalin semua isi array atau object, dan kamu bisa menaruh hasil salinannya di wadah baru, digabung dengan yang lain, atau ditambahi item baru.

const buah = ["apel", "jeruk"];
const buahBaru = [...buah, "mangga"];
console.log(buahBaru); // ["apel", "jeruk", "mangga"]
console.log(buah);     // ["apel", "jeruk"] (aslinya tidak berubah!)

Perhatikan: array asli tidak berubah. Spread membuat salinan baru. Ini konsep krusial di React nanti, karena React melarang kita mengubah state secara langsung. Pola "salin lalu ubah salinannya" adalah pola wajib di React.

Untuk object juga bisa, dan ini cara standar meng-update satu properti tanpa merusak yang lain:

const user = { nama: "Riko", umur: 17 };
const userBaru = { ...user, umur: 18 };
console.log(userBaru); // { nama: "Riko", umur: 18 }

Map, Filter, Reduce: Trio Pengolah Array

Sekarang ke trio paling terkenal di JavaScript. Analoginya begini, bayangkan kamu punya sekeranjang apel:

• map = kupas semua apel, satu per satu diubah. Jumlah apel tetap sama, tapi semuanya berubah bentuk. Dipakai untuk transformasi.
• filter = pilih hanya apel yang bagus, yang busuk dibuang. Jumlah berkurang. Dipakai untuk seleksi.
• reduce = blender semua apel jadi satu gelas jus. Banyak input, satu output. Dipakai untuk agregasi (total, rata-rata, dan sejenisnya).

const harga = [10000, 20000, 30000, 40000];

// map: semua harga didiskon 10%
const diskon = harga.map(h => h * 0.9);
console.log(diskon); // [9000, 18000, 27000, 36000]

// filter: hanya yang di atas 15000
const mahal = harga.filter(h => h > 15000);
console.log(mahal); // [20000, 30000, 40000]

// reduce: total semua harga (mulai dari 0)
const total = harga.reduce((jumlah, h) => jumlah + h, 0);
console.log(total); // 100000

Tiga hal yang wajib dipahami dari ketiganya:

1. Mereka tidak mengubah array asli, selalu menghasilkan array/nilai baru. Aman.
2. Mereka menerima callback (function yang dijalankan untuk tiap item). Inilah kenapa arrow function dari episode #45 penting.
3. reduce punya dua parameter di callback: akumulator (hasil sementara yang dibawa terus) dan item saat ini. Angka 0 di akhir adalah nilai awal akumulator.

Kekuatan sebenarnya muncul saat ketiganya dirangkai (chaining):

const totalDiskonMahal = harga
  .filter(h => h > 15000)   // [20000, 30000, 40000]
  .map(h => h * 0.9)        // [18000, 27000, 36000]
  .reduce((jumlah, h) => jumlah + h, 0); // 81000

Baca dari atas ke bawah seperti kalimat: "saring yang mahal, diskon 10%, lalu totalkan". Bandingkan dengan loop for manual yang butuh variabel sementara dan if di dalamnya. Inilah kenapa programmer modern lebih suka gaya ini: niatnya terbaca langsung.

const angka = [1, 2, 3, 4, 5];
const hasil = angka
  .filter(n => n % 2 === 0)
  .map(n => n * 10);
console.log(hasil);

Persepsi yang Perlu Diluruskan

Persepsi salah 1: "map dan forEach itu sama saja." Beda jauh. map menghasilkan array baru (untuk transformasi data), sedangkan forEach tidak mengembalikan apa-apa (untuk efek samping seperti console.log). Memakai forEach untuk membangun array baru secara manual itu pola lama yang rawan bug.

Persepsi salah 2: "Destructuring dan spread cuma pemanis biar keren." Di React, spread adalah cara yang benar untuk meng-update state tanpa merusaknya, dan destructuring adalah cara standar membaca props. Ini bukan kosmetik, ini mekanisme kerja.

Latihan: Ubah Kode Lamamu

Ambil lagi proyek to-do list-mu dari episode #29, lalu:

1. Ubah semua loop for yang membangun array baru menjadi map atau filter.
2. Ubah function yang menerima object parameter menjadi memakai destructuring di parameternya, misalnya function tampilkan({ nama, nilai }).
3. Tambahkan satu fitur baru: tombol "tampilkan hanya yang selesai" yang memakai filter pada data tugasmu. Jangan cuma mengetik ulang, benar-benar tambahkan fiturnya.

Di episode berikutnya kita bahas Module dan NPM: cara memecah kode jadi file-file kecil yang rapi dan cara memakai ribuan library gratis dari internet. Sampai jumpa.