Method Untuk Mengolah Array di Javascript #1

Langsung saja, tanpa berbasa-basi, kali ini saya akan membahas beberapa method/fungsi untuk mengolah data array di Javascript. Kenapa array? Ya, karena saya pastikan kalian akan melakukan banyak hal yang berhubungan dengan array dan membutuhkan kiat-kiat mengolah array pada real project kalian nantinya. Misalnya, kalian ingin mengolah data dengan mensorting dari angka terkecil sampai terbesar di UI React kalian, atau mungkin kalian juga ingin meng-console data-data dari object dalam array sehingga tampil di terminal kalian, dan masih banyak lagi kegunaan metode ini nantinya.

Starter

Pertama yang harus kalian persiapkan didalam komputer kalian adalah Node dengan versi 8.9.4 atau versi terbaru yang tentunya lebih baik kita menggunakan versi LTS yang bisa kalian unduh dan install dari source ini.

Kedua buka text-editor dan terminal(terserah mau pakai iterm, hyper atau terminal lainnya) yang nantinya akan kita gunakan untuk menjalankan file index.js di Node.

Ketiga, buat folder dengan nama(terserah anda) “array_method”. Dan didalam folder ini buat folder dengan nama index.js.

Keempat, install npm difolder ini dengan mengetik npm init di terminal. Struktur folder nantinya akan terlihat seperti ini;

array_method(folder)
├── node_modules
├── index.js                    
├── package-lock.json                     
├── package.json

Kelima, install console.table sebagai modul project dependencies di folder ini dengan mengetik npm install --save console.table. console.table berfungsi untuk merubah hasil data dari object menjadi bentuk table di dalam terminal, jadi akan mempermudah kita untuk melihat hasil data. Dokumentasi nya bisa anda lihat disini. Setelah itu import module ini di baris paling atas dari file index.js. Caranya seperti ini;

require('console.table')

Keenam, siapkan beberapa data berbentuk object didalam array didalam file index.js, seperti yang saya buat dibawah ini;

Example Object Data in Array.

Ketujuh, import console.table yang telah kita install tadi di file index.js. Kita lakukan hal ini agar module dependencies yang kita install tadi dapat digunakan di file index.js.

Array.prototype.filter()

Metode filter() adalah fungsi yang memungkinkan kita untuk menampilkan element data sesuai dengan parameter yang kita inginkan. Misalnya disini kita ingin menampilkan data array team yang berumur diatas 23 tahun(saat ini tahun 2018).

example Array.prototype.filter().

Dari kode diatas, saya membuat nama variabel yang akan kita print di console.table adalah senior. Lalu variabel senior tsb saya buat menjadi sebuah object yang akan mengembalikan data dari tiap-tiap orang yang berumur diatas 23 tahun dengan nama person(ini opsional, kamu bisa menggunakan nama apapun sebagai parameter data yang ingin dikembalikan).

Atau kamu juga bisa membuat fungsi ini menjadi arrow function dari ES6 dan menerapkannya secara inline;

example Array.prototype.filter() ES6 inline.

Dan sekarang, kamu bisa running di terminal dengan mengetik node index. Maka di terminal akan keluar seperti ini;

Result of Array.prototype.filter().

Array.prototype.map()

map() berfungsi untuk memberikan metode yang memungkinkan kamu untuk memegang setiap elemen di dalam array dan menerapkan fungsi ke pada mereka. Setelah map selesai iterasi melalui array, ia akan mengembalikan array baru dengan hasil penerapan fungsi ke elemen yang disebutkan sebelumnya.

Disini kita contohkan map akan mengembalikan setiap element/data dari team dengan parameterfirstname dan lastname menjadi fullName, atau bisa kita sebut juga mengembalikan setiap nama depan dan nama belakang di data, digabungkan dan menjadi nama lengkap.

Example Array.prototype.map().

Hasilnya akan menjadi seperti ini;

Result of Array.prototype.map().

Array.prototype.sort()

sort() berfungsi sebagai metode untuk mensortir setiap data yang ingin anda tampilkan. Misalnya seperti menampilkan data sesuai abjad, atau menampilkan data nama dengan huruf depan ‘A’, dan sebagainya.

Disini kita akan mencontohkan penggunaan sort dengan menampilkan urutan umur tertua sampai yang paling muda di data team. Variable object yang saya buat disini bernama ordered, kalian bisa membuat dengan nama apapun.

Example Array.prototype.sort.

Jika kita ingin membuat fungsi nya dengan ES6 dan inline;

Example Array.prototype.sort ES6 & inline.

Dan mari kita jalankan index.js di terminal, yang akan menampilkan tahun lahir yang tertua sampai yang termuda dari data team.

Result of Array.prototype.sort().

Array.prototype.reduce()

Metode reduce() menerapkan fungsi akumulasi dari setiap elemen dalam array (dari kiri ke kanan) untuk mengkalkulasikannya menjadi satu nilai. Metode reduce() ini sifatnya hampir sama dengan forEach() apabila kamu pernah menggunakan forEach() pada project kamu sebelumnya.

Pada contoh kali ini, kita akan mencoba mengakumulasikan total gaji dari semua anggota team yang ada didalam array team.

Berikut adalah contoh jika kamu menggunakan forEach();

Example Array.prototype.forEach().

Dengan alternatif lain menggunakan metode reduce() akan membantu kamu membuat akumulasi dengan singkat;

Example Array.prototype.reduce().

Hasil di terminal akan seperti ini;

Result of Array.prototype.reduce().

Ini adalah total akumulasi dari semua gaji karyawan yang ada didalam array team.

Congratulations!

Seperti itulah kira-kira contoh dari penggunaan metode-metode array di Javascript. Masih banyak metode-metode lainnya yang akan lebih menarik dan memusingkan lagi, tetap tunggu di part selanjutnya yang akan saya terbitkan di minggu depan. Semoga membantu!