Cara menggunakan javascript array filter

Dalam membuat aplikasi seperti CRUD dengan JavaScript, kita sangat ditekankan untuk menguasi teknik manipulasi array, kenapa? karena data yang kita handle berbentuk json yakni perpaduan antara Array dan Object.

Untuk menghapus elemet pada array kita bisa menggunakan Array.filter(). Contohnya seperti berikut:

Pada baris ke-1 kita membuat variable array yang menampung 4 element (umur).

Baris ke-3 sampai ke-5 kita melakukan filter, dimana umur 18 ke bawah akan dihapus.

Dan baris ke-7 kita cekat.

Selain Array.filter(), ada method lain yang sangat penting yakni array.concat(). Kebalikan dari array.filter, array.concat digunakan untuk menambahkan element pada array. Contoh:

Sebagai seorang Software Developer kita sering sekali menggunakan array dalam menyimpan dan memanipulasi data, angka, objects, string, dll. Untuk menggunakan array itu sendiri, selama ini kita sering menggunakan perulangan for untuk melakukan perintah di tiap elemen yang ada di array tersebut.

Pada tahun 2011, Javascript memperkenalkan beberapa fitur yang di ambil dari functional programming yaitu map, reduce dan filter sebagai alternatif dalam merubah elemen di dalam array, mencari akumulasi nilai, atau membuat array baru berdasarkan kondisi yang sudah ditetapkan. Metode ini cukup membantu software developer menulis kode yang lebih simple dan juga membuat kode lebih mudah dibaca.

Perulangan Tradisional

Berikut adalah contoh kode dimana kita menggunakan perulangan (looping) for untuk membuang angka ganjil di dalam suatu array

Kita bisa melihat kode ini melintasi array dan memasukan elemen (angka) yang habis dibagi 2 (angka genap) ke array yang baru. Untuk memahami kode ini, kita harus melihat 5 hal.

1. var i = 0 (mulai dari sisi kiri array atau dari index 0)
2. i < array.length (berhenti di sisi kanan array atau index terakhir)
3. i++ (maju 1 index untuk tiap perulangan)
4. array[i] % 2 === 0 (melakukan pengecekan jika nilai dari elemen habis dibagi 2 atau bilangan genap)
5. arrayBaru.push (array[i]) (memasukan elemen kedalam array baru, kita harus memastikan arrayBaru ini sudah ada atau menginisiasikan array ini terlebih dahulu)

Kita harus mengecek 5 baris kode untuk memahami apa dilakukan oleh kode ini dalam 1 perulangan for

Pendekatan Functional

Dengan menggunakan fitur bawaan Javascript filter() , kita bisa menulis kode dengan fungsi serupa tapi dengan baris kode yang lebih sedikit.

Lebih simpel dan mudah dimengerti

mari kita bandingkan dengan kode sebelumnya.

1. langkah #1 , #2, #3 tidak diperlukan karena filter() sudah melakukannya secara otomatis
2. langkah #4 tetap diperlukan tapi tanpa tambahan if(…)
3. langkah #5 , kita tidak perlu lagi memastikan bahwa arrayBaru ini sudah ada karena filter() akan mengembalikan array baru tanpa merubah nilai array yang sudah ada sebelumnya (side-effects)

Jadi bisa disimpulkan bahwa map, reduce dan filter membuat kode lebih simpel, tanpa side-effects dan lebih mudah dipahami.

mari kita lihat satu-persatu contoh dari map, reduce, dan filter

map()

Biasa digunakan untuk : merubah semua elemen di dalam suatu array menjadi elemen dengan nilai yang baru.

Contoh : merubah semua bilangan desimal menjadi bilangan biner (basis 10 ke basis 2).

Apa yang dilakukan : Melintasi array dari kiri ke kanan dan memanggil fungsi callback ke setiap elemen. Setelah semua elemen berhasil dilintasi, fungsi map() mengembalikan array baru dengan elemen-elemen yang baru.

array.map( function(element, index, array) {
    ...
   }, thisArgument);

Parameter :

1. element (nilai dari elemen)
2. index (index dari tiap lintasan, dari kiri ke kanan ( 0 ke N ) )
3. array (array semula yang memanggil fungsi ini)
4. thisArgument ( Opsional, object yang akan di arahkan sebagai this di dalam fungsi callback )

reduce()

Biasa digunakan untuk : Mengakumulasikan atau mengurangi nilai berdasarkan elemen di dalam array.

Contoh : Menjumlahkan penduduk Bali dari tiap kabupaten/kota pada tahun 2014

Apa yang dilakukan : Mirip seperti map() , fungsi ini melintasi array dari kiri ke kanan dan memanggil fungsi callback ke setiap elemen. Nilai yang di kembalikan adalah berupa akumulasi nilai melalui tiap callback. Setelah semua elemen dilintasi, reduce() akan mengembalikan nilai akumulasi.

array.reduce(function(value, element, index, array) {
 …
 }, initialValue);

Parameter :

1. value (nilai yang di akumulasikan pada tiap callback)
2. element (nilai dari element)
3. index (index dari tiap lintasan, dari kiri ke kanan ( 0 ke N ) )
4. array (array semula yang memanggil fungsi ini)
5. initialValue ( Opsional, nilai yang digunakan sebagai nilai awal di callback yang pertama (index 0) )

filter()

Biasa digunakan untuk : Membuang elemen dalam array berdasarkan kondisi yang ditetapkan.

Contoh : membuang elemen yang berupa angka ganjil

Apa yang dilakukan : Mirip seperti map() , fungsi ini melintasi array dari kiri ke kanan dan memanggil fungsi callback ke setiap elemen. Nilai yang dikembalikan harus dalam bentuk boolean untuk menentukan apakah elemen tersebut akan di disimpan atau dibuang. Setelah semua elemen dilintasi, filter() akan mengembalikan array baru dengan semua elemen yang mengembalikan nilai true.

Parameter :

Paramater sama dengan fungsi map()

Kekurangan

map, reduce, dan filter bukanlah silver bullet dalam melakukan perulangan, beberapa kekurangan nya adalah sebagai berikut.

• Performance
  Dari sisi performance , map, reduce, dan filter masih dibawah perulangan for. Disarankan untuk menggunakan for ketika kira harus memproses array dengan elemen yang cukup banyak (contoh : lebih dari 1000 elemen)
• Perulangan kompleks
  Masih lebih cocok menggunakan for dalam perulangan yang kompleks, misalkan harus menghentikan ( break ) proses perulangan ketika suatu kondisi tercapai.

Penutup

Dalam postingan kali ini kita membahas tentang penggunaan map(), reduce(), dan filter() untuk menulis kode yang lebih mudah dipahami dan mengurangi side-effects dalam software yang kita tulis. semoga artikel ini bermanfaat dan silahkan tinggalkan komentar dibawah ini.

“Artikel ini sangat terinspirasi oleh artikel https://danmartensen.svbtle.com/javascripts-map-reduce-and-filter yang ditulis oleh Dan Martensen “

Map : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Reduce : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Filter : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Apa itu array filter?

Apa itu Map di JavaScript?

Apa itu Reduce di JavaScript?

Method apa yang dapat kita gunakan untuk memilah elemen array berdasarkan kondisi tertentu dan akan membuat sebuah array baru?