Fitur while pada automation tentu memudahkan kita untuk membaca logikanya menjadi lebih mudah. Namun ada kalanya kita memerlukan fitur low code javascript untuk mengeksekusi logika yang cukup kompleks. ECMAScript untuk javascript tentu saja berkembang setiap tahunnya dan berbagai fitur dan perubahannya sangat memudahkan developer yang membangun aplikasi dari nol. Namun tidak semua fitur pada javascript disupport pada OOS, maka di artikel ini aku listing fungsi looping yang common banget di javascript dan sudah kutes di visprognya OOS:
- For loop biasa
- For Each, prototype function pada javascript yang common banget dipakai supaya gk perlu kita ketik manual for loop beserta variabel iterasinya.
- Map, prototype function pada javascript untuk memetakan array menjadi bentuk baru sesuai dengan nilai return dari callback function.
- Filter, prototype function pada javascript untuk memfilter array menjadi array baru sesuai dengan nilai return berupa true atau false ada callback function
- Reduce, fungsi ini bisa mengakomodir semua fungsi di atas, karena pada dasarnya kita sendiri yang define bagaimana logic yang mau kita gunakan pada callback reducer.
Biar gak terlalu pusing di definisi, langsung aja deh kita ke contoh kasus pada variabel belanjaan seperti berikut:
var belanjaan = [
{
id: '570oxnqxq',
nama: 'Kurma (Pcs)',
tipe: 'Makanan',
harga: 15000,
kuantitas: 3,
},
{
id: 'sadjqZ12y',
nama: 'Kripik Singkong',
tipe: 'Makanan',
harga: 10000,
kuantitas: 2,
},
{
id: 'hqz3fff5w',
nama: 'Masker (isi 3)',
tipe: 'Aksesoris',
harga: 10000,
kuantitas: 2,
}
]
Totalin harga menggunakan for loop biasa
var total = 0;
for (i = 0; i < belanjaan.length; i++) {
total += belanjaan[i].harga * belanjaan[i].kuantitas;
}
// maka nilai total jadinya 85000
Totalin harga menggunakan for each
var total = 0;
belanjaan.forEach(
function (item) {
total += item.harga * item.kuantitas
}
);
// maka nilai total jadinya 85000
Ohiya, untuk for each ini sebenernya nerima dua parameter ya di callbacknya yaitu item dan index si array nya. Tapi disini gak aku tulis indexnya karena gak kubutuhin (kecuali emang dibutuhin dikasusnya).
Totalin harga menggunakan reduce
fungsi recuce memerlukan fungsi callback berisi dua parameter yaitu:
- callback, yang berisi dua parameter:
- carry, nilai yang bersumber dari initial value dan di panggil pada setiap iterasi. kita bebas mau ngapain aja ke si carrynya, mau ditambah dikurang atau apapun itu. Dengan catatan kita harus return carry pada setiap iterasi.
- item, item dari array yang diiterasi
- initial value, nilai awal yang mau kita tentuin. Kasusnya disini 0 untuk nilai awal si total.
var total = belanjaan.reduce(
function (carry, item) {
// carry asalnya dari initial value (yaitu 0)
// tapi akan terus berubah selama perulangan
// jika diberikan operasi tertentu dan di return
carry += item.harga * item.kuantitas;
return carry;
},
0 // initial value si total
);
// maka nilai total jadinya 85000 yang berasal dari
// nilai carry pada setiap perulangan
Ngedapetin array of id dari array belanjaan menggunakan Map
var ids = belanjaan.map(
function (item) {
return item.id;
}
);
// maka outputnya ['570oxnqxq', 'sadjqZ12y', 'hqz3fff5w']
Ngedapetin nama belanjaan dari array belanjaan menggunakan Map
var ids = belanjaan.map(
function (item) {
return item.nama;
}
);
// maka outputnya ['Kurma (Pcs)', 'Kripik Singkong', 'Masker (isi 3)']
Filter belanjaan yang tipenya makanan saja
var belanjaan_makanan = belanjaan.filter(
function (item) {
return item.tipe.toLowerCase() === 'makanan';
}
);
maka outputnya:
[
{
"id": "570oxnqxq",
"nama": "Kurma (Pcs)",
"tipe": "Makanan",
"harga": 15000,
"kuantitas": 3
},
{
"id": "sadjqZ12y",
"nama": "Kripik Singkong",
"tipe": "Makanan",
"harga": 10000,
"kuantitas": 2
}
]
Totalin belanjaan yang tipenya makanan saja
Menggunakan for loop
var total = 0;
for (i = 0; i < belanjaan.length; i++) {
if (belanjaan[i].tipe.toLowerCase() === 'makanan') {
total += belanjaan[i].harga * belanjaan[i].kuantitas;
}
}
// maka outputnya 65000
Menggunakan for each
var total = 0;
belanjaan.forEach(
function (item) {
if (item.tipe.toLowerCase() === 'makanan') {
total += item.harga * item.kuantitas;
}
}
);
// maka outputnya 65000
Menggunakan reduce
var total = belanjaan.reduce(
function (carry, item) {
if (item.tipe.toLowerCase() === 'makanan') {
carry += item.harga * item.kuantitas;
}
return carry;
},
0 // initial value
);
// maka outputnya 65000
Dan masih banyak lagi implementasinya tergantung dengan kebutuhan bisnis logic dari visprognyaa. Sekian dulu artikel hari ini, semoga membantuuu yaaa. Kalau ada koreksi atau ada yg mau didiskusiin bisa juga reply yaa.
