Array.find & findIndex

Analogi: Mencari Kunci yang Hilang

Bayangkan kunci motormu hilang di rumah. Kamu tidak akan menggeledah SELURUH rumah kalau kunci sudah ketemu di saku jaket: kamu BERHENTI di temuan pertama. Tapi kalau kamu butuh SEMUA koin yang tercecer, kamu harus memeriksa setiap sudut sampai habis. find adalah pencari kunci: ia memeriksa elemen satu per satu dan BERHENTI di kecocokan PERTAMA, mengembalikan elemennya langsung (bukan array). findIndex sama, tapi mengembalikan POSISInya (index), bukan elemennya. Sementara filter adalah pengumpul koin: selalu memeriksa semuanya dan mengembalikan array. Tiga alat untuk tiga kebutuhan berbeda, dan memilih yang tepat membuat kodemu lebih cepat sekaligus lebih jelas maksudnya.

Kenapa find Ada?

Skenario "cari SATU yang cocok" ada di mana-mana: cari pengguna berdasarkan id, cari produk berdasarkan kode, cari konfigurasi berdasarkan nama. Sebelum find, programmer memakai loop manual dengan break, atau memakai filter(...)[0] yang boros karena tetap memeriksa seluruh array meski sudah ketemu di awal. find mengemas pola "cari sampai ketemu lalu berhenti" menjadi satu panggilan yang efisien dan ekspresif: siapa pun membaca users.find(u => u.id === 2) langsung paham "cari satu user dengan id 2". Efisiensinya nyata di array besar: kalau target ada di posisi ke-3 dari 10.000 elemen, find berhenti di langkah ke-3, filter tetap menempuh 10.000 langkah.

Contoh 1: find dan findIndex, Sederhana

const user = [
  { id: 1, nama: "Andi" },
  { id: 2, nama: "Budi" },
  { id: 3, nama: "Citra" },
];

// find: kembalikan ELEMEN pertama yang cocok
const ketemu = user.find(u => u.id === 2);
console.log(ketemu); // { id: 2, nama: "Budi" } (object langsung!)

// findIndex: kembalikan INDEX-nya
const posisi = user.findIndex(u => u.nama === "Citra");
console.log(posisi); // 2

// Kalau tidak ada yang cocok:
console.log(user.find(u => u.id === 99));      // undefined
console.log(user.findIndex(u => u.id === 99)); // -1

Hafalkan pasangan "tidak ketemu"-nya: find mengembalikan undefined, findIndex mengembalikan -1. Dua nilai spesial ini WAJIB ditangani, karena mengakses properti dari undefined langsung error, dan memakai -1 sebagai index menghasilkan perilaku aneh.

Contoh 2: Kasus Nyata, Cari Produk dan Update Stok

findIndex bersinar saat kamu butuh POSISI untuk mengubah elemennya, misalnya mengurangi stok produk yang dibeli:

const barang = [
  { kode: "B01", nama: "Pensil", stok: 10 },
  { kode: "B02", nama: "Pulpen", stok: 5 },
  { kode: "B03", nama: "Penghapus", stok: 8 },
];

function beli(kode, jumlah) {
  // find: ambil object-nya untuk dibaca
  const item = barang.find(b => b.kode === kode);

  if (!item) {
    return "Barang " + kode + " tidak ditemukan!";
  }
  if (item.stok < jumlah) {
    return "Stok " + item.nama + " tidak cukup (sisa " + item.stok + ")";
  }

  // findIndex: ambil posisinya untuk diubah
  const idx = barang.findIndex(b => b.kode === kode);
  barang[idx].stok -= jumlah;
  return "Berhasil beli " + jumlah + " " + item.nama + ". Sisa: " + barang[idx].stok;
}

console.log(beli("B02", 2)); // sukses, stok 5 -> 3
console.log(beli("B99", 1)); // "tidak ditemukan" (aman, tidak error!)
console.log(beli("B02", 10)); // "stok tidak cukup"

Contoh ini menunjukkan pola profesional: SELALU cek hasil find sebelum dipakai. Tanpa cek if (!item), pemanggilan beli("B99", 1) akan error Cannot read properties of undefined dan menghentikan program.

Kesalahan Umum Pemula

1. Tidak menangani undefined dari find.

const user = [{ id: 1, nama: "Andi" }];

// SALAH: langsung pakai tanpa cek
const u = user.find(x => x.id === 99);
console.log(u.nama); // ERROR: Cannot read properties of undefined!

// BENAR: cek dulu
const u2 = user.find(x => x.id === 99);
if (u2) {
  console.log(u2.nama);
} else {
  console.log("User tidak ditemukan");
}

// BENAR juga: optional chaining untuk akses aman
console.log(user.find(x => x.id === 99)?.nama); // undefined (tidak error)

2. Tidak menangani -1 dari findIndex.

const barang = ["apel", "mangga"];

// SALAH: -1 dipakai sebagai index
const idx = barang.findIndex(b => b === "jeruk"); // -1
console.log(barang[idx]); // undefined (barang[-1] tidak ada!)

// BENAR: cek -1 dulu
if (idx !== -1) {
  console.log("Ketemu di index " + idx);
} else {
  console.log("Tidak ketemu");
}

3. Memakai filter(...)[0] padahal butuh satu (boros).

const besar = Array.from({ length: 10000 }, (_, i) => i);

// SALAH (boros): filter memeriksa SEMUA 10000 elemen
const caraBoros = besar.filter(n => n === 5)[0];

// BENAR (efisien): find berhenti saat ketemu
const caraHemat = besar.find(n => n === 5);
console.log(caraHemat); // 5

Hasilnya sama, tapi filter melakukan 10.000 pengecekan sementara find hanya 6. Di data kecil bedanya tak terasa, di data besar bedanya nyata.

4. Tertukar find (elemen) dan findIndex (posisi).

const user = [{ id: 1, nama: "Andi" }, { id: 2, nama: "Budi" }];

// SALAH: butuh object, malah dapat angka
const salah = user.findIndex(u => u.id === 2);
console.log(salah.nama); // undefined! (salah = 1, angka tidak punya .nama)

// BENAR: sesuaikan dengan kebutuhan
const butuhObject = user.find(u => u.id === 2);       // { id: 2, ... }
const butuhPosisi = user.findIndex(u => u.id === 2);  // 1

Ringkasan

find mengembalikan ELEMEN pertama yang cocok (atau undefined), findIndex mengembalikan INDEX-nya (atau -1), keduanya berhenti di temuan pertama sehingga efisien. filter mengembalikan ARRAY semua yang cocok dan selalu memeriksa semuanya. Pilih find untuk "cari satu" (user by id, produk by kode), filter untuk "cari semua". Dan aturan besinya: SELALU tangani kasus tidak ketemu (undefined / -1) sebelum memakai hasilnya, karena di sanalah sebagian besar error find bermula.