Penggunaan map, filter, dan reduce Javascript

Search for a command to run...

No comments yet. Be the first to comment.
Waktu dapet kerjaan pertama sebagai front-end dev di dusdusaan.com (2019), aku dikasih project pake React, seingat gue aplikasinya tentang reseller dimana fitur yg saya kerjakan adalah tentang point dan event para reseller. Jujur aja, waktu itu aku b...

Awal mula gue pake TypeScript itu sebenernya bukan karena inisiatif sendiri, tapi karena kepepet. Waktu itu kantor lagi ngembangin dashboard chatbot buat tim CS, dan project-nya udah jalan duluan pake TypeScript. Gue yang baru masuk tim, langsung dis...

Javascript

Terkadang kita mendapatkan data bilangan misal response saat nge-hit API ke backend kita sendiri atau saat menggunakan third-party API anggap saja Xendit atau Midtrans tetapi berbentuk string. Seperti contoh dibawah ini. { "data": { "total_bela...

Cerita Mentor

Metode ini bekerja dengan mendefinisikan titik awal. Ketika metode ini mengulangi setiap nilai, titik awal itu dimodifikasi dan diturunkan.
Contoh untuk menghitung sumbangan amal yang telah dilakukan oleh anak kelas XII RLP 2 SMK Negeri 2 Guguak Kabupaten Limapuluh Kota Sumatera Barat.
Kita akan belajar dan memahami cara menggunakan method .map(), .filter(), dan .reduce(), untuk membantu mempermudah loop atau perulangan dengan melakukan beberapa pernyataan lain.
Method .map() digunakan ketika Anda ingin:
Mari kita gunakan contoh sederhana penghitungan pajak penjualan berdasarkan serangkaian harga.
const harga = [19.99, 4.95, 25, 3.5];
let hargaSekarang = [];
for (let i = 0; i < harga.length; i++) {
hargaSekarang.push(harga[i] * 1.06);
}
console.log(hargaSekarang);
// [ 21.1894, 5.247000000000001, 26.5, 3.71 ]
Kami dapat mencapai hasil yang sama menggunakan .map():
const harga = [19.99, 4.95, 25, 3.5];
let hargaSekarang = harga.map((h) => h * 1.06);
console.log(hargaSekarang);
// [ 21.1894, 5.247000000000001, 26.5, 3.71 ]
Method .map() diatas juga bisa dituliskan dengan cara berikut:
const harga = [19.99, 4.95, 25, 3.5];
let hargaSekarang = harga.map((h) => {
return h * 1.06;
});
console.log(hargaSekarang);
// [ 21.1894, 5.247000000000001, 26.5, 3.71 ]
Method ini gunanya untuk memfilter dengan mengecek true atau false pernyataan yang dimasukkan saat perulangan.
Mari kita gunakan contoh menampilkan hanya bilangan bulat ganjil. Kita gunakan operator modulus (%) untuk menghitung sisa pembagian dengan 2. Ketika sisanya sama dengan 1, kita tahu jumlahnya ganjil.
const bilangan = [1, 2, 3, 4, 5, 6, 7, 8];
let ganjil = [];
for (let i = 0; i < bilangan.length; i++) {
if (bilangan[i] % 2 == 1) {
ganjil.push(bilangan[i]);
}
}
console.log(ganjil);
// [ 1, 3, 5, 7 ]
Hampir sama dengan method .map(), setiap perulangan memberikan nilai balik yang dapat diteruskan atau dikelola lagi.
const bilangan = [1, 2, 3, 4, 5, 6, 7, 8];
let ganjil = bilangan.filter((num) => num % 2);
console.log(ganjil);
// [ 1, 3, 5, 7 ]
Kamu dapat mengubah contoh diatas dengan menggunakan
returnseperti.map()
Akhirnya, kita sampai pada .reduce(), Metode ini bekerja dengan mendefinisikan titik awal. Ketika metode ini mengulangi setiap nilai, titik awal itu dimodifikasi dan diturunkan.
Contoh untuk menghitung sumbangan amal yang telah dilakukan oleh anak kelas XII RLP 2
const sumbangan = [1000, 2000, 1000, 8000, 7500];
let total = 0;
for (let i = 0; i < sumbangan.length; i++) {
total += sumbangan[i];
}
console.log(total);
// 19500
Berbeda dengan .map() dan .filter(), callback method .reduce() memerlukan dua parameter: akumulator dan nilai saat ini. Akumulator akan menjadi parameter pertama dan merupakan nilai “pass it down”.
const sumbangan = [1000, 2000, 1000, 8000, 7500];
let total = sumbangan.reduce((total, sumbang) => {
return total + sumbang;
});
console.log(total);
// 19500
Bisa juga menggunakan parameter kedua sebagai nilai yang ditambahkan saat perulangan selesai. Misalkan sumbangan yang telah terkumpul selain XII RPL 2 adalah sebanyak 450000, maka kita akan menghitung jumlah sumbngan semua siswa di SMK Negeri 2 Guguak.
const sumbangan = [1000, 2000, 1000, 8000, 7500];
let total = sumbangan.reduce((total, sumbang) => {
return total + sumbang;
}, 450000);
console.log(total);
// 469500
Itulah secara sederhana penggunaan method .map(), .filter(), dan .reduce() pada javascript.