JavaScript Find Array: Sintaks dan Contoh Penggunaan

find() merupakan method array di JavaScript yang berfungsi untuk mencari elemen tertentu dalam array yang sesuai dengan fungsi pengujian yang disediakan.

Dengan method ini Anda bisa mencari satu elemen tertentu di dalam array berdasarkan kriteria yang ditentukan.

Jika ada lebih dari satu elemen yang sesuai dengan kriteria, maka elemen pertama yang akan digunakan.

Jika tidak ada elemen yang sesuai, method ini mengembalikan nilai undefined.

Mari kita pelajari lebih lanjut mengenai method array find() mulai dari sintaks hingga contoh penggunaannya.

1. Sintaks
2. Contoh
   1. Contoh Sederhana
   2. Mencari Objek Dalam Array

Sintaks

// Arrow function
find((elemen, index, array) => { ... })

// Callback function
find(callbackFn, thisValue)

Parameter

• callbackFn: merupakan fungsi untuk mengeksekusi setiap elemen dalam array, agar mengembalikan elemen yang sesuai kriteria, fungsi ini harus mengembalikan nilai true (truthy). Fungsi ini menerima 3 argumen berikut:
  • elemen: elemen saat ini dalam array.
  • index (opsional): indeks elemen saat ini dalam array.
  • array (opsional): array sumber.
• thisValue (opsional): nilai yang diteruskan ke fungsi untuk digunakan sebagai nilai this, default undefined.

Nilai Kembalian

Mengembalikan nilai yang sesuai dengan fungsi pengujian, jika ada lebih dari satu nilai maka nilai pertama yang digunakan.

Jika tidak ada nilai yang sesuai, maka undefined dikembalikan.

Contoh

Contoh Sederhana

Contoh berikut mencari nilai di dalam array values yang kurang dari 5.

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

const value = values.find((elemen) => elemen < 5);

console.log(value); // 1

Mengapa hanya 5 yang dikembalikan? karena 1 adalah elemen pertama yang ditemukan.

Kita hanya menggunakan argumen elemen pada fungsi callback, karena index dan array bersifat opsional dan disini kita memang tidak membutuhkannya.

Kita bisa menamai argumen elemen dengan apa pun sesuai keinginan.

Fungsi callback dipanggil untuk setiap elemen array, artinya jika ada enam elemen dan semuanya tidak memenuhi kriteria maka fungsi ini dipanggil enam kali.

Oleh karena itu nilai argumen elemen berubah-ubah secara berurutan sesuai dengan elemen array saat ini.

Kode di atas menggunakan arrow function, kita juga bisa mengekstrak fungsi callback ke luar parameter find( ... ), seperti ini.

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

const lessThan5 = (elemen) => elemen < 5;

const value = values.find(lessThan5);

console.log(value); // 1

Atau, menggunakan function declaration seperti ini.

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

function lessThan5(elemen) {
  return elemen < 5;
}

const value = values.find(lessThan5);

console.log(value); // 1

Atau, bisa juga menggunakan anonymous function expression seperti ini.

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

const value = values.find(function (elemen) {
  return elemen < 5;
});

console.log(value); // 1

Arrow function biasanya lebih sering digunakan karena lebih ringkas, kecuali kita membutuhkan nilai this. Kalau masih bingung, pelajari lagi materi mengenai fungsi.

Mencari Objek Dalam Array

Saat membuat aplikasi, find() biasanya digunakan untuk mencari objek yang sesuai dengan kriteria tertentu di dalam array.

Contoh berikut mencari objek dengan properti name yang bernilai budi.

const users = [
  {
    name: 'budi',
    age: 23,
    gender: 'male',
  },
  {
    name: 'nanda',
    age: 20,
    gender: 'female',
  },
  {
    name: 'ucup',
    age: 45,
    gender: 'male',
  },
];

const budi = users.find((user) => user.name === 'budi');

console.log(budi); // { name: 'budi', age: 23, gender: 'male' }