Memilih Antara find, filter, dan findIndex di JavaScript

Kamu punya daftar produk dari API dan ingin menampilkan satu produk saja saat pengguna mengklik namanya. Metode mana yang dipakai: find, filter, atau findIndex? Ketiganya bekerja pada array dan menerima fungsi pengujian, tetapi mengembalikan bentuk data yang berbeda. Memilih yang salah membuat kode tetap jalan, hanya saja bertele-tele atau mengembalikan nilai yang tidak kamu duga.

Perbedaan find, filter, dan findIndex di JavaScript terletak pada apa yang dikembalikan dan kapan proses berhenti. Dari situ, keputusan pemakaian jadi lebih mudah ditentukan.

Ringkasan perbedaan ketiganya

Bayangkan kamu mencari satu buku di rak berdasarkan judulnya. Ketiga metode ini menangani pencarian dengan cara berbeda.

• find mengembalikan elemen pertama yang lolos pengujian, atau undefined jika tidak ada.
• filter mengembalikan array baru berisi semua elemen yang lolos pengujian, bisa kosong.
• findIndex mengembalikan indeks elemen pertama yang lolos pengujian, atau -1 jika tidak ada.

Perbedaan -1 dan undefined ini penting. Keduanya sama-sama menandakan data tidak ditemukan, tetapi angka -1 bisa langsung dipakai untuk perhitungan indeks, sedangkan undefined tidak.

Kapan memakai find

Pakai find saat kamu hanya butuh satu objek dan proses bisa berhenti begitu ketemu. Kasus paling umum adalah mengambil data berdasarkan ID atau slug.

const users = [
  { id: 1, nama: 'Ani', aktif: true },
  { id: 2, nama: 'Budi', aktif: false },
  { id: 3, nama: 'Citra', aktif: true }
];

const user = users.find(u => u.id === 2);
console.log(user.nama); // Budi

Karena find berhenti di elemen pertama yang cocok, metode ini hemat waktu pada array panjang bila datanya memang unik. Kalau di dalam array ternyata ada beberapa elemen yang lolos, kamu hanya mendapat yang pertama dan sisanya diabaikan.

Satu hal yang sering terlewat: hasil find bisa undefined. Selalu periksa hasilnya sebelum mengakses properti, misalnya if (user) { ... }. Kalau lupa, error “Cannot read properties of undefined” akan muncul saat data tidak ditemukan.

Kapan memakai filter

Gunakan filter ketika kamu butuh semua elemen yang memenuhi syarat, bukan hanya satu. Contohnya menyaring produk yang harganya di bawah batas tertentu, atau menampilkan hanya user yang aktif.

const aktif = users.filter(u => u.aktif);
console.log(aktif.map(u => u.nama)); // ['Ani', 'Citra']

filter selalu mengembalikan array baru, termasuk array kosong jika tidak ada yang cocok. Ini membuatnya aman dirantai dengan metode lain seperti map atau reduce tanpa perlu cek undefined lebih dulu.

Kekurangannya, filter memeriksa seluruh elemen sampai habis. Untuk pencarian satu item pada array besar, ini pekerjaan yang tidak perlu. Jika kamu hanya butuh satu hasil, find lebih tepat.

filter juga tidak mengubah array asli. Kalau kamu mengubah objek di dalam hasil filter, objek asli tetap ikut berubah karena yang disalin hanya referensinya, bukan isi objeknya.

Kapan memakai findIndex

findIndex berguna saat kamu perlu tahu posisi elemen, bukan isinya. Biasanya ini dipakai ketika kamu ingin mengubah atau menghapus elemen tertentu dari array.

const index = users.findIndex(u => u.id === 3);
if (index !== -1) {
  users[index].aktif = false;
}

Pola di atas lebih jelas dibanding mencari objek lalu mencari indeksnya lagi. Kamu hanya melakukan satu kali penelusuran.

Cek !== -1 sebelum memakai indeksnya. Kalau hasilnya -1 dan kamu langsung akses users[-1], JavaScript akan mengembalikan undefined tanpa error, sehingga bug-nya bisa lolos ke tahap berikutnya dan lebih sulit dilacak.

Untuk kebutuhan menghapus elemen, findIndex berpasangan rapi dengan splice. Untuk kebutuhan mengganti elemen, kamu bisa langsung menetapkan nilai baru ke indeks tersebut.

Perbandingan lewat tabel

Melihat tabel ini, pilihan seringkali ditentukan oleh bentuk data yang kamu butuhkan di langkah berikutnya. Kalau hasilnya akan langsung dipakai sebagai objek, pilih find. Kalau akan diolah sebagai daftar, pilih filter. Kalau akan dipakai sebagai indeks, pilih findIndex.

Kesalahan yang sering muncul

Beberapa jebakan di bawah ini sering terjadi pada kode yang sudah berjalan lama dan mulai sulit dirawat.

• Memakai filter lalu mengambil [0] untuk mendapatkan satu item. Hasilnya sama dengan find, tapi seluruh array tetap diproses.
• Memakai find tapi lupa menangani undefined saat data kosong.
• Memakai findIndex dan langsung mengakses indeks tanpa mengecek -1.
• Mengira filter mengubah array asli, padahal ia mengembalikan array baru.

Pemeriksaan tipe hasil juga membantu saat data berasal dari luar, misalnya dari API. Kamu bisa memakai typeof untuk memastikan tipe data sebelum memproses lebih jauh. Jika kode pencarianmu mulai dipanggil berulang dari banyak tempat, rapikan menjadi fungsi tersendiri dan hindari kesalahan umum saat menulis fungsi JavaScript seperti parameter yang tidak konsisten.

Ringkasan

Pilih find untuk satu elemen, filter untuk banyak elemen, dan findIndex saat butuh posisi elemen. Ketiganya menerima fungsi pengujian yang sama, jadi perbedaan utama ada pada nilai kembali dan kapan proses berhenti. Menentukan bentuk data yang dibutuhkan lebih dulu akan membuat pilihanmu konsisten di seluruh kode.

Pertanyaan yang Sering Diajukan

Apakah find dan filter bisa dipakai pada array of object?

Bisa. Keduanya menerima fungsi pengujian yang memeriksa properti objek, misalnya u.id === 2. Hasil find berupa satu objek, sedangkan filter mengembalikan array of object.

Apa bedanya findIndex dan indexOf?

indexOf membandingkan nilai secara langsung dan cocok untuk array berisi string atau angka. findIndex menerima fungsi, sehingga bisa dipakai pada array of object atau kondisi yang lebih rumit.

Kalau hanya butuh satu item, mana yang paling cepat?

find dan findIndex berhenti di elemen pertama yang cocok, jadi keduanya lebih hemat daripada filter yang memeriksa seluruh elemen. Pilih find jika kamu butuh objeknya, dan findIndex jika butuh posisinya.