Pada video sebelumnya kita telah mempelajari mengenai cara mengirimkan function sebagai argument. Sekarang kita akan belajar mengenai cara mengirimkan function sebagai return value. Namun sebelum kita masuk ke materi pelajarannya, kita buat coding dengan menggunakan function biasa. Jadi nanti kita bisa membandingkan apa saja perbedaannya dengan menggunakan return function.

Misalkan kita hendak membuat fungsi mengenai undian, dimana kita memiliki kesempatan 50% untuk menang dan 50% untuk kalah. Jadi kita membuat fungsi dengan nama showResult atau lihat hasil. Di dalamnya kita membuat percabangan dengan kondisi bila nilai acak dibawah 0.5 artinya kita menang, maka kita menuliskan kalimat “Menang! Selamat, Anda mendapatkan hadiah.”. Selain itu, kita menuliskan kalimat “Kalah. Anda kurang beruntung.” Kemudian kita panggil fungsi showResult(). Maka kode kita menjadi:

function showResult()
{
  if(Math.random() < 0.5)
  {
    console.log("Menang! Selamat Anda mendapatkan hadiah");
  }
  else
  {
    console.log("Kalah. Anda kurang beruntung");
  }
}

showResult();

Kita simpan dan jalankan di browser. Perhatikan kalau kita terus-terusan melakukan refresh di browser, maka terkadang kita menang dan terkadang kita kalah. Dan kalau kita panggil fungsi showResult() di console, maka hasilnya juga terkadang menang dan terkadang kalah.

Nah sekarang kita ganti ya kode kita, menjadi menggunakan cara return function. Pertama kita copy dahulu fungsi showResult dan kita paste di bawahnya. Dan kode pertama kita ubah dahulu menjadi komentar. Lalu kode kedua kita ubah namanya menjadi createFunction(). Setelah itu, bagian console.log kita ubah menjadi mengembalikan fungsi yang isinya console.log. Sintaksnya masih mirip dengan function expression. Hanya saja yang tadinya function kita simpan menjadi variable, sekarang functionnya dikembalikan menggunakan kata kunci return. Kita lakukan hal yang sama di bagian else.

Pada saat kita hendak memanggil fungsi createFunction(), maka kita perlu membuat suatu konstanta untuk menyimpan hasilnya yang berupa function. Kemudian kita jalankan konstanta tersebut. Maka fungsi kita menjadi:

function createFunction()
{
  if(Math.random() < 0.5)
  {
    return function(){
      console.log("Menang! Selamat Anda mendapatkan hadiah");
    }
  }
  else
  {
    return function(){
      console.log("Kalah. Anda kurang beruntung");
    }
  }
}

const showResult = createFunction();
showResult();

Kita simpan dan jalankan di browser. Setiap kali kita melakukan refresh browser, maka terkadang kita menang dan terkadang kita kalah. Namun perhatikan disini bahwa kalau misalkan kita menang, maka fungsi showResult isinya hanya menuliskan bahwa kita menang. Dan begitu juga kalau kita kalah. Artinya? Kalau misalkan kita menang, kemudian kita panggil kembali fungsi showResult() secara berulang-ulang di console, maka kita selalu mendapatkan hasil menang. Hal ini disebabkan karena di dalam fungsi showResult() sudah tidak ada random lagi ya, kita hanya menjalankan random satu kali di dalam createFunction().

Nantinya kalau kita mempelajari Javascript lebih dalam, kita akan kembali menjumpai fungsi seperti ini dalam Design Pattern yang bernama Factory Function. Di dalam Factory Function, kita akan membuat function yang bertujuan untuk menghasilkan function. Atau lebih tepatnya Factory Function bertujuan untuk menghasilkan objek ya, namun berhubung kita belum belajar mengenai objek, maka kita batasi dahulu Factory Function untuk menghasilkan function. Namun konsepnya masih sama.

Kita komentari lagi kode kita. Sekarang kita masuk ke contoh kasus kedua. Misalkan kita hendak membuat kategori manusia berdasarkan umur. Sebagai contohnya, umur 0 sampai 17 kita anggap anak-anak, umur 18 hingga 65 kita anggap dewasa, dan umur 66 keatas kita anggap senior. Kita buat dahulu satu buah fungsi untuk menentukan apakah umur tersebut termasuk kategori anak?

function isChild(age)
{
  return age >= 0 && age <= 17;
}

Kita coba dahulu fungsi buatan kita. Simpan dan jalankan di browser. Kita coba apakah umur 5 termasuk anak?

isChild(5);

Hasilnya benar ya. Lalu kita coba lagi apakah umur 20 termasuk anak?

isChild(20);

Dan hasilnya salah. Artinya logika dari fungsi kita sudah benar.

Selanjutnya kita hendak membuat fungsi apakah dewasa dan apakah senior. Artinya kita harus melakukan copy paste terhadap fungsi ini sebanyak 2 kali. Kita ubah nama fungsinya dan kita ubah nilai batasan umurnya. Untuk senior, kita anggap batas atas umurnya adalah 200 ya, supaya aman.

function isAdult(age)
{
  return age >= 18 && age <= 65;
}

function isSenior(age)
{
  return age >= 66 && age <= 200;
}

Nah, sekarang kita memiliki 3 buah fungsi dengan logika yang sama. Hanya berbeda di batasan umurnya saja. Namun kalau kita perlu mengubah logikanya, misalkan operator besar sama dengan ini hendak kita ubah menjadi operator lebih besar saja, maka kita harus mengubah ketiga function.

Maka cara yang lebih efisien untuk menuliskan kode seperti ini adalah dengan menggunakan Factory Function. Pertama kita ubah dahulu ya ketiga function ini menjadi komentar.

Kita akan membuat fungsi yang bertujuan untuk menciptakan kembali ketiga fungsi tadi. Misalkan kita beri nama createAgeCategory. Parameternya adalah 2 yaitu min dan max untuk mengirimkan batas umur minimal dan batas umur maksimalnya. Di dalamnya, kita mengembalikan function dengan parameter age. Isi dari function tersebut, kita copy paste saja dari fungsi sebelumnya, misalkan dari fungsi isSenior. Namun nilai umurnya kita ganti ya, 66 kita ganti menjadi min, dan 200 kita ganti menjadi max.

Lalu kita buat konstanta dengan nama isChild, yang isinya diambil dari fungsi CreateAgeCategory dengan argument umur 0 hingga 17. Kita ulangi prosesnya untuk isAdult dengan argument 18, 65. Dan isSenior dengan argument 66, 200. Dan kode kita menjadi:

function createAgeCategory(min, max)
{
  return function(age){
    return age >= min && age <= max;
  }
}

const isChild = createAgeCategory(0, 17);
const isAdult = createAgeCategory(18, 65);
const isSenior = createAgeCategory(66, 200);

Kita simpan dan jalankan di browser ya. Kita coba panggil isChild(5) dan hasilnya benar. isChild(20) hasilnya salah. isAdult(5) hasilnya salah. Dan isAdult(20) hasilnya benar. Kita coba lagi isSenior(5) salah. isSenior(20) salah. Dan isSenior(80) benar. Artinya kita telah berhasil menuliskan ulang ketiga function sebelumnya dengan menggunakan cara Factory Function.

Dengan menggunakan cara ini, maka kita hanya menuliskan logika satu kali pada fungsi createAgeCategory. Jadi kalau kita ingin mengubah logikanya, seperti ingin mengganti operator lebih besar sama dengan menjadi operator besar, kita cukup mengubah di satu tempat saja.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.