Memahami High Order Function di JavaScript: Meningkatkan Efisiensi Kode dengan Contoh Penggunaan

High order function merupakan salah satu fitur yang sangat penting di dalam bahasa pemrograman JavaScript. Fungsi ini memungkinkan Anda untuk memanipulasi fungsi sebagai argumen, mengembalikan fungsi sebagai nilai, atau bahkan membuat fungsi di dalam fungsi. Dalam artikel ini, kita akan membahas lebih lanjut tentang high order function di dalam JavaScript beserta contoh penggunaannya.

Apa itu High Order Function?

High order function adalah fungsi yang mengambil satu atau lebih fungsi sebagai argumen atau mengembalikan fungsi sebagai nilai. Dengan fitur ini, Anda dapat melakukan operasi yang lebih kompleks pada fungsi, seperti melakukan penggabungan, penyaringan, dan pemetaan. High order function juga sangat berguna untuk memperpendek kode dan meningkatkan efisiensi.

Untuk memahami konsep ini lebih jauh kita akan menggunakan map, filter, dan reduce.

Map

Fungsi map digunakan ketika kita ingin mengubah setiap elemen dari suatu array. Fungsi ini menerima sebuah fungsi sebagai parameter dengan tiga argumen yaitu "currentValue", "index", dan "arrayAsli". Kemudian, fungsi tersebut akan menghasilkan sebuah array baru dengan panjang yang sama dengan array asli namun dengan setiap elemennya telah diubah sesuai dengan logika pada fungsi yang diberikan sebagai parameter.

Dengan menggunakan fungsi "map", kita dapat dengan mudah mengubah nilai dari setiap elemen dalam sebuah array tanpa harus mengubah array aslinya secara langsung.

const names = ['eko', 'budi', 'tono'];
const greetNames = names.map( (name) => {
  return 'Hai ' + name;
});
console.log(greetNames);
// Output: ['Hai eko', 'Hai budi', 'Hai tono']
{codeBox}

Dalam kode di atas, fungsi "map" diberikan sebagai method pada array "names" dan menerima sebuah fungsi arrow yang akan diaplikasikan pada setiap elemen di dalam array tersebut. Fungsi arrow tersebut akan mengembalikan sebuah string yang terdiri dari teks "Hai " dan nilai dari setiap elemen di dalam array "names". Hasil akhirnya adalah sebuah array baru bernama "greetNames" yang berisi nilai yang telah diubah sesuai dengan logika pada fungsi arrow yang diberikan sebagai parameter.

Dengan ES6 arrow function kita dapat membuat greetNames menjadi lebih simpel.

const greetNames' = names.map( name => 'Hai ' + name )

{codeBox}

 

Filter

Fungsi filter digunakan ketika kita ingin melakukan filtrasi terhadap suatu array dan menghasilkan array baru yang hanya berisi elemen-elemen yang memenuhi kriteria tertentu. Fungsi ini menerima sebuah fungsi sebagai parameter, yang menghasilkan nilai boolean (true/false), dan akan diterapkan pada setiap elemen di dalam array. Jika nilai yang dihasilkan oleh fungsi tersebut adalah true, maka elemen tersebut akan dimasukkan ke dalam array baru yang menjadi hasil dari filter. Sebaliknya, jika nilai yang dihasilkan adalah false, maka elemen tersebut akan dibuang.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function(number) {

  return number % 2 === 0;

});

console.log(evenNumbers);

// Output: [2, 4, 6, 8, 10]

{codeBox}

Dalam contoh di atas, fungsi filter digunakan untuk memfilter array numbers sehingga hanya elemen-elemen yang bernilai genap yang dimasukkan ke dalam array baru bernama evenNumbers. Fungsi arrow yang diberikan sebagai parameter akan menghasilkan nilai boolean true ketika nilai dari elemen tersebut adalah bilangan genap, dan false jika sebaliknya.

Reduce

Fungsi reduce lebih powerful daripada map dan filter karena kita dapat melakukan hal-hal yang juga dilakukan oleh map dan filter dengan reduce, namun dengan lebih fleksibel dan dapat melakukan operasi yang lebih kompleks. Dengan reduce, kita bahkan dapat mengubah sebuah array berisi string menjadi objek. Segala hal yang biasanya dilakukan dengan menggunakan for loop juga dapat dilakukan dengan reduce.

Fungsi reduce menerima dua parameter, yaitu sebuah fungsi dengan empat parameter yaitu accumulator, currentValue, index, dan arrayAsli, serta parameter opsional initialValue sebagai nilai awal untuk accumulator. Accumulator berfungsi sebagai wadah untuk menyimpan hasil dari setiap iterasi sebelumnya.

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce(function(accumulator, currentValue) {

  return accumulator + currentValue;

}, 0);

console.log(sum);

// Output: 15

{codeBox}

 

Dalam contoh di atas, fungsi "reduce" digunakan untuk menjumlahkan setiap elemen di dalam array "numbers". Fungsi arrow yang diberikan sebagai parameter akan menjumlahkan nilai dari "accumulator" dengan nilai dari "currentValue" pada setiap iterasi, dan mengembalikan hasil penjumlahan tersebut sebagai nilai "accumulator" pada iterasi selanjutnya. Parameter opsional "initialValue" diatur ke 0, sehingga "accumulator" akan dimulai dari nilai 0 saat proses penghitungan dimulai.