Metode filter() adalah fungsi array di JavaScript yang digunakan untuk membuat array baru dari elemen-elemen yang memenuhi kondisi tertentu, diberikan dalam fungsi callback.

Metode ini memberikan kita kemampuan untuk efisien memilah dan memproses data dalam array.

Dalam artikel ini, kita akan menggali lebih dalam tentang filter JavaScript, menjelaskan bagaimana cara kerjanya dan memberikan contoh-contoh praktis yang bisa langsung kamu terapkan.

Fungsi Dasar Filter JavaScript

Fungsi filter() dalam JavaScript memungkinkan kamu untuk membuat array baru dari array yang sudah ada, berdasarkan kriteria tertentu. Fungsi ini dimanfaatkan untuk memanipulasi data dan membuat kode lebih efisien sekaligus mudah dibaca.

Misalnya, kamu memiliki array ages yang berisi berbagai umur. Dengan menggunakan filter(), kamu bisa dengan mudah mendapatkan array baru yang hanya berisi umur di atas 18 tahun. Hal ini dilakukan dengan memberikan fungsi yang mengecek setiap elemen dalam array. Jika elemen memenuhi kriteria (dalam hal ini, umur di atas 18), elemen tersebut akan masuk ke dalam array baru.

Selain itu, filter() juga berguna saat bekerja dengan array objek. Kamu bisa memfilter array berdasarkan properti tertentu dari objek. Sebagai contoh, jika kamu memiliki array objek yang masing-masing merepresentasikan user dengan atribut seperti nama, umur, dan pekerjaan, kamu bisa menggunakan filter() untuk mendapatkan array baru yang hanya berisi user dengan pekerjaan tertentu atau umur di atas batas tertentu.

Penting untuk diingat bahwa filter() tidak mengubah array asli. Artinya, kamu bisa melakukan filter tanpa khawatir merusak data asli. Selain itu, filter() sangat cocok untuk dikombinasikan dengan metode lain seperti map() dan reduce(), memungkinkan kamu melakukan manipulasi data yang lebih kompleks dengan cara yang lebih clean.

Cara Kerja Filter

Cara kerja dari metode filter() JavaScript sebenarnya cukup sederhana:

• filter() mengiterasi setiap elemen dalam array.
• Untuk setiap elemen, filter() menjalankan fungsi callback yang diberikan.
• Jika fungsi callback mengembalikan nilai true, elemen tersebut akan dimasukkan ke dalam array baru.
• Jika fungsi callback mengembalikan false, elemen tersebut diabaikan.
• Setelah semua elemen diperiksa, filter() mengembalikan array baru berisi semua elemen yang memenuhi kondisi.

Perbedaan filter() dengan Metode Array Lainnya

filter() memiliki beberapa karakteristik unik yang membedakan dari metode array lainnya di JavaScript:

• Selektivitas: berbeda dengan metode seperti forEach() atau map() yang mengaplikasikan fungsi callback ke setiap elemen array, filter() hanya memilih elemen yang memenuhi kondisi tertentu. Hal ini membuat filter() ideal untuk situasi di mana kamu perlu mengekstrak subset data dari kumpulan data yang lebih besar.
• Immutability: filter() tidak mengubah array asli. Sebaliknya, metode ini menghasilkan array baru. Karakteristik ini penting dalam pemrograman fungsional, di mana kita menghindari perubahan pada data asli.
• Kombinasi dengan metode lain: filter() sering digunakan bersama dengan metode lain seperti map() dan reduce(). Ini memungkinkan pembuatan pipeline pemrosesan data yang efisien karena data disaring terlebih dahulu dengan filter(), kemudian diubah dengan map(), lalu diakumulasi atau dikombinasikan dengan reduce().
• Penggunaan dalam kasus yang lebih kompleks: berbeda dengan metode seperti indexOf() atau find() yang biasanya dipakai untuk mencari elemen sederhana, filter() bisa diterapkan untuk kasus lebih kompleks, seperti mencari elemen yang memenuhi beberapa kondisi atau bekerja dengan array objek.

Contoh Filter JavaScript dalam Pekerjaan Sehari-hari

Metode filter() bekerja dengan mengambil sebuah array dan menerapkan fungsi callback pada setiap elemennya. Fungsi callback ini harus mengembalikan nilai boolean (true atau false).

Jika fungsi callback mengembalikan true untuk suatu elemen, elemen tersebut akan dimasukkan ke dalam array baru. Jika false, elemen tersebut tidak akan dimasukkan.

Bayangkan kamu memiliki array berisi informasi tentang beberapa buku. Kamu ingin membuat daftar buku yang hanya berisi buku-buku dengan rating di atas 4.

Dalam contoh ini, filter() dimanfaatkan untuk mengiterasi melalui setiap objek dalam array buku. Fungsi callback (b => b.rating > 4) memeriksa apakah properti rating dari setiap buku lebih besar dari 4. Jika ya, buku tersebut dimasukkan ke dalam array baru bukuRatingTinggi.

Output dari kode di atas akan menjadi array baru yang hanya berisi buku dengan rating lebih dari 4.

Penutup

Di artikel ini, kita telah melihat bagaimana filter() bekerja. Filter JavaScript memungkinkan untuk membuat array baru dari elemen-elemen yang memenuhi kondisi tertentu, tanpa mengubah array asli. Kita juga telah membedah bagaimana filter() berbeda dari metode array lainnya, dengan kemampuannya untuk selektif memilih elemen dan mendukung prinsip pemrograman fungsional melalui immutability.

Dengan filter(), manipulasi data menjadi lebih mudah, kode lebih clean, dan pemrograman lebih menyenangkan.

FAQ (Frequently Asked Question)

Bagaimana cara memfilter array berdasarkan lebih dari satu kondisi?

Kamu dapat memfilter array berdasarkan lebih dari satu kondisi dengan menggabungkan kondisi-kondisi tersebut dalam fungsi callback. Misalnya, array.filter(elemen => kondisi1 && kondisi2) akan mengembalikan elemen yang memenuhi kedua kondisi tersebut.

Apa perbedaan antara filter() dan map()?

filter() digunakan untuk memilih elemen dari array yang memenuhi kondisi tertentu, sedangkan map() berfungsi untuk mengubah setiap elemen dalam array dan mengembalikan array baru dengan elemen yang telah diubah.

Bagaimana cara menangani elemen null atau undefined dengan filter()?

Dalam fungsi callback filter(), kamu dapat menambahkan kondisi untuk mengecek apakah elemen tidak null atau undefined. Contohnya, array.filter(elemen => elemen !== null && elemen !== undefined) akan menghilangkan elemen null atau undefined dari array hasil.

Cara lain dapat dilakukan menggunakan ekspresi elemen => elemen && kondisiLain. Sebagai contoh, dengan elemen => elemen && elemen.nilai > 4, kode akan melakukan dua hal. Pertama, mengecek apakah elemen bukan falsy value (mencakup null dan undefined). Kedua, menyaring item yang memiliki nilai lebih dari 4. Pendekatan ini membuat kode lebih efisien dan mudah dibaca, memastikan hanya elemen yang valid dan memenuhi kondisi tambahan yang akan disertakan dalam array hasil.