Higher Order Functions in Javascript

ต้องบอกก่อนว่า เพิ่งศึกษาเรื่อง Higher order function ได้ประมาณสัปดาห์นึงจากหลายๆเว็ป เลยอยากบันทึกๆไว้เล่นๆ ว่าตัวเองอ่านอะไรไปบ้าง ไม่ได้เป็นบทความแปลจากเว็ปไหนทั้งสิ้น

Functions ของ Javascript เปรียบได้กับ Object หรือ ตัวแปรนึงบนโค๊ด เราสามารถส่งมันไปเป็น argument ของ functions อื่นๆแล้ว return เป็น functions ใหม่ได้ จึงเป็นหลักการของ Higher Order Functions ขึ้นมา

ก่อนจะรู้จัก Higher Order Functions ควรที่จะรู้จักคำว่า Pure Functions ก่อน
Pure Functions คือ function ที่ไม่ส่งกระทบต่อภายนอก functions นั้น จะ return เป็นของใหม่ออกมาเสมอ เพื่อไม่ให้ไปส่งผมกับตัวแปรอื่นๆในโปรแกรม

ตัวอย่าง Pure Functions

เรามาดูตัวอย่างของ Higher Order Functions กันบ้าง หลักการง่ายๆคือ การที่ functions นึง return functions ใหม่ออกมา

เทียบกับ Pure Functions ด้านบนถ้าเราต้องการ console.log functions อื่นๆ ก็ต้องครอบทุกๆรอบ เราเลยสร้าง functions ที่เอาไว้ console.log function ที่ส่งค่ามา
ในตอนที่เราเรียกคำสั่ง logSomeThing ครั้งแรกแล้วส่ง add ไปเป็น argument จะเปรียบได้กับ

logAdd = (x, y) => { console.log(add(x, y)) }

เพราะ functions logSomeThing จะ return functions สำหรับ console.log funtions ที่เป็นเราส่งไป

นำมาประยุกต์กับ React

เราจึงได้ Higher Order Component ขึ้นมา หลักการง่ายๆคือ functions ที่จะ return Component ออกมานั่นเอง

ตัวอย่าง Higher Order Component

จากตัวอย่างด้านบน CalculateWrapper จะ return Component ที่เราส่งไป รวมกับ Component ที่ครอบอยู่ด้วย ทำให้เราสามารถยุบ Component ที่ซ้ำกันของ Increment และ Decrease ได้

ในเนื้อหาของ Higher Order Component ยังมีเนื้อหาอีกหลายส่วน เกี่ยวกับการ เปลี่ยนค่า Prop การ Inheritance Component และอื่นๆ มีเขียนไว้แบบละเอียดมาก สามารถอ่านเพิ่มเติมได้ที่

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.