สำหรับใครที่เคยใช้เจ้าแพะหรือ ramdaJS มาก่อนคงได้ยินหรือเคยใช้ pipe() มาอยู่แล้ว ซึ่งพี่ pipe() เอาไว้ทำอะไรน่ะเหรอ ดูตัวอย่างเลยครับ

getFirstChar( toLowerCase(data))

ทุกเห็นคงคิดว่าก็ไม่เห็นมีไรเลยซับซ้อนตรงไหนแค่ 2 functions เอง แต่ถ้าสมมุติเป็นแบบนี้ล่ะ

getFirstChar( toLowerCase(convertAsciiToText(getName(data))))

เฮ๊~~ ทุกคนกำลังคิดแบบนี้อยู่แน่ๆ

ก่อนที่เราจะมาพูดถึงวิธีการแก้ไขปัญหา เรามาพูดถึงแนวคิดของเจ้า pipe กันก่อน ต้องย้อนกลับไปความรู้ทางคณิตศาสตร์ตอน ม. 5 การเลยคือเรื่อง relation and function ต้องขอบอกก่อนว่าผมก็ไม่เก่งคณิตศาสตร์แต่ผมจะพยายามอธิบายให้ง่ายที่สุดเท่าที่จะทำได้นะครับ

Math #1 basic function

สมมุติว่าผมสร้าง function ตัวนึงสำหรับรับค่า x เพื่อนำไปบวก 2

f(x) = x + 2

ทีนี้ผมสร้างอีก function นึงสำหรับรับค่า x แล้วทำไปคูณ 5

g(x) = x * 5

เริ่มจาก function แรกก่อน

f(2) = 2 + 2
     = 4

ต่อมาตัวก็เป็น function g

g(2) = 2 * 5
     = 10

นี้ก็เป็นตัวอย่างเล็กๆน้อยจากเรื่อง function สำหรับ ม. 5 ต่อไปมาเริ่มในสิ่งที่ยากขึ้นอีกระดับนึงเรียกว่า composite function เริ่ม!!

Math #2 Composite function
ง่ายๆมันคือการรวม function เข้าด้วยกันนั้นเอง ผมขอยก 2 functions ด้านบนมาด้วยนะครับจะได้ไม่เสียเวลา มันก็จะได้แบบนี้

อันดับแรกผมเอา 2 function2 นี้รวมกัน

f(g(x))

ผมจะเขียนแนวการคิดไปทีละขั้นตอนเน้อ...

f(g(x)) = f(x * 5)
        = (x * 5) + 2

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

f(g(2)) = f(2 * 5)
        = (2 * 5) + 2
        = 10 + 2
        = 12

เอ๊ะแล้วเจ้า pipe() สุดที่รักของเรามันเกี่ยวอะไรกับคณิตศาสตร์ชวนปวดหัว ผมต้องบอกเลยว่ามันคืออันเดียวกัน ผมจะเปรียบเทียบให้ดู

f(g(x)) = getFirstChar( toLowerCase(data))

เห็นมั๊ยว่าเหมือนกันเป๊ะๆ เรามาดูโค๊ด pipe() กันเลย

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x)

สำหรับใครที่ไม่รู้จัก Rest Parameter & Reduce Parameter ตามนี้โล๊ดวิธีการใช้ตัว pipe() ก็ตามนี้เลย

pipe(getFirstChar, toLowerCase, convertAsciiToText, getName)(data)

เห็นมั๊ยว่าสะดวกและอ่านงานกว่าเยอะ ถือว่าเป็นวิธีที่ดีมากๆเป็นไงบ้างครับ สำหรับอะไรแบบนี้

Ref:

pipe

rest parameter

reduce