Curry and Pipe 『Functional in Typescript』

---

#Curried function#Pipe#Typescript#FunctionalProgramming#Effect

CodeSookPublish: 18th January 2025Publish: Saturday 18th January 2025

---

blog นี้ผมจะชวนมารู้จักกับ Curry และ pipe() ใน Functional programming in Typescript

ผมคาดหวังว่าหลังจากอ่านจบเพื่อนๆน่าจะนำเอา Curry ไปประยุคใช้กับ pipe function ใน Typescript ได้
โดยจะสร้าง Curried function เอง หรือสร้างโดยใช้ helper function จาก lib ผมจะพาทำทั้งหมดครับ

---

Curried function

เรามี function ที่รับ parameters หลายๆตัว แล้วเราแปลง function นั้นให้กลายเป็น function ที่รับ parameter แค่ 1 ตัว แล้ว return function ซึ่ง function นี้จะรับ parameters ตัวที่เหลือ
ซึ่ง function ตัวที่ return นั้นจะรับ parameters ตัวที่เหลือทั้งหมดเลยก็ได้ หรือจะ รับ parameter แค่ตัวเดียวแล้ว return function ที่รับ parameter อีกทีนึงก็ได้
พอทำแบบนี้ Curry ก็จะเป็น Higher Order Function ไปด้วย
ส่วน Higher Order Function คืออะไร ผมเคยทำคลิปไว้ อาจจะยาวหน่อยไปตามดูกันได้ CodeSook Youtube: Higher Order Function

Play

ทำไมเราต้องใช้ Curry ด้วยละ

Curry จะช่วยให้เรา

1. Function composition เอา function หลายตัวมาใช้งานต่อกันได้ง่ายขึ้น ใน blog นี้ผมจะแสดงให้เห็นตรงจุดนี้แหละ โดยจะใช้ร่วมกับ pipe()
2. Partial Application สร้าง function ที่รับ parameter ไปก่อนตัวนึง แล้วเราจะได้ function กลับมา function นั้นจะต้องรับ parameter ที่เหลือ ทำให้เราสามารถเอา function ที่ต้องการ parameter บางตัวร่วมกัน เอาไปใช้งานได้สะดวกมากขึ้น
3. Point-Free Style ใช้งาน function โดยที่ไม่ต้องใส่ parameter ทำให้ code กระชับมากขึ้น
4. Memoization & caching ทำให้ function ของเราที่อาจจะเคยคำนวนงานไปแล้ว ไม่ต้องคำนวนอีก เป็นการเอา Memory มาแลกกับ Compute

ใน blog นี้ผมคงไม่ได้แสดงการใช้งานที่แสดงถึงประโชยน์จากด้านบนให้ทั้งหมดนะครับ ผมเองก็ใช้แค่ไม่กี่ข้อ ฮ่าๆ 😆😆

---

Example 1

มาดูตัวอย่างการทำ Curried function แบบง่ายๆกัน

function add(a: number, b: number): number {
  return a + b
}

add(1,2) // result = 3

เรามี function add() แบบด้านบน ซึ่งรับ parameters 2 ตัว

แปลงเป็น Curried function ก็จะเขียนแบบนี้

function add(a: number): (b: number) => number {
  return (b: number) => a + b
}

add(1)(2) // result = 3

การเรียกใช้งานก็จะเปลี่ยนไปนิดหน่อย

ถ้าเรามี logic ที่ต้องการ function ที่เรียกปุ๊ป บวก 1 ให้เลย
เราก็สามารถทำ Partial applied จาก function add() ไปก่อน แบบนี้

function add(a: number): (b: number) => number {
  return (b: number) => a + b
}

const incrementOne = add(1)
const incrementOne: (b: number) => number
const couter = incrementOne(5) // result = 6
const tick = incrementOne(1) // result = 2

จากตัวอย่างด้านบนเราสร้าง function incrementOne() ขึ้นมาจาก function add() โดยเราส่ง 1 เข้าไปเป็น parameter แล้วเราก็จะได้ function กลับมา
จากเดิม function add() ต้องใส่ parameters 2 ตัวในทันที พอทำ Partial applied แล้ว เราก็ส่ง parameter เข้าไปรอก่อน 1 ตัว
พอเรามี data สำหรับ parameter ตัวที่ 2 ก็ค่อยส่งตามเข้ามา

การทำแบบนี้จะทำให้เราสร้าง function ต่อยอดจาก function ที่มีอยู่เดิมแล้ว ได้สะดวกขึ้น
นำไปใช้งานก็สะดวก และสวยงานมากขึ้น

---

Example 2 (เพิ่มความซับซ้อน)

มาดูตัวอย่างที่ซับซ้อนมากขึ้น

มาสร้าง function ที่เอาไว้คำนวน ราคาสินค้าที่เป็นดอลลาร์ ผ่านการลดราคาเป็นเปอร์เซ็นต์ คำนวน tax สุดท้ายแปลงเป็นเงินบาท

type Item = {
  price: number
  quantity: number
}

const shoppingCart = [
  { price: 29.99, quantity: 2 },  // Two t-shirts
  { price: 49.99, quantity: 1 },  // One pair of jeans
  { price: 9.99, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

โค้ดเริ่มต้นในตัวอย่างด้านบน เรามีสินค้าในตะกร้า แล้วมี function calculatePriceInCart ที่เราไว้รวมราคาสินค้า

เรามาสร้าง functions คำนวณการลดราคา คำนวณ tax

type Item = {
  price: number
  quantity: number
}

const shoppingCart = [
  { price: 29.99, quantity: 2 },  // Two t-shirts
  { price: 49.99, quantity: 1 },  // One pair of jeans
  { price: 9.99, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

function applyDiscount(cartPrice: number, discountPercent: number): number {
  return cartPrice - (cartPrice * (discountPercent / 100))
}

function applyTax(discountedPrice: number, taxRate: number): number {
  return discountedPrice + (discountedPrice * (taxRate / 100))
}

const price = calculatePriceInCart(shoppingCart)
const priceAfterDiscount = applyDiscount(price, 10)
const priceAfterTax = applyTax(priceAfterDiscount, 7)

console.log({ priceAfterTax }) // { priceAfterTax: 57.673 }

ทีนี้เราก็เอามาแปลงให้เป็น Curried function
จะได้แบบนี้

type Item = {
  price: number
  quantity: number
}

const shoppingCart: Item[] = [
  { price: 10, quantity: 2 },  // Two t-shirts
  { price: 20, quantity: 1 },  // One pair of jeans
  { price: 3, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

function applyDiscount(cartPrice: number): (discountPercent: number) => number {
  return (discountPercent: number) => cartPrice - (cartPrice * (discountPercent / 100))
}

function applyTax(discountedPrice: number,): (taxRate: number) => number {
  return (taxRate: number) => discountedPrice + (discountedPrice * (taxRate / 100))
}

const price = calculatePriceInCart(shoppingCart)
const priceAfterDiscount = applyDiscount(price)(10)
const priceAfterTax = applyTax(priceAfterDiscount)(7)

console.log({ priceAfterTax })

จะเห็นว่าไม่ยากเลย
แต่ตอนเรียกใช้งานเราต้องใส่วงเล็บต่อๆกัน เราจะไม่คุ้ยเคยหน้าตาการเรียกใช้ function แบบนี้กันสักเท่าไรใช่ไหมครับ
เดี๋ยวด้านล่างผมจะพาแก้ปัญหานี้ แต่ขอไปเรื่อง pipe ก่อน

---

pipe function

อย่างที่บอกไปว่าประโยชน์อย่างหนึ่งของ Curried function คือทำให้เราเอา function มาใช้งานต่อๆ(compose)กันได้ง่ายขึ้น และส่วนตัวผมคิดว่าการใช้ pipe() เป็นการ compose function แล้วอ่านง่ายที่สุด

แต่ว่าใน Typescript ไม่ได้มี pipe operator มาให้เราใช้ ก็เลยจำเป็นต้องใช้ pipe function แทนไปก่อน
ส่วนตัวผมใช้ pipe() ที่อยู่ใน lib Effect นะครับ

How does pipe work?

มาดูกันว่า pipe มันทำงานยังไง

pipe() ใน Effect จะเริ่มต้นด้วยการรับ value เข้ามา

import { pipe } from "effect"

type Item = {
  price: number
  quantity: number
}

const shoppingCart: Item[] = [
  { price: 10, quantity: 2 },  // Two t-shirts
  { price: 20, quantity: 1 },  // One pair of jeans
  { price: 3, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

function applyDiscount(cartPrice: number): (discountPercent: number) => number {
  return (discountPercent: number) => cartPrice - (cartPrice * (discountPercent / 100))
}

function applyTax(discountedPrice: number,): (taxRate: number) => number {
  return (taxRate: number) => discountedPrice + (discountedPrice * (taxRate / 100))
}


const priceAfterTax = pipe(
  shoppingCart,
)

console.log({ priceAfterTax })

จากนั้นก็จะต้องตามด้วย function ซึ่ง parameter ใน function นี้จะมีได้แค่ตัวเดียว
นั่นคือทำไมเราต้องทำ function ของเราให้เป็น curried function

pipe จะเอา value ที่ได้ก่อนหน้ามาใส่ให้เรา เป็น argument ใน function ถัดไป
และ function นั้น จะต้อง return ด้วยนะ
แล้ว pipe ก็จะเอา return value ที่ได้จาก function ส่งต่อไปให้กับ function ถัดไป ถัดไป ถัดไป เรื่อยๆ
ถ้าไม่มี function ถัดไป ก็จะเอา return value ไปเก็บในตัวแปร const totalPrice = pipe() เป็นการจบการทำงานของ pipe()

มาดูโค้ดของเรา

import { pipe } from "effect"

type Item = {
  price: number
  quantity: number
}

const shoppingCart: Item[] = [
  { price: 10, quantity: 2 },  // Two t-shirts
  { price: 20, quantity: 1 },  // One pair of jeans
  { price: 3, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

function applyDiscount(cartPrice: number): (discountPercent: number) => number {
  return (discountPercent: number) => cartPrice - (cartPrice * (discountPercent / 100))
}

function applyTax(discountedPrice: number,): (taxRate: number) => number {
  return (taxRate: number) => discountedPrice + (discountedPrice * (taxRate / 100))
}

const priceAfterTax = pipe(
  shoppingCart,
  (shopCart) => calculatePriceInCart(shopCart),
)

console.log({ priceAfterTax })

จากโค้ดด้านบนเราเริ่มต้นด้วยการใส่ value shoppingCart ไปก่อน
แล้วตามด้วย function ที่รับ parameter 1 ตัว ซึ่ง value ของ parameter นี้ก็จะเป็นค่า value ของ shoppingCart น่ะแหละ
ในโค้ดด้านบนเราสร้าง function ที่รับ parameter ตัวเดียวด้วย arrow function

Limitation of Effect’s pipe function

pipe() ใน Effect สามารถเรียก function ต่อๆกันได้แค่ 20 functions นะครับ
ถ้า program เรายาวมากๆก็ให้ระวังละกันนะ ส่วนตัวผมไม่เคยไปถึงระดับนั้น
แต่ถ้าเพื่อนๆมี program flow ที่ไปถึงเกินว่า 20 functions ก็ให้ใช้ pipe() ซ้อนกันได้นะ

ผมจะเอา function คำนวน discount กับคำนวณ tax มาใช้ด้วย แบบนี้

import { pipe } from "effect"

type Item = {
  price: number
  quantity: number
}

const shoppingCart: Item[] = [
  { price: 10, quantity: 2 },  // Two t-shirts
  { price: 20, quantity: 1 },  // One pair of jeans
  { price: 3, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

function applyDiscount(cartPrice: number): (discountPercent: number) => number {
  return (discountPercent: number) => cartPrice - (cartPrice * (discountPercent / 100))
}

function applyTax(discountedPrice: number,): (taxRate: number) => number {
  return (taxRate: number) => discountedPrice + (discountedPrice * (taxRate / 100))
}

const priceAfterTax = pipe(
  shoppingCart,
  (shopCart) => calculatePriceInCart(shopCart),
  (price) => applyDiscount(price)(10),
  (discountedPrice) => applyTax(discountedPrice)(7)
)

ตรงนี้เพื่อนน่าจะเห็นแล้วว่า pipe มันใช้ยังไง
แต่ก็คงคิดใช่ไหมครับว่า มันน่าใช้ตรงไหน ต้องมาเขียน arrow function เพิ่มอีก ช่วยให้ compose functions ไม่เห็นง่ายเลย

คือถ้าใครคิดแบบนี้แสดงว่าตามผมทัน ฮ่าๆ
ผมตั้งใจแสดงให้เห็นว่าการที่เรามี functions ที่รับ parameters หลายๆตัว แล้วเอามาแปลงให้เป็น Curried function แบบที่ทำกันไปแล้วนั้น มันเอาไปใช้งานกับ pipe() ได้ยากครับ
แต่ผมไม่ได้บอกว่ามันผิดนะครับ ขึ้นอยู่กับว่าเราจะเอาไปใช้งานแบบไหน แต่กรณีของผม ผมจะเอาไปใช้กับ pipe() ไง

แล้วแบบไหนที่ง่ายต่อการเอาไปใช้กับ pipe() ละ
อันนี้ไม่ยากเลยครับ
เราแค่ ต้องเอา parameter ตัวแรกไปไว้เป็นตัวสุดท้าย เท่านั้นเองครับ
ในกรณีที่เรามี function ที่มี parameters แค่ 2 ตัว จะมองว่าเอามาสลับลำดับกันก็ได้

มาดูตัวอย่างกัน ใช้ตัวอย่างเดิมแหละ

function applyDiscount(cartPrice: number, discountPercent: number): number {
  return cartPrice - (cartPrice * (discountPercent / 100))
}

เราจะเอาไปทำเป็น Curried function ก็ให้สลับตำแหน่องของ parameters แบบนี้

มาดู code กัน

type Item = {
  price: number
  quantity: number
}

const shoppingCart: Item[] = [
  { price: 10, quantity: 2 },  // Two t-shirts
  { price: 20, quantity: 1 },  // One pair of jeans
  { price: 3, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

// function applyDiscount(cartPrice: number, discountPercent: number): number {
//   return cartPrice - (cartPrice * (discountPercent / 100))
// }

function applyDiscount(discountPercent: number): (cartPrice: number) => number {
  return (cartPrice: number) => cartPrice - (cartPrice * (discountPercent / 100))
}

แล้วก็เอามาใช้กับ pipe() แบบนี้

import { pipe } from "effect"

type Item = {
  price: number
  quantity: number
}

const shoppingCart: Item[] = [
  { price: 10, quantity: 2 },  // Two t-shirts
  { price: 20, quantity: 1 },  // One pair of jeans
  { price: 3, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

function applyDiscount(discountPercent: number): (cartPrice: number) => number {
  return (cartPrice: number) => cartPrice - (cartPrice * (discountPercent / 100))
}

const discountPercent = 10

const priceAfterTax = pipe(
  shoppingCart,
  (shopCart) => calculatePriceInCart(shopCart),
  (cartPrice) => applyDiscount(discountPercent)(cartPrice),
)

ในโค้ดด้านบน เรายังใช้ arrow function อยู่
ใน arrow function pipe() จะส่ง shoppingCart เข้ามาเป็น argument ของ arrow function จากนั้น เราก็เรียกใช้ calculatePriceInCart(shoppingCart)
ถ้าเราเจอว่า arguemnt กับ last function มันใช้ค่าเดียวกัน เราจะเขียนให้มันกระชับขึ้นได้
และ arrow function ถัดไปก็เหมือนกัน ที่ arrow function ได้รับ argument เป็น cartPrice จากนั้นเรียกใช้ applyDiscount(discountPercent)(cartPrice)
ตัว argument กับ last fucntion argument มันใช้ค่าเดียวกัน เราจะเขียนให้มันกระชับขึ้นได้เช่นกัน

const priceAfterTax = pipe(
  shoppingCart,
  (shopCart) => calculatePriceInCart(shopCart),
    ▲                                    ▲
    └────────────────────────────────────┘
  (cartPrice) => applyDiscount(discountPercent)(cartPrice),
      ▲                                             ▲
      └─────────────────────────────────────────────┘
)

เขียนใหม่เป็นแบบนี้

import { pipe } from "effect"

type Item = {
  price: number
  quantity: number
}

const shoppingCart: Item[] = [
  { price: 10, quantity: 2 },  // Two t-shirts
  { price: 20, quantity: 1 },  // One pair of jeans
  { price: 3, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

function applyDiscount(discountPercent: number): (cartPrice: number) => number {
  return (cartPrice: number) => cartPrice - (cartPrice * (discountPercent / 100))
}

const discountPercent = 10

const priceAfterTax = pipe(
  shoppingCart,
  calculatePriceInCart,
  applyDiscount(discountPercent),
)

จากโค้ดด้านบน จะเห็นว่า ใน pipe() ตัว function calculatePriceInCart เราไม่ได้ใส่ () เลย
ตรงนี้เพราะว่าตัว function calculatePriceInCart เป็น function ที่รับ parameter ตัวเดียวอยู่แล้ว และ pipe() ก็ต้องการ function ที่รับ parameter ตัวเดียว เราก็ส่ง function ไปเฉยๆได้เลย เราเรียกการส่ง function แบบนี้ว่า point-less หรือบางคนก็เรียก point-free ครับ

Unary Function

เราจะเรียก function ที่มี parameter ตัวเดียวว่า Unary function นะครับ
คำศัพท์ก็ไม่ต้องจำก็ได้นะ

ส่วน applyDiscount(discountPercent) ก็ทำ partial applied ด้วยการส่ง discountPercent เข้าไปที่ function applyDiscount() จากนั้นเดียว pipe() ก็จะเอา argument มาเติมให้เอง

ทั้งหมดเราก็จะอ่านจากบนลงล่างได้ง่ายๆเลยแบบนี้

มีส่วนลดอยู่ 10% (discountPercent = 10) มีตะกร้าสินค้า (shoppingCart) แล้วก็เอาไปคำนวนราคาในตะกร้า (calculatePriceInCart) แล้วก็ใส่ส่วนลด 10% (applyDiscount(discountPercent))

จะเห็นว่าอ่านง่ายเลยใช่ไหมครับ

ถ้าเราจะเอาตัวแปรมารับค่าจาก function แล้วค่อยใชัตัวแปรนั้นในอีก function นึงก็ไม่ได้ผิดนะครับ ส่วนตัวผมมองว่าใช้ pipe() มันอ่านง่ายกว่า เราไม่ต้องคอยจำตัวแปรในหัวเวลาอ่านโค้ด
ยิ่งถ้าเราตั้งชื่อ function ให้มันสื่อถึงงานที่มันทำ เราไม่ต้องไปสนใจเลยว่า function มันจะคำนวณยังไง เราก็ยังสามารถเข้าใจภาพรวมของโปรแกรมได้ง่ายๆเลย

ทีนี้เราก็ใส่ applyTax เข้าไปด้วย

import { pipe } from "effect"

type Item = {
  price: number
  quantity: number
}

const shoppingCart: Item[] = [
  { price: 10, quantity: 2 },  // Two t-shirts
  { price: 20, quantity: 1 },  // One pair of jeans
  { price: 3, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

function applyDiscount(discountPercent: number): (cartPrice: number) => number {
  return (cartPrice: number) => cartPrice - (cartPrice * (discountPercent / 100))
}

function applyTax(taxRate: number): (discountedPrice: number) => number {
  return (discountedPrice: number) => discountedPrice + (discountedPrice * (taxRate / 100))
}

function toThaiBaht(thbPerUsd: number): (price: number) => number {
  return (price: number) => price * thbPerUsd
}

const discountPercent = 10
const taxPercent = 7
const thbPerUsd = 35.2
const priceAfterTax = pipe(
  shoppingCart,
  calculatePriceInCart,
  applyDiscount(discountPercent),
  applyTax(taxPercent),
  toThaiBaht(thbPerUsd)
)

console.log({ priceAfterTax })

จากใน pipe() เราก็จะอ่านว่า

มีตะกร้าสินค้า
|> คำนวณราคาทั้งตะกร้า
|> ใส่ส่วนลด 10%
|> ใส่ tax 7%
|> แปลงเป็นหน่วยบาท ด้วย rate=35.2
|> จะได้ราคาที่ต้องจ่าย

---

Function Overloading

แต่ในบางครั้ง เราก็อยากจะใช้ function ตัวนั้นตัวเดียว ไม่ได้เอามา compose กันเหมือนในตัวอย่างก่อนหน้า
เช่นถ้าเราแค่อยากลองคำนวณ priceAfterDiscounted เราก็จะใช้แค่ function applyDiscount() อย่างเดียว

เราก็จะเรียกใช้ function แบบนี้ applyDiscount(10)(100)

function applyDiscount(discountPercent: number): (cartPrice: number) => number {
  return (cartPrice: number) => cartPrice - (cartPrice * (discountPercent / 100))
}

const price = 100
const priceAfterDiscounted = applyDiscount(10)(100)

เราต้องใส่วงเล็บต่อๆกัน โดยเราต้องใส่ discountPercent ก่อน แล้วจึงใส่ price ตามหลัง

แต่ในทีแรก function เดิมในตอนที่มี parameters 2 ตัว เราต้องใส่ price ก่อนแล้วตามด้วย discountPercent

function applyDiscount(cartPrice: number, discountPercent: number): number {
  return cartPrice - (cartPrice * (discountPercent / 100))
}

จากปัญหาด้านบน ถ้าเป็น binary function ก็ให้เอา price ไว้ด้านหน้า
ถ้าเป็น curried function แล้วให้เอา price ไว้ด้านหลัง
เราสามารถใช้ Typescript feature Function Overloading เพื่อแก้ปัญหานี้ได้

มาดูตัวอย่างกัน

function applyDiscount(cartPriceOrDiscountPercent: number, discountPercent: number): number;
function applyDiscount(cartPriceOrDiscountPercent: number): (cartPrice: number) => number;
function applyDiscount(cartPriceOrDiscountPercent: number, discountPercent?: number): number | ((cartPrice: number) => number) {
  if (discountPercent) {
    const cartPrice = cartPriceOrDiscountPercent
    return cartPrice - (cartPrice * (discountPercent / 100))
  }
  return (cartPrice: number) => cartPrice - (cartPrice * (cartPriceOrDiscountPercent / 100))
}

ด้านบนเป็นตัวอย่างการเขียน Function Overloading
ทำให้เรามี function ที่มีชื่อเดียวกัน แต่ parameters และ return type ไม่เหมือนกันได้
แต่พอจะเขียนการทำงานจริงๆ มันจะซับซ้อนตรงนี้แหละ
การใช้ Function Overloading ผมจะไม่ลงลึกมากนะครับ
แค่ยกตัวอย่างมาเพื่อให้เพื่อนๆเห็นว่าสามารถแก้ปัญหาแบบนี้ได้ด้วย

ใครสนใจเรื่อง Function overloading ไปอ่านได้ที่ Blog ของคุณ Dmitri Pavlutin

---

Dual Function from Effect

มาดู solution ที่ผมใช้ประจำในทุกวันนี้นะครับ
เดี๋ยวตอนท้ายจะใส่ตัวอย่างที่ผมใช้เมื่อนานมาแล้วให้ด้วยนะครับ

ใน Effect มี dual() ทำให้เราแก้ปัญหาด้านบนได้ง่ายกว่า

การใช้ dual() จะทำให้เรา define function แบบ binary function ไปเลยครั้งเดียว แล้ว dual() จะเอาไปทำเป็น curried ให้เราเองเลย แล้วมันก็จะสลับตำแหน่งให้เลย
แต่เราต้อง define type เอง ทั้งสองแบบ dual() ไม่สามารถ infer type ให้เราได้

How to use dual()

มาดูวิธีใช้กัน

import { Function } from "effect"

function _applyDiscount(cartPrice: number, discountPercent: number): number {
  return cartPrice - (cartPrice * (discountPercent / 100))
}

const applyDiscount = Function.dual<
  (discountedPrice: number) => (cartPrice: number) => number,
  typeof _applyDiscount
>(2, _applyDiscount)

เรามี function อยู่ก่อนแล้ว ผมใช้ชื่อว่า _applyDiscount() นะครับ ตามโค้ดด้านบน
เราจะเอามาใส่ใน dual() นี่แหละ
เราจะต้องบอก dual() ว่า function ของเรามี parameters กี่ตัว ในที่นี้คือ 2 ครับ แล้วตามด้วย function ของเรา
ส่วน type ของ function นี้ก็คือส่วนนี้
ในส่วนของ type เราจะต้องเอา type ของ function ที่มี parameters มากที่สุดไว้เป็นตัวสุดท้ายนะครับ ในที่นี้คือ typeof _applyDiscount

Function.dual<
  (discountedPrice: number) => (cartPrice: number) => number,
  typeof _applyDiscount
>

หรือถ้าใครไม่ได้มี function แยกออกมา อยากใส่การทำงานของ function ไว้ใน dual() เลย
ก็จะเขียนแบบนี้

import { Function } from "effect"

const applyDiscount = Function.dual<
  (discountedPrice: number) => (cartPrice: number) => number,
  (cartPrice: number, discountPercent: number) => number
>(
  2,
  (cartPrice: number, discountPercent: number) => cartPrice - (cartPrice * (discountPercent / 100))
)

applyDiscount
const applyDiscount: ((discountedPrice: number) => (cartPrice: number) => number) & ((cartPrice: number, discountPercent: number) => number)

ส่วนการใช้งานก็จะเอามาใช้แบบนี้

import { Function } from "effect"

function _applyDiscount(cartPrice: number, discountPercent: number): number {
  return cartPrice - (cartPrice * (discountPercent / 100))
}

const applyDiscount = Function.dual<
  (discountedPrice: number) => (cartPrice: number) => number,
  typeof _applyDiscount
>(
  2,
  _applyDiscount
)

const discountPercent = 10
const price = 100

const discount1 = applyDiscount(price, discountPercent)
console.log("discount1:", discount1) // discount1: 90

const discount2 = applyDiscount(discountPercent)(price)
console.log("discount2:", discount2) // discount2: 90

const discount10Percent = applyDiscount(discountPercent)
const discount3 = discount10Percent(price)
console.log("discount3:", discount3) // discount3: 90

Let’s replace all our functions with dual()

import { pipe, Function } from "effect"

type Item = {
  price: number
  quantity: number
}

const shoppingCart: Item[] = [
  { price: 10, quantity: 2 },  // Two t-shirts
  { price: 20, quantity: 1 },  // One pair of jeans
  { price: 3, quantity: 3 }    // Three pairs of socks
]

function calculatePriceInCart(cart: Item[]): number {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0)
}

function _applyDiscount(cartPrice: number, discountPercent: number): number {
  return cartPrice - (cartPrice * (discountPercent / 100))
}

const applyDiscount = Function.dual<
  (discountedPrice: number) => (cartPrice: number) => number,
  typeof _applyDiscount
>(2, _applyDiscount)

function _applyTax(discountedPrice: number, taxRate: number): number {
  return discountedPrice + (discountedPrice * (taxRate / 100))
}

const applyTax = Function.dual<
  (taxRate: number) => (discountedPrice: number) => number,
  typeof _applyTax
>(2, _applyTax)

function _toThaiBaht(price: number, thbPerUsd: number) {
  return price * thbPerUsd
}

const toThaiBaht = Function.dual<
  (thbPerUsd: number) => (price: number) => number,
  typeof _toThaiBaht
>(2, _toThaiBaht)

const discountPercent = 10
const taxPercent = 7
const thbPerUsd = 35.2
const priceAfterTax = pipe(
  shoppingCart,
  calculatePriceInCart,
  applyDiscount(discountPercent),
  applyTax(taxPercent),
  toThaiBaht(thbPerUsd)
)

console.log({ priceAfterTax })

What if my functions have 3 or more parameters?

ส่วนนี้ dual() ไม่ได้ support ที่จะแปลง functions นั้นให้เป็น curried ทั้งหมดนะครับ
จะได้แค่เอา parameter ตัวแรกแยกไปเป็น Curried function อย่างเดียว

ทำไมละ
ต้องย้อนกลับไปก่อนว่า เราต้องการใช้ function กับ pipe() นะครับ pipe ต้องการ function ที่รับ parameter แค่ตัวเดียว
เราก็เลยจะดึง parameter ตัวแรก แยกไปทำ Curried Function แค่ครั้งเดียว
ซึ่ง dual() support แค่เรื่องนี้
ส่วนตัวผมก็มองว่ามันควรจะเป็นแบบนี้แหละ

---

Conclusion

blog นี้เพื่อนๆน่าจะได้รู้จักกับ

• Curry
• Unary function
• Binary function
• pipe function
• Effect’s dual function

ขอบคุณเพื่อนๆที่อ่านมาจนถึงตรงนี้นะครับ
blog นี้ทีแรกคิดว่าเขียนวันเดียวก็น่าจะเสร็จ ทีแรกก็เขียนเรื่องของ dual() เลย แต่คิดไปคิดมา อยากให้รู้ที่มาที่ไปด้วย ก็เลยเพิ่มตัวอย่าง เปลี่ยนไปเปลี่ยนมา สุดท้ายใช้เวลา 2 วันเลย

หวังว่าเพื่อนๆน่าจะนำไปใช้งานได้นะครับ โดยเฉพาะคนที่ชอบใช้ pipe() นะครับ
อนาคตถ้า TC39 ปล่อย pipe operator ออกมาให้ใช้ dual() ก็น่าจะฮิตขึ้นมาอีกเยอะเลย

ใน blog นี้ผมพยายามทำให้มัน practical ครับ ใส่ตัวอย่างให้เห็นภาพ
แต่ถ้าจะเอาให้ถูกต้องผมควรใช้วิธีการอธิบายแบบ Self กับ That ซึ่งผมคิดตัวอย่างไม่ออก ฮ่าๆ

ส่วน blog นี้ยังไม่จบ ผมแถมให้ว่าเมื่อก่อนผมแปลง function ให้ไปเป็น Curried function ยังไง

---

Bonus Another solution

ผมใช้ code นี้ครับ
ผมก๊อปมาจาก lib date-fns อีกทีนึงนะครับ

/**
 * The type of a function that can be converted to FP.
 */
export type FPFnInput = (...args: any[]) => any;

/**
 * The supported arity type.
 */
export type FPArity = 1 | 2 | 3 | 4;

/**
 * FP function interface. It infers the arity of the function and returns the
 * corresponding FP function interface.
 */
export type FPFn<Fn extends FPFnInput, Arity extends FPArity> = Arity extends 4
  ? FPFn4<
    ReturnType<Fn>,
    Parameters<Fn>[3],
    Parameters<Fn>[2],
    Parameters<Fn>[1],
    Parameters<Fn>[0]
  >
  : Arity extends 3
  ? FPFn3<
    ReturnType<Fn>,
    Parameters<Fn>[2],
    Parameters<Fn>[1],
    Parameters<Fn>[0]
  >
  : Arity extends 2
  ? FPFn2<ReturnType<Fn>, Parameters<Fn>[1], Parameters<Fn>[0]>
  : Arity extends 1
  ? FPFn1<ReturnType<Fn>, Parameters<Fn>[0]>
  : never;

/**
 * FP function interface with 1 arguments.
 */
export interface FPFn1<Result, Arg> {
  /**
   * Curried version of the function. Returns itself.
   */
  (): FPFn1<Result, Arg>;

  /**
   * Returns the result of the function call.
   */
  (arg: Arg): Result;
}

/**
 * FP function interface with 2 arguments.
 */
export interface FPFn2<Result, Arg2, Arg1> {
  /**
   * Curried version of the function. Returns itself.
   */
  (): FPFn2<Result, Arg2, Arg1>;

  /**
   * Curried version of the function. Returns a function that accepts the rest
   * arguments.
   */
  (arg2: Arg2): FPFn1<Result, Arg1>;

  /**
   * Returns the result of the function call.
   */
  (arg2: Arg2, arg1: Arg1): Result;
}

/**
 * FP function interface with 3 arguments.
 */
export interface FPFn3<Result, Arg3, Arg2, Arg1> {
  /**
   * Curried version of the function. Returns itself.
   */
  (): FPFn3<Result, Arg3, Arg2, Arg1>;

  /**
   * Curried version of the function. Returns a function that accepts the rest
   * arguments.
   */
  (arg3: Arg3): FPFn2<Result, Arg2, Arg1>;

  /**
   * Curried version of the function. Returns a function that accepts the rest
   * arguments.
   */
  (arg3: Arg3, arg2: Arg2): FPFn1<Result, Arg1>;

  /**
   * Returns the result of the function call.
   */
  (arg3: Arg3, arg2: Arg2, arg1: Arg1): Result;
}

/**
 * FP function interface with 4 arguments.
 */
export interface FPFn4<Result, Arg4, Arg3, Arg2, Arg1> {
  /**
   * Curried version of the function. Returns itself.
   */
  (): FPFn4<Result, Arg4, Arg3, Arg2, Arg1>;

  /**
   * Curried version of the function. Returns a function that accepts the rest
   * arguments.
   */
  (arg4: Arg4): FPFn3<Result, Arg3, Arg2, Arg1>;

  /**
   * Curried version of the function. Returns a function that accepts the rest
   * arguments.
   */
  (arg4: Arg4, arg3: Arg3): FPFn2<Result, Arg2, Arg1>;

  /**
   * Curried version of the function. Returns a function that accepts the rest
   * arguments.
   */
  (arg4: Arg4, arg3: Arg3, arg2: Arg2): FPFn1<Result, Arg1>;

  /**
   * Returns the result of the function call.
   */
  (arg4: Arg4, arg3: Arg3, arg2: Arg2, arg1: Arg1): Result;
}
/**
 * Converts a function to a curried function that accepts arguments in reverse
 * order.
 *
 * @param fn - The function to convert to FP
 * @param arity - The arity of the function
 * @param curriedArgs - The curried arguments
 *
 * @returns FP version of the function
 *
 * @private
 */
export function convertToFP<Fn extends FPFnInput, Arity extends FPArity>(
  fn: Fn,
  arity: Arity,
  curriedArgs: unknown[] = [],
): FPFn<Fn, Arity> {
  return (
    curriedArgs.length >= arity
      ? fn(...curriedArgs.slice(0, arity).reverse())
      : (...args: unknown[]) => convertToFP(fn, arity, curriedArgs.concat(args))
  ) as FPFn<Fn, Arity>;
}

// usage example
const _addAndMultiply = (a: number, b: number, multiplier: number) => (a + b) * multiplier

const addAndMultiply = convertToFP(_addAndMultiply, 3)

const a = 10
const b = 20
const c = 3
const add1: number = addAndMultiply(c, b, a)
const add2 = addAndMultiply(c, b)(a)
const add3 = addAndMultiply(c)(b)(a)
const add4 = addAndMultiply(c)(b, a)

code ด้านบน สามารถแปลง function เป็น Curried function ได้หลากหลายมากๆ มากกว่า dual() ด้วย แต่ผมไม่ได้มี use cases เยอะขนาดนั้น

---

Crafted with care 📝❤️ ✨ byCodeSook

---