← Kembali ke kursus
Pelajaran kursus · JavaScript
Pelajaran 12

Array method: map, filter, reduce

Transformasi dan agregasi koleksi secara fungsional.

Pahami konsepnya

Array method adalah cara JavaScript mengolah koleksi secara fungsional — tanpa loop manual. map(fn) mentransformasi tiap elemen menghasilkan array baru dengan panjang sama. filter(fn) menyaring elemen yang membuat fn true. reduce(fn, awal) menggabungkan seluruh array menjadi satu nilai — fn menerima (akumulator, elemen) dan mengembalikan akumulator baru.

Method pendukung: forEach(fn) menjalankan fn per elemen tanpa menghasilkan apa pun. find(fn) memberi elemen PERTAMA yang cocok. some(fn) true bila minimal satu cocok. every(fn) true bila SEMUA cocok. flat(depth) meratakan array bersarang. flatMap = map + flat(1).

Rantai method adalah pola yang powerful: arr.filter(x => x > 5).map(x => x * 2).reduce((a, b) => a + b, 0). Semua method non-mutating (kecuali sort dan reverse yang mengubah asli) — data sumber aman.

Coba contoh kode

const angka = [3, 8, 1, 9, 4, 6, 7, 2, 5];

// map: transformasi
const dobel = angka.map(x => x * 2);
console.log(dobel);

// filter: saring
const besar = angka.filter(x => x > 5);
console.log(besar);

// reduce: agregasi
const total = angka.reduce((acc, n) => acc + n, 0);
console.log(total);  // 45

// chaining
const hasil = angka
  .filter(x => x % 2 === 0)
  .map(x => x * x)
  .reduce((a, b) => a + b, 0);
console.log(hasil);  // 4+64+16+36+4 = 124

// find, some, every
console.log(angka.find(x => x > 7));   // 8
console.log(angka.some(x => x > 8));   // true
console.log(angka.every(x => x > 0));  // true

Rantai filter-map-reduce membaca seperti pipa: saring genap → kuadratkan → jumlahkan. reduce dengan nilai awal 0 menjumlah dari nol. find memberi elemen pertama yang cocok, bukan array.

Latihan singkat

Uji: map [1..5] dengan x*x lalu reduce — harus `55`.