Cara Mengkari Fungsi di JavaScript

Fungsi kari dapat membantu membuat kode JavaScript Anda lebih mudah dibaca dan ekspresif. Teknik currying sangat ideal ketika Anda ingin memecah logika kompleks menjadi potongan kode yang lebih kecil, mandiri, dan lebih mudah dikelola.

Pelajari semua tentang fungsi kari dalam JavaScript, cara menggunakan teknik fungsi kari untuk membuatnya fungsi yang diterapkan sebagian, serta kasus penggunaan kehidupan nyata untuk fungsi kari dan diterapkan sebagian fungsi.

Apa itu Kari?

Nama kari diambil dari nama ahli matematika Haskell B. Curry, dan konsepnya berasal dari kalkulus Lambda. Currying mengambil fungsi yang menerima lebih dari satu parameter dan memecahnya menjadi serangkaian fungsi unary (satu parameter). Dengan kata lain, fungsi kari hanya membutuhkan satu parameter dalam satu waktu.

Contoh Dasar Kari

Di bawah ini adalah contoh fungsi kari:

functionbuildSandwich(ingredient1) 

instagram viewer
{
return(ingredient2) => {
return(ingredient3) => {
return`${ingredient1},${ingredient2},${ingredient3}`
 }
 }
}

Itu membangunSandwich() fungsi mengembalikan fungsi lain — fungsi anonim yang menerima bahan2 argumen. Kemudian, fungsi anonim ini mengembalikan fungsi anonim lain yang menerimanya bahan3. Terakhir, fungsi terakhir ini mengembalikan literal templat, suatu cara memformat string dalam JavaScript.

Apa yang Anda buat adalah fungsi bersarang di mana setiap fungsi memanggil fungsi di bawahnya hingga kita mencapai akhir. Sekarang, ketika Anda menelepon membangunSandwich() dan meneruskannya satu parameter, ia akan mengembalikan bagian fungsi yang argumennya belum Anda berikan:

console.log(buildSandwich("Bacon"))

Anda dapat melihat dari output bahwa buildSandwich mengembalikan fungsi:

Untuk menyelesaikan pemanggilan fungsi, Anda perlu memberikan ketiga argumen:

buildSandwich("Bacon")("Lettuce")("Tomato")

Kode ini meneruskan "Bacon" ke fungsi pertama, "Selada" ke fungsi kedua, dan "Tomat" ke fungsi terakhir. Dengan kata lain, itu membangunSandwich() fungsi sebenarnya dipecah menjadi tiga fungsi, dengan masing-masing fungsi hanya menerima satu parameter.

Meskipun kari menggunakan fungsi tradisional adalah hal yang sah, semua sarangnya bisa menjadi sangat buruk jika Anda masuk lebih dalam. Untuk menyiasatinya, Anda dapat menggunakan fungsi panah dan memanfaatkan sintaksisnya yang lebih rapi:

const buildMeal = ingred1 =>ingred2 =>ingred3 =>
`${ingred1}, ${ingred2}. ${ingred3}`;

Versi refactored ini lebih ringkas, keunggulan penggunaan fungsi panah vs fungsi biasa. Anda dapat memanggil fungsi tersebut dengan cara yang sama seperti yang Anda lakukan sebelumnya:

buildMeal("Bacon")("Lettuce")("Tomato")

Fungsi Kari yang Diterapkan Sebagian

Fungsi yang diterapkan sebagian adalah penggunaan kari yang umum. Teknik ini mengharuskan hanya memberikan argumen yang diperlukan pada satu waktu (daripada memberikan semua argumen). Setiap kali Anda memanggil suatu fungsi dengan meneruskan semua parameter yang diperlukan, Anda mengatakan bahwa Anda telah "menerapkan" fungsi itu.

Mari kita lihat sebuah contoh:

const multiply = (x, y) => x * y;

Di bawah ini adalah versi kari dari Multiply:

const curriedMultiply = x =>y => x * y;

Itu kariBerkembang biak() fungsi menerima X argumen untuk fungsi pertama dan kamu untuk fungsi kedua, lalu mengalikan kedua nilai.

Untuk membuat fungsi pertama yang diterapkan sebagian, panggil kariBeberapa() dengan parameter pertama dan tetapkan fungsi yang dikembalikan ke variabel:

const timesTen = curriedMultiply(10)

Pada titik ini, kode tersebut telah "diterapkan sebagian". kariBerkembang biak() fungsi. Jadi kapan saja Anda ingin menelepon kaliSepuluh(), Anda hanya perlu memberikan satu angka dan angka tersebut akan otomatis dikalikan 10 (yang disimpan di dalam fungsi yang diterapkan):

console.log(timesTen(8)) // 80

Hal ini memungkinkan Anda membangun satu fungsi kompleks dengan membuat beberapa fungsi khusus dari fungsi tersebut, masing-masing dengan fungsinya sendiri yang terkunci.

Lihatlah contoh yang mendekati kasus penggunaan pengembangan web nyata. Di bawah ini Anda memiliki perbaruiElemTeks() fungsi yang mengambil elemen pengenal pada panggilan pertama, konten pada panggilan kedua, dan kemudian memperbarui elemen berdasarkan pengenal dan konten yang Anda berikan:

const updateElemText = id = content
 => document.querySelector(`#${id}`).textContent = content
// Lock the element's id into the function:
const updateHeaderText = updateElemText('header')
// Update the header text
updateHeaderText("Hello World!")

Komposisi Fungsi Dengan Fungsi Kari

Kegunaan umum lainnya dari kari adalah komposisi fungsi. Ini memungkinkan Anda memanggil fungsi-fungsi kecil, dalam urutan tertentu, dan menggabungkannya menjadi satu fungsi yang lebih kompleks.

Misalnya, dalam situs web e-niaga hipotetis, berikut tiga fungsi yang mungkin ingin Anda jalankan satu demi satu (dalam urutan yang tepat):

const addCustomer = fn =>(...args) => {
console.log("Saving customer info")
return fn(...args)
}
const processOrder = fn =>(...args) => {
console.log(`processing order #${args[0]}`)
return fn(...args);
}
let completeOrder = (...args) => {
console.log(`Order #${[...args].toString()} completed.`);
}

Perhatikan bahwa kode ini menggunakan membiarkan kata kunci untuk mendefinisikan pesanan lengkap() fungsi. Ini memungkinkan Anda untuk menetapkan kembali nilai ke variabel dan menjadi bagiannya cara kerja pelingkupan dalam JavaScript.

Selanjutnya, Anda perlu memanggil fungsi dalam urutan terbalik (dari dalam ke luar) karena Anda ingin menambahkan pelanggan terlebih dahulu:

completeOrder = (processOrder(completeOrder));
completeOrder = (addCustomer(completeOrder));
completeOrder("1000")

Ini akan memberi Anda keluaran berikut:

Jika Anda menulis fungsi di atas dengan cara biasa, kodenya akan terlihat seperti ini:

functionaddCustomer(...args) {
returnfunctionprocessOrder(...args) {
returnfunctioncompleteOrder(...args) {
// end
 }
 }
}

Saat Anda menelepon tambahkan Pelanggan() fungsi dan meneruskan argumennya, Anda memulai dari dalam dan melanjutkan ke bagian atas fungsi.

Ubah Fungsi Normal menjadi Fungsi Kari Dengan Fungsi Kari

Jika Anda berencana untuk sering menggunakan fungsi kari, Anda dapat menyederhanakan prosesnya dengan fungsi pembantu.

Fungsi ini akan mengubah fungsi normal apa pun menjadi fungsi kari. Ia menggunakan rekursi untuk menangani sejumlah argumen.

const curry = (fn) => {
return curried = (...args) => {
if (fn.length !== args.length) {
return curried.bind(null, ...args)
 }
return fn(...args);
 }
}

Fungsi ini akan menerima fungsi tertulis standar apa pun yang menerima lebih dari satu parameter, mengembalikan versi kari dari fungsi tersebut. Untuk melihatnya beraksi, gunakan contoh fungsi ini yang mengambil tiga parameter dan menambahkannya bersama-sama:

const total = (x, y, z) => x + y + z

Untuk mengonversi fungsi ini, panggil kari() berfungsi dan lulus total sebagai argumen:

const curriedTotal = curry(total)

Sekarang untuk memanggil fungsi tersebut, Anda hanya perlu meneruskan semua argumen:

console.log(curriedTotal(10)(20)(30)) // 60

Lebih Lanjut Tentang Fungsi di JavaScript

Fungsi JavaScript sangat fleksibel dan fungsi kari hanyalah sebagian kecil darinya. Ada banyak jenis fungsi lainnya seperti fungsi panah, fungsi konstruktor, dan fungsi anonim. Membiasakan diri Anda dengan fungsi-fungsi ini dan komponennya adalah kunci untuk menguasai JavaScript.