reveal.js

# ฟังก์ชัน Function Declaration, Expression และ Arrow Function

Lesson 4 - JavaScript พื้นฐาน

---

## คำจำกัดความ

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

<pre class="mermaid">
%%{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<br/>Parameters"] --> B["Function<br/>ประมวลผล"]
  B --> C["Output<br/>Return Value"]
  B --> D["Side Effect<br/>เช่น console.log"]
</pre>

---

## Function Declaration

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

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

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

---

## Function Expression

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

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

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

---

## Arrow Function

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

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

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

---

## Parameters และ Default Parameters

```js
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

```js
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

```js
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 หรือคืนค่ากลับเป็นฟังก์ชัน

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

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

---

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

| รูปแบบ | Hoisting | จุดเด่น |
|---|---|---|
| Function Declaration | เรียกก่อนประกาศได้ | อ่านง่าย เหมาะกับฟังก์ชันหลัก |
| Function Expression | เรียกก่อนประกาศไม่ได้ | เก็บเป็นค่า ส่งต่อได้ |
| Arrow Function | เรียกก่อนประกาศไม่ได้ | สั้น ไม่มี `this` ของตัวเอง |

---

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

โดยที่ **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 คืออะไร

---

## End

<a href="/web-programming/04-javascript-basic/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>