filter() merupakan method array di JavaScript yang berfungsi untuk mencari semua elemen di dalam array yang sesuai dengan kriteria tertentu.
Method ini mengembalikan array baru yang berisi elemen yang sesuai dengan kriteria yang dicari atau lulus pengujian fungsi callback.
Mirip seperti find(), alih-alih mengembalikan satu elemen, filter() mengembalikan semua elemen.
Method ini mengembalikan array baru, tidak mengubah array asli atau sumber.
Mari kita pelajari lebih lanjut method array filter() mulai dari sintaks dan contoh penggunaannya.
Sintaks
// Arrow function filter((elemen, index, array) => { ... }) // Callback function filter(callbackFn, thisValue)Parameter
- callbackFn: fungsi untuk menguji setiap elemen array, agar elemen sesuai kriteria, fungsi ini harus mengembalikan nilai const values = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const value = values.filter((elemen) => elemen % 2 === 0);
console.log(value); // [ 2, 4, 6, 8 ]
0 (const values = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const value = values.filter((elemen) => elemen % 2 === 0);
console.log(value); // [ 2, 4, 6, 8 ]
1). Fungsi ini menerima tiga arguman berikut:
- const values = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const value = values.filter((elemen) => elemen % 2 === 0); console.log(value); // [ 2, 4, 6, 8 ] 2: elemen saat ini yang sedang diproses.
- const values = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const value = values.filter((elemen) => elemen % 2 === 0); console.log(value); // [ 2, 4, 6, 8 ] 3 (opsional): index elemen saat ini yang sedang diproses.
- const values = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const value = values.filter((elemen) => elemen % 2 === 0); console.log(value); // [ 2, 4, 6, 8 ] 4 (opsional): array sumber.
- const values = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const value = values.filter((elemen) => elemen % 2 === 0); console.log(value); // [ 2, 4, 6, 8 ] 5 (opsional): Nilai yang digunakan sebagai nilai const values = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const value = values.filter((elemen) => elemen % 2 === 0); console.log(value); // [ 2, 4, 6, 8 ] 6 saat callbackFn dieksekusi.
Nilai Kembalian
Mengembalikan array baru yang berisi semua elemen yang lulus pengujian fungsi callback atau sesuai kriteria.
Jika tidak ada elemen yang sesuai kriteria, method ini mengembalikan array kosong.
Contoh
Memfilter Bilangan Genap
Mari kita gunakan contoh sederhana, mencari bilangan genap di dalam array.
Method ini mengembalikan array berisi elemen yang sesuai dengan kriteria tertentu, dalam hal ini bilangan genap (const values = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const value = values.filter((elemen) => elemen % 2 === 0); console.log(value); // [ 2, 4, 6, 8 ] 8).
Karena array const values = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const value = values.filter((elemen) => elemen % 2 === 0); console.log(value); // [ 2, 4, 6, 8 ] 9 memiliki lebih dari satu bilangan genap maka semuanya akan dimasukkan ke dalam array.
Berbeda dengan find() yang hanya mengembalikan elemen pertama dan tidak dimasukkan ke array.
Method ini dieksekusi sebanyak jumlah elemen array, oleh karena itu nilai argumen const values = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const value = values.filter((elemen) => elemen % 2 === 0); console.log(value); // [ 2, 4, 6, 8 ] 2 berubah-ubah secara berurutan mulai dari elemen array pertama hingga akhir.
Artinya kita di sini menguji setiap elemen array.
Kita bisa menggunakan beragam jenis fungsi termasuk anonymous function expression sebagai callback, fungsi callback dapat dideklarasikan di luar fungsi dan memasukkannya ke parameter const users = [ { name: 'budi', age: 23, gender: 'male', }, { name: 'nanda', age: 20, gender: 'female', }, { name: 'ucup', age: 45, gender: 'male', }, ]; const usersMale = users.filter((user) => user.gender === 'male'); console.log(usersMale); /* output: [ { name: 'budi', age: 23, gender: 'male' }, { name: 'ucup', age: 45, gender: 'male' } ] */ 2.
Memfilter Objek Dalam Array
Saat membuat aplikasi, filter() sering digunakan untuk memfilter objek di dalam array.
Contoh berikut memfilter objek di dalam array const users = [ { name: 'budi', age: 23, gender: 'male', }, { name: 'nanda', age: 20, gender: 'female', }, { name: 'ucup', age: 45, gender: 'male', }, ]; const usersMale = users.filter((user) => user.gender === 'male'); console.log(usersMale); /* output: [ { name: 'budi', age: 23, gender: 'male' }, { name: 'ucup', age: 45, gender: 'male' } ] */ 4 dengan properti const users = [ { name: 'budi', age: 23, gender: 'male', }, { name: 'nanda', age: 20, gender: 'female', }, { name: 'ucup', age: 45, gender: 'male', }, ]; const usersMale = users.filter((user) => user.gender === 'male'); console.log(usersMale); /* output: [ { name: 'budi', age: 23, gender: 'male' }, { name: 'ucup', age: 45, gender: 'male' } ] */ 5 yang bernilai const users = [ { name: 'budi', age: 23, gender: 'male', }, { name: 'nanda', age: 20, gender: 'female', }, { name: 'ucup', age: 45, gender: 'male', }, ]; const usersMale = users.filter((user) => user.gender === 'male'); console.log(usersMale); /* output: [ { name: 'budi', age: 23, gender: 'male' }, { name: 'ucup', age: 45, gender: 'male' } ] */ 6.
const users = [ { name: 'budi', age: 23, gender: 'male', }, { name: 'nanda', age: 20, gender: 'female', }, { name: 'ucup', age: 45, gender: 'male', }, ]; const usersMale = users.filter((user) => user.gender === 'male'); console.log(usersMale); /* output: [ { name: 'budi', age: 23, gender: 'male' }, { name: 'ucup', age: 45, gender: 'male' } ] */Perbedaan filter() dan find()
Secara sintaks, kedua method identik, yang perlu diperhatikan adalah nilai kembalian dan jumlah elemen yang dikembalikan.
filter() selalu mengembalikan array terlepas dari apakah elemen sesuai kriteria atau tidak.
Semua elemen tersebut dimasukkan ke dalam array, atau mengembalikan array kosong jika tidak ada yang sesuai.
find() hanya mengembalikan satu elemen pertama meskipun array memiliki banyak elemen yang sesuai kriteria, atau filter()1 jika tidak ada elemen yang sesuai.