Berkenalan dengan Javascript Higher Order Function untuk Array

Halo! Salam, perkenalkan saya Aria, saya adalah salah satu dari tim kontributor baru di blog Akhdani ini, saya tidak ada spesialisasi teknologi, jadi apa ilmu yang saya punya akan saya tuangkan di blog ini.

Untuk postingan pertama di sini, saya akan membahas higher-order function untuk array pada Javascript. Beberapa fungsi ada yang sepertinya sudah sering dipakai, tapi saya akan tetap sedikit membahas untuk semuanya. Fungsi-fungsi ini sebenarnya cenderung functional programming, tapi kita abaikan dulu saja. Nah, apa fungsinya? Salah satunya agar kode program kita sedikit lebih “bersih”, operasi pada array tidak perlu lagi menggunakan looping semacam for atau while.

(Mohon maaf sebelumnya jika ada penjelasan yang masih sulit dipahami, saya berusaha menjelaskan semudah mungkin. Silakan komentari artikel ini jika ada pertanyaan)

Sebelum mulai, diketahui kita memiliki array yang akan melakukan fungsi-fungsi higher-order ini.

var source = [1,2,3,4,5];

1. forEach

Looping pada semua elemen array, dan menjalankan operasi yang kita berikan.

Contoh:

source.forEach(function(currentValue, currentIndex){
   console.log("index", currentIndex, "isinya", currentValue);
});

// index 0 isinya 1
// index 1 isinya 2
// index 2 isinya 3
// index 3 isinya 4
// index 4 isinya 5

 

2. filter

Looping pada semua elemen array, setiap elemen yang memenuhi kondisi akan dimasukkan ke dalam array hasil fungsi filter, array sumber akan tetap utuh.

Contoh:

var filterGanjil = source.filter(function(currentValue, currentIndex){
   return currentValue % 2 === 1;
});

console.log(filterGanjil); // [1, 3, 5]

 

3. map

Looping pada semua elemen array, dan menjalankan operasi pada masing-masing elemen array. Hasilnya adalah array dengan panjang (length) yang sama namun isinya berupa hasil dari operasi pada masing-masing elemen array yang bersesuaian.

Contoh:

var dikaliDua = source.map(function(currentValue, currentIndex){
   return currentValue * 2;
});

console.log(dikaliDua); // [2, 4, 6, 8, 10]

 

4. reduce

Looping pada semua elemen array, dan menjalankan operasi pada elemen array. Hasil operasi pada elemen ke-i, akan dijadikan parameter untuk operasi pada elemen berikutnya (i+1), sehingga hasil operasi reduce adalah akumulasi operasi pada semua elemen, bukan array. Pendeknya, value yang tadinya banyak (array) menjadi satu saja.

Contoh:

var ditotalin = source.reduce(function(previousValue, currentValue, currentIndex){
   return previousValue + currentValue;
});

console.log(ditotalin); // 15

Untuk reduce, bisa ditambahkan parameter kedua yaitu initial value sebagai nilai permulaan sebelum reduce dieksekusi. Jadi seb

Contoh:

var ditotalin = source.reduce(function(previousValue, currentValue, currentIndex){
   return previousValue + currentValue;
}, 5);

console.log(ditotalin); // 20

5. reduceRight

Sama seperti reduce, hanya saja dilakukan mulai dari elemen terakhir.

Contoh:

var ditotalinDariKanan = source.reduceRight(function(previousValue, currentValue, currentIndex){
   return previousValue + currentValue;
});

console.log(ditotalinDariKanan); // 15

Sama seperti reduce, reduceRight juga bisa ditambahkan parameter kedua sebagai initial value.

 

6. some

Looping pada setiap elemen array dan menjalankan operasi pada setiap elemen array, jika ada satu saja yang hasilnya true, maka hasil fungsi some adalah true.

Contoh:

var apakahAdaAngkaTiga = source.some(function(currentValue, currentIndex){
   return currentValue === 3;
});

console.log(apakahAdaAngkaTiga); // true

7. every

Mirip seperti some namun hasil operasi semua elemen harus bernilai true agar hasil fungsi every adalah true.

Contoh:

var apakahSemuanyaAngka = source.every(function(currentValue, currentIndex){
   return typeof currentValue === "number";
});

console.log(apakahSemuanyaAngka); //true

8. find

Menampilkan isi elemen pertama yang memenuhi kondisi yang ditentukan, jika tidak ada maka hasilnya adalah undefined.

Contoh:

var angkaYangLebihBesarDariDua = source.find(function(currentValue, currentIndex){
   return currentValue > 2;
});
console.log(angkaYangLebihBesarDariDua); // 3

9. findIndex

Menampilkan index elemen pertama yang memenuhi kondisi yang ditentukan, jika tidak ada maka hasilnya adalah -1.

Contoh:

var indexnyaAngkaYangLebihBesarDariDua = source.findIndex(function(currentValue, currentIndex){
   return currentValue > 2;
});

console.log(indexnyaAngkaYangLebihBesarDariDua); // 2

Nah, bagaimana kalau mau digabung? Contohnya, setelah difilter, ingin dilakukan map. Caranya adalah dengan method/function chaining, caranya seperti ini:

 var filterGanjilLaluKaliDua = source
   .filter(function(currentValue, currentIndex){
      return currentValue % 2 === 1;
   })
   .map(function(currentValue, currentIndex){
      return currentValue * 2;
   });

console.log(filterGanjilLaluKaliDua); // [2, 6, 10]

Tapi ingat, chaining di atas bisa dilakukan karena hasil dari filter adalah array, jadi masih memiliki method map. Kalau awalnya, misalnya, di­-reduce, hasilnya bukanlah array sehingga tidak memiliki method map.

Sekian saja bahasan sedikit dari saya, jika ada kesempatan maka akan saya bahas lebih dalam, jika ada pertanyaan silakan tulis komentar. Semoga bermanfaat!

Salam…