Array Filter JavaScript: Sintaks dan Contoh Penggunaan

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.

1. Sintaks
2. Contoh
   1. Memfilter Bilangan Genap
   2. Memfilter Objek Dalam Array
3. Perbedaan filter() dan find()

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 true (truthy). Fungsi ini menerima tiga arguman berikut:
  • elemen: elemen saat ini yang sedang diproses.
  • index (opsional): index elemen saat ini yang sedang diproses.
  • array (opsional): array sumber.
• thisValue (opsional): Nilai yang digunakan sebagai nilai this 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.

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 ]

Method ini mengembalikan array berisi elemen yang sesuai dengan kriteria tertentu, dalam hal ini bilangan genap (elemen % 2 === 0).

Karena array values 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 elemen 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 filter( ... ).

Memfilter Objek Dalam Array

Saat membuat aplikasi, filter() sering digunakan untuk memfilter objek di dalam array.

Contoh berikut memfilter objek di dalam array users dengan properti gender yang bernilai male.

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 undefined jika tidak ada elemen yang sesuai.