Cara Menggunakan Filter dan Find di JavaScript untuk Manipulasi Data Array

Saat kamu membangun aplikasi web modern, manipulasi data array atau list adalah makanan sehari-hari. Mulai dari menyaring produk berdasarkan kategori di e-commerce, mencari data pengguna berdasarkan ID, hingga menampilkan riwayat transaksi per bulan.

Di dalam ekosistem JavaScript modern (ES6 ke atas), kita dimanjakan dengan berbagai built-in array methods yang sangat kuat. Dua di antaranya yang paling sering memicu perdebatan—dan terkadang membingungkan bagi developer yang baru belajar—adalah .filter() dan .find().

Secara sekilas, keduanya terlihat mirip: sama-sama digunakan untuk mencari data di dalam koleksi list. Namun, jika kamu salah memilih metode, aplikasi kamu bisa mengalami penurunan performa, atau bahkan menghasilkan bug logika yang sulit dilacak. Artikel ini akan mengupas tuntas perbedaan filter vs find JavaScript, lengkap dengan contoh kasus nyata, analisis performa, dan panduan kapan harus menggunakan masing-masing fungsi.

Mengapa Memahami Array Methods itu Penting?

Sebelum kita masuk ke ranah teknis, mari kita sepakati satu hal: menulis kode yang berjalan itu bagus, tetapi menulis kode yang efisien, bersih (clean code), dan mudah dirawat itu jauh lebih baik.

Dahulu, sebelum ES6 populer, para developer harus menggunakan perulangan manual seperti for atau forEach untuk mencari data di dalam array. Kodenya terlihat panjang, berantakan, dan rentan terhadap kesalahan indeks. Perhatikan perbandingan berikut:

Cara Lama (Menggunakan For Loop)

const produk = [
  { id: 1, nama: 'Laptop', kategori: 'Elektronik' },
  { id: 2, nama: 'Kemeja', kategori: 'Pakaian' },
  { id: 3, nama: 'Smartphone', kategori: 'Elektronik' }
];

let hasilCari = [];
for (let i = 0; i < produk.length; i++) {
  if (produk[i].kategori === 'Elektronik') {
    hasilCari.push(produk[i]);
  }
}
console.log(hasilCari);

Bayangkan jika kamu harus menulis struktur di atas berulang kali di dalam proyek besar. Kode kamu akan dipenuhi oleh boilerplate yang tidak perlu. Dengan menggunakan method modern seperti .filter() atau .find(), kamu bisa meringkas kode di atas menjadi satu atau dua baris saja tanpa menghilangkan kejelasan maksud (readability) dari kode tersebut.

1. Berkenalan dengan Method .filter()

Method .filter() dirancang khusus untuk menyaring data. Analogi paling mudah adalah seperti sebuah saringan kopi. Kamu menuangkan air dan bubuk kopi, lalu saringan tersebut hanya akan meloloskan cairan kopi murni berdasarkan kondisi fisik saringannya.

Bagaimana Cara Kerjanya?

Method .filter() akan mengecek setiap elemen di dalam array dari awal hingga akhir. Untuk setiap elemen, ia akan menjalankan fungsi pengujian (callback function). Jika fungsi tersebut mengembalikan nilai true, maka elemen tersebut akan dimasukkan ke dalam array baru. Jika seluruh elemen tidak ada yang memenuhi syarat, ia tetap mengembalikan array, namun dalam keadaan kosong ([]).

Sintaks Dasar .filter()

const arrayBaru = arrayAsal.filter((item, index, array) => {
  return // Kondisi yang menghasilkan true atau false
});

Contoh Kasus .filter()

Misalkan kamu sedang membuat fitur pencarian produk pada aplikasi toko online, di mana pengguna ingin melihat semua produk yang memiliki harga di bawah Rp50.000.

const daftarBarang = [
  { nama: 'Buku Tulis', harga: 15000 },
  { nama: 'Pena Gel', harga: 8000 },
  { nama: 'Tas Ransel', harga: 150000 },
  { nama: 'Penggaris', harga: 5000 }
];

// Mencari semua barang yang murah (di bawah 50.000)
const barangMurah = daftarBarang.filter(barang => barang.harga < 50000);

console.log(barangMurah);
/* 
Output:
[
  { nama: 'Buku Tulis', harga: 15000 },
  { nama: 'Pena Gel', harga: 8000 },
  { nama: 'Penggaris', harga: 5000 }
]
*/

Perhatikan bahwa hasil dari .filter() selalu berbentuk Array, meskipun data yang cocok hanya ada satu atau bahkan tidak ada sama sekali.

2. Berkenalan dengan Method .find()

Jika .filter() bertindak sebagai saringan yang mengumpulkan banyak hal, maka .find() bertindak seperti seorang detektif yang mencari satu target spesifik. Begitu target ditemukan, tugas detektif tersebut langsung selesai.

Bagaimana Cara Kerjanya?

Method .find() akan menelusuri elemen array satu per satu dari indeks terkecil (0). Begitu ia menemukan elemen pertama yang memenuhi kondisi yang kamu tentukan, ia akan langsung mengembalikan elemen tersebut dan menghentikan proses pencarian. Sisa elemen di dalam array tidak akan diperiksa lagi. Jika tidak ada satu pun elemen yang cocok, method ini akan mengembalikan nilai undefined.

Sintaks Dasar .find()

const elemenDitemukan = arrayAsal.find((item, index, array) => {
  return // Kondisi yang menghasilkan true atau false
});

Contoh Kasus .find()

Bayangkan situasi di mana seorang pengguna ingin login ke sistem, dan kamu perlu mencocokkan data token unik atau ID pengguna di dalam database lokal (array).

const daftarUser = [
  { id: 'usr-01', nama: 'Budi', role: 'Member' },
  { id: 'usr-02', nama: 'Siti', role: 'Admin' },
  { id: 'usr-03', nama: 'Andi', role: 'Member' }
];

// Mencari user dengan ID spesifik
const userSpesifik = daftarUser.find(user => user.id === 'usr-02');

console.log(userSpesifik);
/* 
Output:
{ id: 'usr-02', nama: 'Siti', role: 'Admin' }
*/

Perhatikan output di atas. Hasilnya bukanlah array, melainkan langsung berupa Object (elemen tunggal dari array tersebut).

Perbedaan Utama Filter vs Find JavaScript

Untuk memudahkan kamu dalam mengingat dan memilih mana yang terbaik untuk skenario kodemu, berikut adalah tabel komparasi mendalam antara keduanya:

Analisis Performa

Jika kamu mengolah array berukuran kecil (misal di bawah 100 elemen), perbedaan kecepatan antara filter vs find tidak akan terasa signifikan dalam hitungan milidetik. Namun, bagaimana jika kamu menangani data berskala besar (big data) yang berisi puluhan ribu hingga jutaan data objek dari API?

Secara teori dan praktik, .find() jauh lebih cepat dibandingkan .filter() jika tujuanmu hanya mencari satu data unik yang posisinya berada di awal atau tengah array.

Mengapa? Karena .filter() dipaksa secara algoritmik untuk mengunjungi setiap sel dalam struktur data array guna memastikan tidak ada data yang terlewat. Di sisi lain, .find() menggunakan pendekatan short-circuiting—begitu ketemu, ia langsung keluar dari fungsi pencarian.

Tips Optimasi: Jika kamu tahu bahwa data yang kamu cari bersifat unik (seperti primary key, email, atau SKU produk), selalu gunakan .find(). Menggunakan .filter()[0] untuk mengambil elemen pertama adalah bad practice yang membuang-buang daya komputasi perangkat user kamu!

Kapan Harus Pakai Filter, Kapan Harus Pakai Find?

Gunakan `.filter()` ketika kamu ingin:

• Menampilkan sistem rekomendasi produk sejenis (kategori sama).
• Menghapus satu item dari daftar belanja (membuat array baru yang tidak menyertakan ID barang yang dihapus). Contoh: const sisaBarang = list.filter(item => item.id !== idDihapus).
• Membuat fitur pencarian multi-kriteria (misal: hotel bintang 4 dengan fasilitas kolam renang).

Gunakan `.find()` ketika kamu ingin:

• Mengambil detail profil pengguna dari daftar tim berdasarkan username yang diklik.
• Mengecek apakah suatu produk tertentu sudah ada di dalam keranjang belanja sebelum memutuskan untuk menambah kuantitas atau menambah baris baru.
• Mencari konfigurasi pengaturan (setting) tertentu dari object konfigurasi global aplikasi.

Kesimpulan

Memilih antara filter vs find di JavaScript sebenarnya sangat sederhana jika kamu sudah memahami esensi output yang kamu butuhkan:

• Gunakan filter kalau kamu mengekspektasikan hasilnya bisa berupa banyak dokumen/item (Bentuk kelompok/koleksi).
• Gunakan find kalau kamu hanya butuh tepat satu dokumen/item yang pertama kali cocok (Bentuk entitas tunggal).

Dengan menerapkan kedua method ini secara tepat, kode JavaScript kamu tidak hanya akan berjalan lebih cepat dan responsif, tetapi juga akan jauh lebih mudah dibaca oleh rekan tim developer kamu yang lain. Selamat mencoba dan happy coding!