12: Functions

สร้างชุดคำสั่งที่นำกลับมาใช้ใหม่ได้ ด้วยมาตรฐาน ES6

1. Function Basics

Function คือ "โรงงานผลิต" ที่รับวัตถุดิบ (Input) เข้าไปแปรรูป แล้วส่งผลลัพธ์ (Output) ออกมา

องค์ประกอบหลัก
  • Input Parameters: ค่าที่ส่งเข้าไปในฟังก์ชัน
  • Output Return: ค่าที่ฟังก์ชันส่งคืนกลับมา
JS 
function sayHello(name) {
    return "Hello " + name;
}

// เรียกใช้งาน (Call)
let msg = sayHello("Somchai");
console.log(msg); // "Hello Somchai"
Return vs No Return (Void)
✅ แบบคืนค่า (Return)

ทำงานเสร็จแล้ว ส่งค่ากลับมา ให้ตัวแปรอื่นเอาไปใช้ต่อได้

JS 
function add(a, b) {
    return a + b; // ส่งเลขผลรวมกลับไป
}

let sum = add(10, 5); // sum มีค่า 15
console.log(sum * 2); // เอาไปคูณต่อได้ (ได้ 30)
❌ แบบไม่คืนค่า (Void)

ทำงานเสร็จแล้ว จบเลย (เช่น แค่แสดงผล) ไม่ส่งค่าอะไรกลับมา

JS 
function notify(msg) {
    alert("แจ้งเตือน: " + msg);
    // ไม่มี return
}

let result = notify("ระวัง!"); // result เป็น undefined
// เอาไปคำนวณต่อไม่ได้

2. Arrow Functions (ES6)

รูปแบบการเขียนฟังก์ชันสมัยใหม่ (parameter) => {statements} ที่สั้นกระชับและนิยมใช้มากใน React/Node.js

1. แบบเต็ม (Full Syntax)

ใช้เมื่อมีคำสั่งหลายบรรทัด ต้องมีปีกกา {} และ return

JS 
const calcTax = (price) => {
    let tax = price * 0.07;
    let total = price + tax;
    return total; // ต้องเขียน return เอง
}
2. แบบย่อ (Shorthand) เจอบ่อย

ใช้เมื่อมีคำสั่ง บรรทัดเดียว ตัดปีกกาและ return ทิ้งได้เลย (Implicit Return)

JS 
// รับ price คืนค่า price * 1.07 ทันที
const calcTax = (price) => price * 1.07; 

console.log(calcTax(100)); // 107
Pro Tip: กฎการใส่วงเล็บ () ให้ Parameter
1 ตัว ไม่ต้องใส่วงเล็บก็ได้! (นิยมมาก)
JS 
// เขียนแบบนี้ได้เลย (Clean Code)
const double = n => n * 2;
0 หรือตั้งแต่ 2 ตัวขึ้นไป ต้องใส่วงเล็บเสมอ
JS 
// ไม่มี Param
const sayHi = () => console.log("Hi");

// หลาย Params
const add = (a, b) => a + b;

3. Built-in Functions (ฟังก์ชันสำเร็จรูป)

JavaScript เตรียมฟังก์ชันดี ๆ ไว้ให้เรียกใช้เยอะมาก ไม่ต้องเขียนเองทุกอย่าง

หมวดหมู่ ฟังก์ชัน หน้าที่ ตัวอย่าง
Interaction alert(msg) เด้งหน้าต่างแจ้งเตือน alert("Hello");
prompt(msg) เด้งหน้าต่างให้กรอกข้อมูล let name = prompt("ชื่ออะไร?");
Math Math.random() สุ่มเลข 0.0 - 1.0 Math.random();
Math.floor(n) ปัดเศษลงเป็นจำนวนเต็ม Math.floor(5.9); // 5
Math.max(a,b,c) หาค่ามากที่สุด Math.max(10, 5, 20); // 20
Convert parseInt(str) แปลงข้อความ เป็น จำนวนเต็ม parseInt("10.5"); // 10
Number(str) แปลงเป็นตัวเลข (เก็บทศนิยม) Number("10.5"); // 10.5
String .replace(old, new) แทนที่คำ (เฉพาะคำแรกที่เจอ) "Hi Bob".replace("Bob", "Alice")
// "Hi Alice"
.trim() ตัดช่องว่าง หน้า-หลัง ทิ้ง
(นิยมใช้กับ Form Input)		 " user ".trim()
// "user"
.split(separator) แยกข้อความเป็น Array
(ตามตัวคั่นที่กำหนด)		 "a,b,c".split(",")
// ["a", "b", "c"]
.toFixed(n) แปลงเลขเป็นทศนิยม n ตำแหน่ง
(คืนค่าเป็น String)		 (10.567).toFixed(2)
// "10.57"

4. Scope (ขอบเขตตัวแปร)

ตัวแปรที่สร้างขึ้น ไม่ได้ใช้ได้ทุกที่! มันมี "อาณาเขต" ของมัน

Global Scope (สาธารณะ)

ตัวแปรที่ประกาศ นอกสุด ทุกฟังก์ชันมองเห็นและเรียกใช้ได้

JS 
let user = "Admin"; // Global

const showUser = () => {
    console.log(user); // ✅ ใช้ได้
}
Local Scope (ส่วนตัว)

ตัวแปรที่ประกาศ ในฟังก์ชัน จะใช้ได้แค่ในนั้น ออกมาข้างนอกจะ Error

JS 
const checkPass = () => {
    let pass = "1234"; // Local
}

console.log(pass); // ❌ Error! หาไม่เจอ

Workshop: Helper Functions

ฝึกเขียนฟังก์ชันทั้งแบบเต็ม และแบบย่อ (Arrow)

ภารกิจ:
  • 1. สร้างฟังก์ชัน toFahrenheit แบบ Arrow (ย่อ)
    สูตร: C * 1.8 + 32
  • 2. สร้างฟังก์ชัน checkPass แบบ Arrow (เต็ม)
    รับคะแนน ถ้า >= 50 คืนค่า "ผ่าน" ถ้าไม่ใช่ คืนค่า "ตก"
  • 3. ลองเรียกใช้ใน Console
JS 
// 1. แบบย่อ (บรรทัดเดียว จบ)
// เติมโค้ดตรงนี้

// 2. แบบเต็ม (มี Logic ซับซ้อน)
// เติมโค้ดตรงนี้

console.log(toFahrenheit(30)); // 86
console.log(checkPass(49));    // "ตก"
Practice Mission: ระบบออกใบเสร็จ
สถานการณ์:

คุณได้รับข้อมูลราคาสินค้ามาเป็นข้อความ (String) ต้องเขียนโปรแกรมเพื่อ แปลงเป็นตัวเลข, รวมยอดเงิน และ คิดภาษี โดยแยกการทำงานเป็นฟังก์ชัน

1. ข้อมูล

ราคาสินค้ามาเป็น String ขั้นด้วยลูกน้ำ

JS 
let priceList = "100,250,50,500";
2. สิ่งที่ต้องทำ
  1. สร้างฟังก์ชัน calculateTotal(str):
    • ใช้ .split(",") แยกข้อความ
    • วนลูป แล้วใช้ Number() แปลงเป็นตัวเลขก่อนบวก
    • return ผลรวมกลับมา
  2. สร้างฟังก์ชัน addVat(amount) โดยใช้ arrow function แบบย่อ เพื่อรับยอดเงิน และคืนค่าผลลัพธ์ที่ * 1.07
  3. เรียกใช้ทั้ง 2 ฟังก์ชัน และแสดงผลลัพธ์
บทก่อนหน้า บทต่อไป