Array.filter: Menyaring

Analogi: Saringan Teh

Bayangkan menyeduh teh tubruk. Kamu tuang semuanya ke saringan: air teh LOLOS ke cangkir, ampas TERTAHAN di saringan. Saringan tidak mengubah air tehnya, tidak menambah apa-apa, hanya memutuskan siapa lolos dan siapa tidak berdasarkan satu aturan: "yang cair lewat, yang padat tidak". filter adalah saringan itu. Callback-nya adalah aturan saringan: untuk tiap elemen, kembalikan true (lolos, masuk array baru) atau false (tertahan, dibuang). Hasilnya array BARU yang hanya berisi elemen yang lolos, bisa lebih pendek dari aslinya, bahkan bisa kosong kalau tidak ada yang lolos.

Kenapa filter Ada?

Hampir setiap aplikasi perlu "tampilkan hanya yang memenuhi syarat": produk yang stoknya tersedia, siswa yang lulus, transaksi bulan ini, pesan yang belum dibaca. Cara lama: loop manual dengan if di dalam dan push ke array penampung. Berhasil, tapi pola "siapkan wadah, loop, cek, push" ditulis berulang-ulang di seluruh codebase. filter merangkum pola itu menjadi satu baris yang niatnya eksplisit: "saring dengan aturan ini". Seperti map, ia tidak mengubah array asli, sehingga data sumber tetap aman. Dan seperti saringan teh yang bisa dirangkai (saring kasar lalu saring halus), filter bisa di-CHAIN dengan map dan method lain menjadi pipa pengolahan data yang elegan.

Contoh 1: Menyaring Sederhana

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

// Aturan saringan: hanya angka genap yang lolos
const genap = angka.filter(function(n) {
  return n % 2 === 0; // true -> lolos, false -> dibuang
});
console.log(genap); // [2, 4, 6]
console.log(angka); // [1, 2, 3, 4, 5, 6] (asli utuh!)

// Versi arrow, bentuk paling umum
const besar = angka.filter(n => n > 3);
console.log(besar); // [4, 5, 6]

Kunci: callback filter harus mengembalikan NILAI KEBENARAN (truthy/falsy). true berarti "pertahankan elemen ini", false berarti "buang". Kamu tidak perlu menulis if di dalam callback untuk kasus sederhana: ekspresi perbandingan n % 2 === 0 SUDAH menghasilkan boolean, langsung return saja.

Contoh 2: Kasus Nyata, Katalog Toko dan Chaining

// Data produk toko online
const produk = [
  { nama: "Kopi", harga: 15000, stok: 10 },
  { nama: "Teh", harga: 8000, stok: 0 },
  { nama: "Susu", harga: 12000, stok: 5 },
  { nama: "Gula", harga: 17000, stok: 0 },
];

// 1. Hanya tampilkan yang masih ada stoknya
const tersedia = produk.filter(p => p.stok > 0);
console.log(tersedia.length); // 2 (Kopi dan Susu)

// 2. CHAIN: saring yang murah DAN tersedia, lalu ambil namanya saja
const rekomendasiMurah = produk
  .filter(p => p.stok > 0)      // saring dulu: [Kopi, Susu]
  .filter(p => p.harga < 15000) // saring lagi: [Susu]
  .map(p => p.nama);            // transform: ["Susu"]
console.log(rekomendasiMurah); // ["Susu"]

// 3. Kasus nyata lain: cari transaksi mencurigakan di atas 1 juta
const transaksi = [50000, 2500000, 75000, 5000000, 120000];
const mencurigakan = transaksi.filter(t => t > 1000000);
console.log(mencurigakan); // [2500000, 5000000]

Perhatikan contoh 2: dua filter berantai lalu map. Ini gaya penulisan "pipa data" yang idiomatik di JavaScript modern: baca dari atas ke bawah seperti kalimat, "ambil produk, yang stoknya ada, yang harganya murah, ambil namanya". Urutan chain penting untuk efisiensi: saring DULU (memperkecil jumlah), baru transform dengan map (lebih sedikit yang diproses).

Kesalahan Umum Pemula

1. Callback tidak me-return boolean.

const angka = [1, 2, 3, 4];

// SALAH: kurung kurawal tanpa return -> semua undefined -> semua falsy -> hasil KOSONG
const salah = angka.filter(n => {
  n % 2 === 0;
});
console.log(salah); // [] (kosong! bukan error!)

// BENAR: return ekspresi boolean-nya
const benar = angka.filter(n => {
  return n % 2 === 0;
});
// atau versi implisit:
const benar2 = angka.filter(n => n % 2 === 0);
console.log(benar2); // [2, 4]

Hasil kosong tanpa error adalah bug tersunyi di filter. Kalau filter-mu selalu menghasilkan [], curigai callback yang lupa return.

2. Mengira filter mengubah array asli.

const nilai = [55, 80, 45];

// SALAH sangka: dikira nilai ikut tersaring
nilai.filter(n => n >= 70);
console.log(nilai); // [55, 80, 45] TETAP!

// BENAR: tangkap hasilnya
const lulus = nilai.filter(n => n >= 70);
console.log(lulus); // [80]

3. Menulis kondisi terbalik.

const produk = [
  { nama: "A", stok: 10 },
  { nama: "B", stok: 0 },
];

// SALAH: kondisi terbalik, yang habis malah kepilih
const salahPilih = produk.filter(p => p.stok === 0);
console.log(salahPilih); // [{nama: "B", ...}] (yang habis!)

// BENAR: baca ulang, "yang lolos adalah yang stoknya ADA"
const tersedia = produk.filter(p => p.stok > 0);

Tips: ucapkan aturannya dengan kata-kata dulu ("pertahankan yang stoknya lebih dari nol"), baru tulis kodenya. Kebalik logika adalah bug paling manusiawi.

4. Filter berantai yang tidak perlu vs satu kondisi gabungan.

const data = [5, 12, 8, 20, 3];

// Bisa digabung: lebih efisien satu kali jalan
const hasil = data.filter(n => n > 5 && n < 15);
console.log(hasil); // [12, 8]

// Chain dua filter juga benar, tapi dua kali iterasi
const hasil2 = data.filter(n => n > 5).filter(n => n < 15);

Keduanya benar. Gabungkan dengan && bila aturannya sederhana (satu iterasi, lebih cepat). Pisah menjadi chain bila tiap tahap perlu dibaca sebagai langkah logis tersendiri.

Ringkasan

filter adalah saringan: callback mengembalikan true/false untuk tiap elemen, yang true dikumpulkan menjadi array BARU (panjang bisa berkurang, bahkan nol), array asli tidak tersentuh. Habitatnya: "tampilkan hanya yang memenuhi syarat" di katalog, laporan, dan daftar apa pun. Selalu return boolean di callback, tangkap hasilnya, dan rangkai dengan map menjadi pipa data: saring dulu, transform kemudian. Kalau hasilnya misterius kosong, periksa return callback-mu terlebih dahulu.