Higher Order Functions ใน JavaScript: คู่มือพร้อมตัวอย่าง

นักพัฒนาคงเคยใช้ regular JavaScript functions เรียกว่า first-order functions ไม่รับ function เป็น parameter และไม่ return function

function hello(name) {
  return "Hello, " + name;
}
console.log(hello("Career Karma")); // Hello, Career Karma

บทความนี้พูดถึง Higher Order Functions (HOF): functions ที่รับ function เป็น argument หรือ return function ช่วยลดโค้ด ให้ readable มากขึ้น จะแนะนำ HOF และ functional programming พร้อม 2 array methods ยอดนิยมที่ใช้ HOF concept

ตัวอย่าง Higher Order Functions พื้นฐาน

1. Calculator HOF

HOF รับ callback function เป็น argument และ return ผลลัพธ์ของ callback:

// Higher Order Function
function higherOrderFunction(num1, num2, cb) {
  return cb(num1, num2); // invoke callback พร้อม arguments
}

// Callback functions (first-order functions)
function add(num1, num2) { return num1 + num2; }
function multiply(num1, num2) { return num1 * num2; }
function divide(num1, num2) { return num1 / num2; }
function subtract(num1, num2) { return num1 - num2; }
function modulo(num1, num2) { return num1 % num2; }

// ใช้งาน
console.log(higherOrderFunction(43, 13, add)); // 56

HOF หนึ่งตัว ใช้ callback ต่างกันได้ตาม operation ที่ต้องการ

2. Event Listener เป็น HOF

addEventListener เป็น HOF เพราะรับ anonymous function เป็น argument ตัวที่ 2:

<button>Click Me!</button>
<script>
const button = document.querySelector("button");
button.addEventListener("click", (e) => {
  alert("The button has been clicked!");
});
</script>

Event listener structure = HOF แบบง่าย รับ anonymous function เป็น parameter ตัวที่ 2

Advanced Array Methods (ES6+)

Built-in array methods ใหม่ใน ES6 เป็น HOF 特別 ใช้ iterate array และ manipulate หรือ return array ใหม่ ช่วย abstract logic ให้ readable และ performant

สมมติมี array professors:

const professors = ["Smith", "Jones", "Wilson", "Taylor"];

forEach

Pre-ES6 ต้องใช้ for loop:

function forEachES5(arr) {
  for (let i = 0; i < arr.length; i++) {
    arr[i] = "Professor " + arr[i];
  }
  return arr;
}

ES6 ใช้ forEach:

function forEachES6(arr) {
  arr.forEach((professor, index, origArr) => {
    origArr[index] = "Professor " + professor;
  });
  return arr;
}

forEach รับ callback function (ทำให้เป็น HOF) callback = "action" ต่อแต่ละ item มี optional parameters: index, array copy ลำดับ parameter สำคัญ: 1) callback 2) index 3) array

forEach ไม่ return ค่า manipulate array เดิมโดยตรง

map

map ใกล้เคียง forEach แต่ return array ใหม่ ไม่ affect array เดิม

Pre-ES6:

function mapES5(arr) {
  let newArr = [];
  for (let i = 0; i < arr.length; i++) {
    newArr.push("Professor " + arr[i]);
  }
  return newArr;
}

ES6 map:

function mapWithES6(arr) {
  const mapped = arr.map(professor => {
    return "Professor " + professor;
  });
  return mapped;
}

จุดเด่น: assign ให้ variable ได้เลย หรือ return ทั้ง function ไม่ต้อง push manual จำไว้: ต้องมี return ใน callback!

สรุป

Higher Order Functions เป็น concept สำคัญใน JavaScript ช่วย abstract logic ให้ readable และ performant บทความครอบคลุม: calculator HOF, event listeners, forEach, map ลองฝึกต่อเองเพื่อ master HOF และ functional programming!