30 Hari Belajar JavaScript : Hari ke 19

Halo semuanya! Selamat datang kembali di module belajar javascript selama 30 hari. Pada hari ke 19 ini kita akan mempelajari beberapa hal berikut!

Source : Dokumentasi Pribadi

1. Mengenal Functional Programming pada JavaScript
2. Pure Function Pada JavaScript
3. Immutability pada JavaScript
4. Recursive pada JavaScript
5. High Order Function pada JavaScript

Tanpa banyak statement lagi, mari kita gas kaaaaaaan!

Mengenal Functional Programming pada JavaScript

Seperti yang telah kita ketahui bahwa mamang JavaScript ini sungguh sangat fleksibel sekali orangnya :v Bagaimana tidak fleksibel? beliau ini bahkan dijuluki orang yang sangat

• Multipurpose -> Pernah dengar fullstack JS? Itu jawabannya
• Multiparadigm -> OOP? iya, Prototype? juga iya, Functional Paradigm?mari kita bahas
• Dan masih banyak multi-multi lainnya :v

Kembali ke topik, lantas apa sih functional programming itu? Menurut pidato yang disampaikan oleh bapak RT pekan lalu. Beliau berkata bahwa

“konsep functional programming pada JavaScript ini sebenernya tentang cara nulis kode yang fokus ke fungsi-fungsi matematika yang “murni”. Artinya, fungsi-fungsi ini nggak berubah-ubah nilainya tergantung sama hal-hal di luar fungsi itu sendiri. Di samping itu, kalau bapak, ibu atau warga sini pake konsep functional programming, nantinya juga lebih sering nggak pake variabel yang berubah-ubah nilainya. Sebaliknya, kita ngasih input ke fungsi dan diharapkan balikannya itu konsisten dan nggak berubah-ubah tergantung sama inputnya. Contohnya gini misalkan bapak atau ibu ingin menjumlahkan 1 + 1 ya maka hasil yang diharapkan adalah 2. Banyak orang juga bilang, pake konsep functional programming itu bisa bikin kode kita lebih mudah dipahami sama orang lain, karena fungsinya lebih spesifik dan terisolasi dari bagian-bagian lain di program kita.”

Untuk lebih jelasnya mari kita lihat perbedaan antara menggunakan pendekatan imperatif dengan functional programming.

 let number = -5;

 if (number < 0) {
     number = -number;
 }

 let base = 5;
 let height = 10;
 let triangleArea = 0.5 * base * height;

Sekarang bandingkan dengan menggunakan pendekatan functional programming.

  function absoluteValue(number) {
           return Math.abs(number);
  }

  function calculateTriangleArea(base, height) {
           return 0.5 * base * height;
  }

  console.log(absoluteValue(-5)); 
  console.log(calculateTriangleArea(5, 10));

Dalam contoh tersebut, kita membuat dua fungsi yaitu absoluteValue() dan calculateTriangleArea(). Kedua fungsi tersebut hanya menerima input sebagai argumen dan mengembalikan nilai yang terkait dengan input tersebut. Fungsi absoluteValue() menggunakan fungsi Math.abs() untuk mengambil nilai absolut dari input yang diberikan. Kita bisa pastikan bahwa nilai yang dikembalikan dari fungsi absoluteValue() selalu bernilai positif dan tidak bergantung pada hal-hal di luar input. Fungsi calculateTriangleArea() juga hanya menggunakan input base dan height untuk menghitung luas segitiga. Tanpa memodifikasi variabel di luar fungsi, fungsi ini mengembalikan hasil yang konsisten sesuai input yang diberikan. Dalam kedua contoh tersebut, kedua fungsi tersebut diimplementasikan dengan prinsip-prinsip functional programming yaitu fokus pada fungsi-fungsi yang “murni” dan hanya mengambil input dari argumen fungsi.

Berbeda dengan menggunakan pendekatan imperatif :v Dalam contoh tersebut, kita menggunakan variabel untuk menampung data dan menggunakan kondisi if-else untuk mengubah nilai variabel number menjadi nilai absolut. Dalam kasus penghitungan luas segitiga, kita menggunakan variabel base dan height untuk menghitung luas segitiga. Perbedaan utama antara kedua pendekatan tersebut adalah pada konsep fokus. Pada pendekatan functional programming, kita fokus pada fungsi-fungsi yang “murni” dan hanya menggunakan input yang diberikan sebagai argumen. Sedangkan pada pendekatan imperatif, kita menggunakan variabel sebagai wadah untuk data dan melakukan operasi pada variabel tersebut. Pendekatan functional programming dianggap lebih mudah untuk dibaca dan dimengerti oleh orang lain karena kode yang dibuat lebih terisolasi dan fungsi-fungsinya lebih spesifik. Selain itu, dengan fokus pada fungsi-fungsi yang “murni”, kita dapat lebih mudah melakukan pengujian dan debugging pada kode. Bagaimana? menarik bukan hehe.

Pure Function pada JavaScript

Nah salah satu konsep dari functional programming ini adalah Pure Function. Pure Function itu apa sih? Pure Function adalah konsep untuk membuat fungsi yang seharusnya tidak bergantung sama nilai di luar fungsi atau parameter yang diberikan ke fungsi. Jadi, walaupun kondisi di luar atau parameter yang diberikan beda-beda, tapi fungsi yang dibuat selalu menghasilkan nilai yang sama. Untuk lebih jelasnya mari kita simak study case berikut.

Misalnya kamu punya fungsi untuk menghitung luas lingkaran. Nah, fungsi ini cuma butuh jari-jari lingkaran sebagai parameter, dan nggak butuh variabel atau nilai dari luar fungsi. Jadi, fungsi ini bisa dibuat sebagai Pure Function.

function hitungLuasLingkaran(jariJari) {
  return 3.14 * jariJari * jariJari;
}

Berbeda jika kita punya fungsi untuk mengambil data dari sebuah API, dan API ini mungkin akan berubah-ubah nilainya tiap kali dipanggil. Nah, fungsi ini bergantung pada nilai di luar fungsi (yaitu data dari API), sehingga fungsi ini tidak bisa dijadikan Pure Function. Mantap :v

Immutability pada JavaScript

Selain Pure Function ada juga immutability pada Functional Programming. Hmm kira-kira apaan ya? Mari kita simak pidato Pak RT lagi :v

“Para bapak, ibu dan warga. Jadi begini, Immutable itu artinya para bapak, ibu, kakak-kakak, adik-adik nggak bisa mengubah objek setelah objek itu dibuat. Sedangkan Mutable artinya kita boleh mengubah objek itu setelah objek itu dibuat. Gitu aja sih. Oke 🤣👍”

Untuk lebih jelasnya mari kita simak contoh immutable dan mutable.

Contoh Immutable:

Misalnya kita mempunyai variabel name yang isinya adalah string "John". Kita tidak bisa mengubah variabel name ini setelah dideklarasikan, karena string pada dasarnya bersifat Immutable. Kita hanya bisa membuat variabel baru katakanlak dengan nama fullName`dengan nilai string yang berbeda.

 const name = "John"; 
 const fullName = `${name} Wick`; 

Contoh Mutable:

Misalnya kita mempunyai array daftarBelanja yang berisi beberapa barang belanjaan. Kita bisa menambah, menghapus, atau mengubah barang-barang di dalam array tersebut, setelah array tersebut dibuat.

 let daftarBelanja = ["apel", "pisang", "mangga"];
 daftarBelanja.push("melon");
              
 daftarBelanja.splice(1, 1); 
 daftarBelanja[0] = "jeruk";

Recursive pada JavaScript

konsep selanjutnya di Functional Programming adalah rekursif. Rekursif itu sendiri adalah teknik di mana sebuah fungsi memanggil dirinya sendiri.

Misalnya kita mempunyai fungsi yang memanggil dirinya sendiri untuk menghitung faktorial. Faktorial adalah hasil perkalian dari sebuah bilangan dengan semua bilangan di bawahnya. Contohnya, 5! sama dengan 5 x 4 x 3 x 2 x 1.

 function faktorial(n) {
          if (n === 1) {
              return 1;
          } else {
              return n * faktorial(n - 1);
          }
  }

  console.log(faktorial(5))

High Order Function pada JavaScript

High Order Function adalah sebuah konsep pada Functional Programming di mana sebuah fungsi dapat menerima fungsi lainnya sebagai argumen dan/atau mengembalikan sebuah fungsi. Dengan konsep ini, fungsi dapat dianggap sebagai nilai yang dapat diproses, sama seperti halnya variabel. Contohnya seperti ini, kita mempunyai sebuah fungsi hitung, yang menerima dua argumen, yaitu sebuah fungsi operasi dan dua angka a dan b.

function hitung(operasi, a, b) {
  return operasi(a, b);
}

Di dalam fungsi hitung, kita memanggil fungsi operasi dengan dua angka a dan b sebagai argumennya. Ini artinya, kita bisa memberikan fungsi apa pun sebagai argumen operasi, selama fungsi tersebut menerima dua angka sebagai argumennya dan mengembalikan hasil operasi. Sebagai contoh, kita bisa membuat dua fungsi penjumlahan dan perkalian yang akan digunakan sebagai argumen untuk fungsi hitung.

function penjumlahan(a, b) {
  return a + b;
}

function perkalian(a, b) {
  return a * b;
}

Selesai sudah materi ke 19 dari series 30 hari belajar javascript. Sampai jumpa di materi berikutnya!

Halo! Saya Bahrul Rozak, seorang mahasiswa dari Universitas Muhammadiyah Prof. DR. HAMKA. Saya memiliki pengalaman sebagai web developer di sebuah institusi dan telah membuat serta mengembangkan aplikasi internal menggunakan bahasa pemrograman JavasScript dan PHP, serta menggunakan framework PHP seperti Laravel, codeigniter, dan Vue Js. Saya juga pernah memimpin sebuah tim proyek yang terdiri dari divisi Front End dan Back End, di sana saya belajar banyak hal, terutama tentang kolaborasi dalam tim. Selain itu, saya memiliki hobi terkait desain web dan menulis artikel tentang teknologi. Saya sangat suka tantangan yang memacu adrenalin karena saya percaya bahwa more complex more adrenaline. Jika Anda ingin tahu lebih banyak tentang saya atau ingin berkolaborasi, silakan hubungi saya melalui email di bahrulrozak02@gmail.com atau follow media sosial saya untuk mendapatkan insight terbaru dalam perduniawian di.

Instagram : https://instagram.com/rozak.dexamethasone

Linkedin : https://linkedin.com/in/bahrul-rozak

Stackoverflow : https://stackoverflow.com/users/20835639/bahrul-rozak

Github : https://github.com/Bahrul-Rozak