MulaiCode
JavaScript

JS Array Search

Pelajari cara mencari elemen dalam array JavaScript dengan berbagai metode pencarian.

JavaScript Array Search untuk Pemula

Pencarian dalam array adalah operasi yang sangat penting dalam pemrograman JavaScript. Dengan metode pencarian yang tepat, kita bisa menemukan data dengan cepat dan efisien tanpa perlu menulis banyak kode manual.

Mengapa Kita Butuh Metode Pencarian Array? 🤔

Saat bekerja dengan array yang berisi banyak data, kita sering perlu:

  • Mencari apakah elemen tertentu ada dalam array
  • Menemukan posisi (indeks) elemen dalam array
  • Mencari elemen yang memenuhi kriteria tertentu
  • Memverifikasi apakah sebagian atau semua elemen memenuhi kondisi

Metode pencarian array di JavaScript memungkinkan kita melakukan semua ini dengan mudah!

1. Metode indexOf() dan lastIndexOf()

const buah = ["Apel", "Mangga", "Pisang", "Jeruk", "Mangga"];
 
// indexOf(): Mencari dari awal array
console.log(buah.indexOf("Mangga")); // Output: 1
console.log(buah.indexOf("Durian")); // Output: -1 (tidak ditemukan)
 
// Mencari dari posisi tertentu
console.log(buah.indexOf("Mangga", 2)); // Output: 4 (mencari dari indeks 2)
 
// lastIndexOf(): Mencari dari akhir array
console.log(buah.lastIndexOf("Mangga")); // Output: 4
console.log(buah.lastIndexOf("Mangga", 3)); // Output: 1 (mencari dari indeks 3 ke belakang)

Penjelasan:

  • indexOf(item, start): Mengembalikan indeks kemunculan pertama item dalam array
  • lastIndexOf(item, start): Mengembalikan indeks kemunculan terakhir item dalam array
  • Kedua metode mengembalikan -1 jika elemen tidak ditemukan
  • Parameter start bersifat opsional, menentukan posisi awal pencarian

⚠️ Perhatian: Kedua metode menggunakan perbandingan ketat (===), jadi [1, "1"] akan dianggap sebagai nilai berbeda.

2. Metode includes()

const hewan = ["Kucing", "Anjing", "Kelinci", "Burung"];
 
// Memeriksa keberadaan elemen
console.log(hewan.includes("Anjing")); // Output: true
console.log(hewan.includes("Ikan")); // Output: false
 
// Memeriksa dari posisi tertentu
console.log(hewan.includes("Anjing", 2)); // Output: false (karena mencari dari indeks 2)

Penjelasan:

  • includes(item, start): Mengembalikan true jika array berisi elemen yang ditentukan
  • Parameter start bersifat opsional, menentukan posisi awal pencarian
  • Metode ini lebih baru dibandingkan indexOf() (diperkenalkan di ES6)
  • Lebih mudah dibaca saat hanya perlu mengetahui keberadaan elemen

✅ Tip: Gunakan includes() ketika hanya perlu tahu apakah elemen ada, dan indexOf() ketika perlu tahu posisinya.

3. Metode find() dan findIndex()

const siswa = [
  { nama: "Budi", nilai: 85 },
  { nama: "Ani", nilai: 90 },
  { nama: "Dodi", nilai: 78 },
  { nama: "Siti", nilai: 95 },
];
 
// find(): Mencari elemen berdasarkan kondisi
const siswaPintar = siswa.find((s) => s.nilai >= 90);
console.log(siswaPintar); // Output: { nama: "Ani", nilai: 90 }
 
// findIndex(): Mencari indeks elemen berdasarkan kondisi
const indeksSiswaPintar = siswa.findIndex((s) => s.nilai >= 90);
console.log(indeksSiswaPintar); // Output: 1
 
// Tidak ditemukan
const siswaGagal = siswa.find((s) => s.nilai < 60);
console.log(siswaGagal); // Output: undefined
 
const indeksSiswaGagal = siswa.findIndex((s) => s.nilai < 60);
console.log(indeksSiswaGagal); // Output: -1

Penjelasan:

  • find(callbackFn): Mengembalikan nilai elemen pertama yang memenuhi kondisi
  • findIndex(callbackFn): Mengembalikan indeks elemen pertama yang memenuhi kondisi
  • Jika tidak ada elemen yang memenuhi kondisi, find() mengembalikan undefined dan findIndex() mengembalikan -1
  • Callback function menerima tiga parameter: elemen saat ini, indeks, dan array itu sendiri

✨ Keunggulan: Sangat berguna untuk mencari dalam array objek berdasarkan properti atau kondisi kompleks.

4. Metode findLast() dan findLastIndex()

const angka = [5, 12, 8, 130, 44, 16];
 
// findLast(): Mencari dari akhir array berdasarkan kondisi
const angkaBesar = angka.findLast((num) => num > 10);
console.log(angkaBesar); // Output: 16
 
// findLastIndex(): Mencari indeks dari akhir array berdasarkan kondisi
const indeksAngkaBesar = angka.findLastIndex((num) => num > 10);
console.log(indeksAngkaBesar); // Output: 5

Penjelasan:

  • findLast(callbackFn): Mirip dengan find(), tetapi mencari dari akhir array
  • findLastIndex(callbackFn): Mirip dengan findIndex(), tetapi mencari dari akhir array
  • Metode ini relatif baru (ES2023)

⚠️ Perhatian: Pastikan browser atau lingkungan JavaScript Anda mendukung metode ini. Jika tidak, gunakan polyfill atau alternatif lain.

5. Metode filter()

const produk = [
  { nama: "Laptop", harga: 12000000, stok: 5 },
  { nama: "Smartphone", harga: 5000000, stok: 0 },
  { nama: "Kamera", harga: 8000000, stok: 3 },
  { nama: "Headphone", harga: 1500000, stok: 7 },
];
 
// Mencari semua produk dengan stok tersedia
const tersedia = produk.filter((p) => p.stok > 0);
console.log(tersedia); // Output: Array dengan 3 produk (tanpa Smartphone)
 
// Mencari produk dengan harga di bawah 5 juta
const terjangkau = produk.filter((p) => p.harga < 5000000);
console.log(terjangkau.length); // Output: 1
console.log(terjangkau[0].nama); // Output: "Headphone"
 
// Kombinasi beberapa kondisi
const rekomendasi = produk.filter((p) => p.stok > 0 && p.harga <= 8000000);
console.log(rekomendasi.map((p) => p.nama)); // Output: ["Kamera", "Headphone"]

Penjelasan:

  • filter(callbackFn): Mengembalikan array baru berisi semua elemen yang memenuhi kondisi
  • Berbeda dengan find() yang hanya mengembalikan satu elemen, filter() mengembalikan semua elemen yang cocok
  • Jika tidak ada elemen yang memenuhi kondisi, mengembalikan array kosong []

✅ Tip: Gunakan filter() saat perlu menemukan beberapa elemen, dan find() saat hanya perlu satu elemen.

6. Metode some() dan every()

const nilai = [75, 80, 92, 65, 88];
 
// some(): Memeriksa apakah ada minimal satu elemen yang memenuhi kondisi
const adaNilaiTinggi = nilai.some((n) => n >= 90);
console.log(adaNilaiTinggi); // Output: true (ada 92)
 
// every(): Memeriksa apakah semua elemen memenuhi kondisi
const semuaLulus = nilai.every((n) => n >= 60);
console.log(semuaLulus); // Output: true (semua nilai >= 60)
 
const semuaBagus = nilai.every((n) => n >= 80);
console.log(semuaBagus); // Output: false (ada nilai 75 dan 65)
 
// Contoh dengan array objek
const tim = [
  { nama: "Andi", hadir: true },
  { nama: "Budi", hadir: true },
  { nama: "Citra", hadir: false },
];
 
console.log(tim.some((anggota) => anggota.hadir)); // Output: true
console.log(tim.every((anggota) => anggota.hadir)); // Output: false

Penjelasan:

  • some(callbackFn): Mengembalikan true jika minimal satu elemen memenuhi kondisi
  • every(callbackFn): Mengembalikan true jika semua elemen memenuhi kondisi
  • Kedua metode menghentikan iterasi segera setelah hasilnya ditentukan:
    • some() berhenti ketika menemukan elemen yang memenuhi kondisi
    • every() berhenti ketika menemukan elemen yang tidak memenuhi kondisi

✨ Keunggulan: Metode ini sangat efisien untuk validasi data atau memeriksa kondisi dalam array.

7. Pencarian String dengan Array Methods

const kalimat = "JavaScript adalah bahasa pemrograman yang powerful";
const kata = kalimat.split(" ");
 
// Mencari kata yang mengandung huruf 'p'
const kataP = kata.filter((k) => k.includes("p"));
console.log(kataP); // Output: ["pemrograman", "powerful"]
 
// Mencari kata pertama yang panjangnya lebih dari 8 karakter
const kataPanjang = kata.find((k) => k.length > 8);
console.log(kataPanjang); // Output: "JavaScript"
 
// Memeriksa apakah ada kata yang diawali dengan huruf 'b'
const adaKataB = kata.some((k) => k.toLowerCase().startsWith("b"));
console.log(adaKataB); // Output: true (karena "bahasa")
 
// Membuat array kata yang dikapitalisasi
const kataKapital = kata.map((k) => k.toUpperCase());
console.log(kataKapital.join(" ")); // Output: "JAVASCRIPT ADALAH BAHASA PEMROGRAMAN YANG POWERFUL"

Penjelasan:

Contoh ini menunjukkan bagaimana kita bisa mengkombinasikan metode array dengan metode string untuk pencarian teks:

  • split() untuk memecah string menjadi array
  • filter() dengan includes() untuk mencari substring
  • find() dengan properti length untuk mencari kata dengan panjang tertentu
  • some() dengan startsWith() untuk memeriksa awalan
  • map() dengan toUpperCase() untuk transformasi

8. Pencarian Case-Insensitive

const nama = ["Andi", "Budi", "CITRA", "dodi", "Erna"];
 
// Pencarian case-sensitive (default)
console.log(nama.includes("citra")); // Output: false
console.log(nama.indexOf("citra")); // Output: -1
 
// Pencarian case-insensitive dengan indexOf
function cariCaseInsensitive(arr, item) {
  return arr.findIndex((el) => el.toLowerCase() === item.toLowerCase());
}
 
console.log(cariCaseInsensitive(nama, "citra")); // Output: 2
 
// Cara alternatif dengan filter
const hasilCitra = nama.filter(
  (n) => n.toLowerCase() === "citra".toLowerCase()
);
console.log(hasilCitra); // Output: ["CITRA"]
 
// Mencari nama yang mengandung 'i' (case-insensitive)
const namaI = nama.filter((n) => n.toLowerCase().includes("i"));
console.log(namaI); // Output: ["Andi", "Budi", "CITRA", "dodi"]

Penjelasan:

  • Metode array seperti indexOf() dan includes() bersifat case-sensitive
  • Untuk pencarian case-insensitive, kita bisa mengonversi semua string ke huruf kecil/besar dulu
  • Kita bisa membuat fungsi helper atau menggunakan method chaining untuk pencarian yang lebih fleksibel

9. Contoh Nyata: Pencarian dalam Data Peserta

const peserta = [
  { id: 101, nama: "Ahmad Rizki", nilai: { uas: 85, uts: 80, tugas: 90 } },
  { id: 102, nama: "Budi Santoso", nilai: { uas: 75, uts: 85, tugas: 80 } },
  { id: 103, nama: "Cindy Amelia", nilai: { uas: 90, uts: 92, tugas: 95 } },
  { id: 104, nama: "Dodi Pratama", nilai: { uas: 65, uts: 70, tugas: 75 } },
  { id: 105, nama: "Eka Putri", nilai: { uas: 78, uts: 82, tugas: 80 } },
];
 
// 1. Mencari peserta berdasarkan ID
function cariPeserta(id) {
  return peserta.find((p) => p.id === id);
}
console.log(cariPeserta(103)); // Output: Objek peserta Cindy
 
// 2. Menghitung rata-rata nilai peserta
function hitungRataNilai(peserta) {
  const nilai = peserta.nilai;
  return (nilai.uas + nilai.uts + nilai.tugas) / 3;
}
 
// 3. Mencari peserta dengan nilai rata-rata tertinggi
const pesertaTerbaik = peserta.reduce((terbaik, current) => {
  const nilaiTerbaik = terbaik ? hitungRataNilai(terbaik) : 0;
  const nilaiCurrent = hitungRataNilai(current);
  return nilaiCurrent > nilaiTerbaik ? current : terbaik;
}, null);
 
console.log(`Peserta terbaik: ${pesertaTerbaik.nama}`); // Output: Peserta terbaik: Cindy Amelia
 
// 4. Mencari peserta berdasarkan nama (case-insensitive)
function cariNama(keyword) {
  return peserta.filter((p) =>
    p.nama.toLowerCase().includes(keyword.toLowerCase())
  );
}
 
console.log(cariNama("ama")); // Output: Array dengan Dodi Pratama
 
// 5. Mencari peserta yang lulus (rata-rata >= 80)
const pesertaLulus = peserta.filter((p) => hitungRataNilai(p) >= 80);
console.log(`Jumlah peserta lulus: ${pesertaLulus.length}`); // Output: Jumlah peserta lulus: 3
console.log(pesertaLulus.map((p) => p.nama)); // Output: ["Ahmad Rizki", "Cindy Amelia", "Eka Putri"]

Penjelasan:

Contoh nyata ini menunjukkan bagaimana menggabungkan berbagai metode pencarian untuk:

  • Mencari objek berdasarkan ID (find())
  • Mencari nilai maksimum dengan fungsi kustom (reduce())
  • Pencarian teks parsial case-insensitive (filter() dengan includes())
  • Memfilter berdasarkan kalkulasi (filter() dengan fungsi helper)

Ini menggambarkan fleksibilitas metode pencarian array JavaScript dalam aplikasi nyata.

10. Tips untuk Pencarian Array yang Efektif

✅ Lakukan:

  • Gunakan includes() untuk pemeriksaan keberadaan elemen sederhana
  • Gunakan find() saat hanya perlu satu hasil dan filter() saat perlu banyak hasil
  • Gunakan some() dan every() untuk validasi data yang ringkas
  • Pertimbangkan case-sensitivity saat mencari string
  • Kombinasikan metode array untuk pencarian kompleks

❌ Hindari:

  • Jangan gunakan loop for tradisional jika bisa menggunakan metode array
  • Hindari mengulangi iterasi array yang sama berkali-kali (simpan hasil di variabel)
  • Jangan lupa bahwa pencarian case-sensitive adalah default ("A" tidak sama dengan "a")
  • Jangan mengabaikan nilai pengembalian dari metode pencarian (-1, undefined, [])

Latihan Singkat

Pertanyaan 1:

Apa output dari kode berikut?

const arr = [10, 20, 30, 40, 50];
console.log(arr.indexOf(30) !== -1);
console.log(arr.includes(60));

Petunjuk: Perhatikan nilai yang dikembalikan oleh indexOf() dan includes().

Jawaban: Output adalah true dan false (karena 30 ada dalam array, tetapi 60 tidak ada)

Pertanyaan 2:

Bagaimana cara mencari semua nama pengguna yang mengandung huruf "a" (case-insensitive) dari array berikut?

const users = ["John", "Alice", "ANNA", "Bob", "David"];

Petunjuk: Gunakan filter() dengan kombinasi metode string yang tepat.

Jawaban:

const result = users.filter((user) => user.toLowerCase().includes("a"));
console.log(result); // Output: ["Alice", "ANNA", "David"]

JS Array Methods

Pelajari cara menggunakan berbagai metode array di JavaScript untuk manipulasi data yang efektif.

JS Array Sorting

Pelajari cara mengurutkan array di JavaScript dengan berbagai metode dan teknik pengurutan.

On this page