Higher Order Function in JS

Lambda

Sebelum saya membahas tentang Higher Order Function, saya akan membahas terlebih dahulu tentang first-class functions. Dengan first-class functions kita dapat menggunakan fungsi di javascript seperti objects/expressions biasa lainnya.

Kita bisa memasukkannya ke dalam suatu variabel:

const myFn = function () {
   // do something
};

Kita bisa menggunakannya sebagai argumen sebuah fungsi:

function fnRun(fn, x, y) {
  return fn(x + y);
}

Kita bisa menggunakannya sebagai hasil return dari fungsi lain:

function takeFirst(fn, fn2) {
  return fn;
}

Higher Order Function

Higher order function adalah fungsi yang menggunakan fungsi lain sebagai parameter atau sebagai hasil return. Jadi fnRun dan takeFirst di atas merupakan higher order function.

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

Map

map digunakan ketika kita ingin untuk mengubah setiap isi dari suatu array.
Parameternya adalah fungsi lain dengan parameter currentValue, index, originalArray. Hasil return-nya adalah array baru dengan length yang sama dengan originalArray yang diubah.

const names = ['Budi', 'Dewi', 'Santoso'];
const greetNames = names.map( function (name) {
  return 'Hai ' + name;
});
console.log(greetNames);
// ['Hai Budi', 'Hai Dewi', 'Hai Santoso']

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

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

Filter

filter digunakan ketika kita ingin untuk mem-filter array sehingga array yang tidak sesuai dengan kriteria yang kita inginkan akan dibuang. Parameternya adalah fungsi lain yang menghasilkan true/false. Ketika true maka currentValue array tersebut akan dimasukkan ke array baru yang menjadi hasil dari filter. Sebaliknya ketika false maka currentValue akan dibuang.

const names = ['Budi', 'Dewi', 'Santoso'];
const fourLetterNames = names.filter( function (name) {
  return name.length === 4;
});
console.log(fourLetterNames);
// ['Budi', 'Dewi']
const fourLetterNames = names.filter( name => name.length === 4 );
// with arrow function syntax

Reduce

reduce ini lebih powerful dari map dan filter. Kita dapat melakukan hal-hal yang dilakukan map dan filter dengan reduce. Kita dapat mengubah array berisi string menjadi object. Segala sesuatu yang biasanya dilakukan dengan for loop kita bisa lakukan dengan reduce.

reduce memiliki dua parameter, fungsi lain dengan parameter accumulator, currentValue, index, originalArray dan optional parameter initialValue sebagai value awal untuk accumulator. accumulator disini berfungsi sebagai wadah untuk menyimpan hasil dari iterasi sebelumnya.

const names = ['Budi', 'Dewi', 'Santoso'];
// We set initialValue to ''
// because we want greetAll to return a string
const greetAll = names.reduce( function (greeting, name, index) {
  if (index === 0) {
    greeting += 'Hai ' + name;
  } else {
    greeting += ', ' + name;
  }
  return greeting;
}, '');
console.log(greetAll);
// 'Hai Budi, Dewi, Santoso'
// neat right!!!

Bye-bye loops

Kelebihan menggunakan fungsi-fungsi di atas dari loop adalah kita bisa melakukan chaining. Chaining adalah menggunakan return dari satu fungsi sebagai argument untuk fungsi lain.

const fullnames = [['Budi', 'Pekerti'], ['Slamet', 'Sentosa']];
const greetFullnames = fullnames
  .map( fullname => fullname[0] + ' ' + fullname[1] )
  .reduce ( (greeting, fullname, index) => {
    if (index === 0) {
      greeting += 'Hai ' + fullname;
    } else {
      greeting += ', ' + fullname;
    }
    return greeting;
  }, '');
console.log(greetFullnames);
// 'Hai Budi Pekerti, Slamet Sentosa'
// Bye-bye loops!!!

Bisa kita lihat dengan menggunakan map, filter, dan reduce kode kita menjadi lebih deskriptif dari pada menggunakan loops. Kode kita berubah dari “bagaimana cara melakukan sesuatu” ke “aku mau melakukan sesuatu”.

So, go ahead and replace all your for loops hehehe…..