การใช้งาน JavaScript Functions: คู่มือทีละขั้นตอน

JavaScript functions คือบล็อกโค้ดที่กำหนดเอง ใช้ซ้ำได้ ทำให้โค้ด modular และจำเป็นสำหรับ OOP สร้างได้ 2 แบบ: Function Declarations และ Function Expressions

Function Declarations

กำหนดชื่อฟังก์ชัน เริ่มด้วย keyword function ตามด้วยชื่อ

function nameOfYourFunction() {
  // โค้ดฟังก์ชัน
}

ชื่อฟังก์ชัน: ใช้ตัวอักษร, underscore, ตัวเลข, camelCase พารามิเตอร์ใส่ในวงเล็บ (optional)

ตัวอย่าง: พิมพ์ "Google"

function printGoogle() {
  console.log("Google");
}
printGoogle(); // เรียกใช้งาน

Function Expressions

กำหนดฟังก์ชันให้กับตัวแปร

const google = function printGoogle() {
  console.log("Google");
};
google(); // เรียกใช้

Function Parameters (พารามิเตอร์)

ทำให้ฟังก์ชันยืดหยุ่น รับค่าเข้ามาใช้งาน

function printCompany(name) {
  console.log(`My favorite company is ${name}!`);
}
printCompany("Snapchat"); // My favorite company is Snapchat!

ใช้พารามิเตอร์หลายตัวได้ คั่นด้วย comma เรียกตามลำดับ

Return Values (คืนค่า)

ใช้ return ส่งค่ากลับ

function addNumbers(first, second) {
  return first + second;
}
addNumbers(1, 2); // คืนค่า 3

ใช้ console.log(addNumbers(1, 2)) เพื่อดูผลลัพธ์

Arrow Functions (ES6)

ไวยากรณ์สั้นกว่า ใช้ =>

const addNumbers = (first, second) => {
  return first + second;
};
addNumbers(10, 15); // 25

พารามิเตอร์เดียว: ไม่ต้องวงเล็บ x => x * 2
ไม่มีพารามิเตอร์: ใส่วงเล็บว่าง () => { ... }

สรุป

• Functions = subprograms รันโค้ดบรรทัดเฉพาะ
• รันก็ต่อเมื่อถูกเรียก (invoke)
• ส่งค่าเข้าผ่าน parameters ใช้ภายในได้
• คืนค่ากลับได้ด้วย return

แทนที่จะเขียนโค้ดซ้ำหลายบรรทัด ให้ห่อในฟังก์ชันและเรียกใช้พร้อมส่งค่าที่ต้องการ