⏱️ ~11 นาที

ฟังก์ชัน (Functions)

แพ็กโค้กให้ใช้ซ้ำได้ ทำให้โค้ดสะอาดและจัดการง่าย

ฟังก์ชันคือ "เครื่องจักร"

ลองนึกถึงเครื่อง ปั่นน้ำผลไม้:

  1. ใส่ผลไม้ (input)
  2. เครื่องทำงาน (process)
  3. ได้น้ำผลไม้ออกมา (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. 1. ฟังก์ชันที่ไม่มีชื่อ เรียกว่า?

  2. 2. คำสั่งใดใช้ส่งค่ากลับจากฟังก์ชัน?

  3. 3. parameter กับ argument ต่างกันอย่างไร?

กำลังโหลด…