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.
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 nilaitrue
(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 nilaithis
, defaultundefined
.
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' }