⏱️ ~11 นาที
ฟังก์ชัน (Functions)
แพ็กโค้กให้ใช้ซ้ำได้ ทำให้โค้ดสะอาดและจัดการง่าย
ฟังก์ชันคือ "เครื่องจักร"
ลองนึกถึงเครื่อง ปั่นน้ำผลไม้:
- ใส่ผลไม้ (input)
- เครื่องทำงาน (process)
- ได้น้ำผลไม้ออกมา (output)
ฟังก์ชัน (function) ก็เหมือนกัน — เป็นกล่องที่ แพ็กโค้ด ไว้ใช้ซ้ำได้:
[ ค่าเข้า ] → [ ฟังก์ชันทำงาน ] → [ ค่าออก ]
(input) (process) (output)
ทำไมต้องใช้ฟังก์ชัน?
- ใช้ซ้ำ: เขียนครั้งเดียว เรียกใช้กี่ครั้งก็ได้
- จัดระเบียบ: แบ่งโค้ดเป็นส่วน ๆ อ่านง่าย
- แก้ง่าย: แก้ที่เดียว มีผลทุกที่ที่เรียกใช้
ประกาศฟังก์ชันแบบที่ 1: function declaration
function greet() {
console.log("สวัสดี!");
}
greet(); // เรียกใช้ → สวัสดี!
greet(); // เรียกอีก → สวัสดี!
รับค่าเข้า: Parameter & Argument
function greet(name) { // name = parameter (ช่องรับ)
console.log("สวัสดี " + name);
}
greet("สมชาย"); // "สมชาย" = argument (ค่าจริง)
greet("มาลี"); // สวัสดี มาลี
- Parameter = ชื่อช่องที่ตั้งไว้ (ตอนสร้าง)
- Argument = ค่าจริงที่ส่งไป (ตอนเรียกใช้)
หลาย parameter
function add(a, b) {
console.log(a + b);
}
add(3, 5); // 8
ส่งค่ากลับ: return
function multiply(a, b) {
return a * b; // ส่งผลลัพธ์กลับ
}
let result = multiply(4, 6);
console.log(result); // 24
⚠️ เมื่อเจอ
returnฟังก์ชัน หยุดทันที ถ้าไม่มีreturnฟังก์ชันจะคืนundefinedมาให้
ค่าเริ่มต้น (Default parameter)
function greet(name = "เพื่อน") {
console.log("สวัสดี " + name);
}
greet(); // สวัสดี เพื่อน (ใช้ค่าเริ่มต้น)
greet("บอย"); // สวัสดี บอย
ประกาศฟังก์ชันแบบที่ 2: Function Expression
const greet = function (name) {
console.log("สวัสดี " + name);
};
greet("อร"); // สวัสดี อร
ประกาศแบบที่ 3: Arrow Function (ยุคใหม่ แนะนำ)
รูปแบบสั้น ๆ ที่ใช้บ่อยในโค้ดสมัยใหม่:
const greet = (name) => {
console.log("สวัสดี " + name);
};
// กรณี return บรรทัดเดียว ย่อได้:
const add = (a, b) => a + b;
console.log(add(3, 5)); // 8
- มี parameter ตัวเดียว ละวงเล็บได้:
x => x * 2 - ไม่มี parameter:
() => ... - body บรรทัดเดียว ละ
{ }และreturnได้
ลองทำจริง: คำนวณส่วนลด
function calculateFinalPrice(price, discountPercent) {
const discount = price * (discountPercent / 100);
return price - discount;
}
console.log(calculateFinalPrice(1000, 20)); // 800
console.log(calculateFinalPrice(500, 10)); // 450
ขอบเขตตัวแปร (Scope)
ตัวแปรที่สร้าง ในฟังก์ชัน จะใช้ได้แค่ในนั้น:
function test() {
let localMsg = "อยู่ในนี้";
console.log(localMsg); // ✅
}
test();
// console.log(localMsg); ❌ Error: ไม่รู้จัก
แต่ตัวแปร นอกฟังก์ชัน ใช้ในฟังก์ชันได้:
let globalGreeting = "Hi";
function sayHi() {
console.log(globalGreeting); // ✅
}
ตั้งชื่อฟังก์ชันอย่างไร?
- ใช้ กริยา:
calculateTotal,sendMessage,checkLogin - เริ่มด้วยตัวเล็ก, camelCase:
getUserAge - ชื่อบอกว่า "ทำอะไร" ไม่ใช่ "เป็นอะไร"
สรุป
| แนวคิด | สรุป |
|---|---|
| Parameter | ช่องรับค่า (ตอนประกาศ) |
| Argument | ค่าที่ส่งไปจริง (ตอนเรียก) |
return | ส่งผลลัพธ์กลับ และหยุดฟังก์ชัน |
| Arrow function | () => {} รูปแบบยุคใหม่ สั้นกว่า |
| Scope | ตัวแปรในฟังก์ชันใช้ในนั้นได้อย่างเดียว |
บทหน้า: มาเรียน Array — วิธีเก็บข้อมูลหลายค่าในตัวแปรเดียว 📚
อ่านจบแล้ว? ทำเครื่องหมายว่าเสร็จเพื่อบันทึกความคืบหน้า
🧠
แบบทดสอบ
ตอบให้ครบแล้วกด “ตรวจคำตอบ” เพื่อเช็คความเข้าใจ
1. ฟังก์ชันที่ไม่มีชื่อ เรียกว่า?
2. คำสั่งใดใช้ส่งค่ากลับจากฟังก์ชัน?
3. parameter กับ argument ต่างกันอย่างไร?
กำลังโหลด…