หัวข้อ 4: ฟังก์ชัน Function Declaration, Expression และ Arrow Function

คำจำกัดความ

ฟังก์ชัน (Function) คือชุดคำสั่งที่ตั้งชื่อหรือเก็บไว้เพื่อเรียกใช้ซ้ำ ช่วยแยกงาน ลดโค้ดซ้ำ และทำให้โปรแกรมอ่านง่ายขึ้น

%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#458588", "primaryTextColor": "#fbf1c7", "primaryBorderColor": "#fabd2f", "lineColor": "#a89984", "secondaryColor": "#b8bb26", "tertiaryColor": "#d3869b", "background": "#282828", "mainBkg": "#3c3836", "textColor": "#ebdbb2"}}}%%
flowchart LR
  A["Input
Parameters"] --> B["Function
ประมวลผล"]
  B --> C["Output
Return Value"]
  B --> D["Side Effect
เช่น console.log"]

Function Declaration

Function Declaration ถูก hoist จึงเรียกใช้ก่อนประกาศได้

console.log(add(2, 3)); // 5

function add(a, b) {
  // คืนค่าผลบวกของ a และ b
  return a + b;
}

Function Expression

Function Expression คือการเก็บฟังก์ชันไว้ในตัวแปร ไม่ถูก hoist แบบเรียกใช้ก่อนได้

const multiply = function (a, b) {
  // คืนค่าผลคูณของ a และ b
  return a * b;
};

console.log(multiply(4, 5)); // 20

Arrow Function

Arrow Function เขียนสั้น และไม่มี this ของตัวเอง

const divide = (a, b) => {
  // ตรวจไม่ให้หารด้วยศูนย์
  if (b === 0) return null;
  return a / b;
};

console.log(divide(10, 2)); // 5

Parameters และ Default Parameters

function calculateTotal(price, quantity = 1) {
  // quantity มีค่าเริ่มต้นเป็น 1 ถ้าไม่ส่ง argument มา
  return price * quantity;
}

console.log(calculateTotal(100)); // 100
console.log(calculateTotal(100, 3)); // 300

Rest Parameters

Rest Parameters รับ argument ได้ไม่จำกัดจำนวนเป็น array

function sum(...numbers) {
  // รวมตัวเลขทั้งหมดใน array numbers
  return numbers.reduce((total, number) => total + number, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

Return Value และ Early Return

Early Return คือการออกจากฟังก์ชันเร็วเมื่อเงื่อนไขไม่ผ่าน ทำให้ลดการซ้อน if

function getGrade(score) {
  if (score < 0 || score > 100) {
    return "คะแนนไม่ถูกต้อง";
  }

  if (score >= 80) return "A";
  if (score >= 70) return "B";
  if (score >= 60) return "C";
  if (score >= 50) return "D";
  return "F";
}

console.log(getGrade(85)); // A
console.log(getGrade(120)); // คะแนนไม่ถูกต้อง

Higher-Order Function

Higher-Order Function คือฟังก์ชันที่รับฟังก์ชันเป็น argument หรือคืนค่ากลับเป็นฟังก์ชัน

function createMultiplier(factor) {
  return function multiplyByFactor(value) {
    return value * factor;
  };
}

const double = createMultiplier(2);
console.log(double(10)); // 20

ตารางเปรียบเทียบฟังก์ชัน

สมการฟังก์ชันเชิงคณิตศาสตร์

โดยที่ f(x) คือค่าที่ฟังก์ชันคืนกลับ, x คือ input, 2x + 1 คือกระบวนการคำนวณภายในฟังก์ชัน

แบบทดสอบหลังเรียน

1. Function Declaration และ Function Expression ต่างกันอย่างไร
2. Arrow Function ไม่มี this ของตัวเองหมายความว่าอะไร
3. Default Parameter ใช้ทำอะไร
4. Rest Parameter มีรูปแบบอย่างไร
5. Higher-Order Function คืออะไร

กลับสัปดาห์ที่ 4