Daftar Isi Utama

• Lihat indeks lengkap di [01. Pengenalan]

Panduan ini untuk siapa

• Pembelajar yang sudah bikin komponen React tapi masih bingung ngolah data
• Pemula yang sering mentok saat data API perlu diubah untuk UI
• Siapa pun yang ingin data flow lebih rapi dan gampang di-maintain

Apa yang akan Anda pelajari

• Kapan pakai map, filter, reduce, dan find tanpa tebak-tebakan
• Cara update array/object secara immutable (aman untuk React)
• Cara membentuk data mentah jadi siap pakai untuk UI dan API

Mengapa topik ini penting

Sebagian besar pekerjaan frontend bukan sekadar bikin komponen, tapi mengolah data dengan rapi. Kalau logika data berantakan, UI ikut berantakan.

Saat skill ini kuat, React jadi terasa jauh lebih ringan karena komponen menerima data yang sudah bersih dan terstruktur.

Konsep inti

Method array

• map: transform item
• filter: memilih item tertentu
• reduce: agregasi nilai
• find: ambil item pertama yang cocok

Rule praktis cepat:

• Pakai map kalau jumlah output biasanya tetap.
• Pakai filter kalau Anda ingin membuang item tertentu.
• Pakai reduce kalau ingin satu hasil akhir (sum/object/group).
• Pakai find kalau cuma butuh satu item yang pertama cocok.

Update immutable

Gunakan spread syntax untuk update aman tanpa memodifikasi data asli.

Kenapa ini penting di React:

• React mendeteksi update lewat perubahan reference.
• Kalau data dimutasi langsung, UI bisa tidak update sesuai ekspektasi.

Panduan langkah demi langkah

Langkah 1 — Mulai dari dataset kecil

Latih transformasi dari dataset kecil dulu (user, produk, task) supaya niat logika jelas.

Langkah 2 — Gabungkan method

Rangkai filter + map selama masih mudah dibaca. Kalau mulai panjang, pecah jadi langkah bernama.

Langkah 3 — Bentuk data siap UI

Bentuk object akhir yang bisa langsung dirender tanpa transformasi tambahan di JSX.

Target bab ini: logika data sebanyak mungkin diselesaikan sebelum masuk render UI.

Contoh praktis

Contoh 1 — Rata-rata nilai

const scores = [80, 90, 75, 95];
const average = scores.reduce((sum, value) => sum + value, 0) / scores.length;
console.log(average);

Expected output:

85

Contoh 2 — Update object immutable

const user = { name: "Sinta", city: "Jakarta" };
const updatedUser = { ...user, city: "Bandung" };

Real case:

• Pola ini hampir selalu muncul saat update state di React.

Kesalahan umum dan cara menghindarinya

• Mutasi array/object langsung -> selalu buat array/object baru
• Memaksa reduce untuk semua kasus -> pilih map/filter kalau lebih jelas
• Chain terlalu panjang dan susah dibaca -> pecah jadi helper variable bernama jelas
• Transformasi data berulang di JSX -> precompute data sebelum render

Mini Project

• Buat student grade analyzer dengan:
• rata-rata nilai,
• ranking,
• filter lulus/gagal,
• satu kartu “top performer”.

Bonus:

• Tambahkan output grouping berdasarkan kategori nilai (A, B, C, dst.).

Latihan cepat

• Ubah data user menjadi format siap card UI
• Hitung rata-rata, minimum, dan maksimum nilai
• Lakukan satu update immutable pada object bertingkat
• Jelaskan dalam satu kalimat: kapan reduce memang jadi pilihan terbaik?

Ringkasan utama

• Transformasi data adalah skill inti bernilai tinggi di frontend
• Immutable update wajib kalau mau perilaku React tetap prediktif
• Pipeline data yang rapi bikin komponen lebih sederhana dan mudah debug

Langkah berikutnya

Lanjut ke [06. Sintaks Modern dan Modules].