Functions

Parameter คืออะไร

`parameter` คือชื่อตัวแปรที่เราเขียนไว้ในวงเล็บตอนประกาศฟังก์ชัน เพื่อให้ฟังก์ชันรับข้อมูลจากภายนอกเข้ามาทำงานได้ ลองนึกภาพฟังก์ชันเป็นเครื่องทำน้ำผลไม้ — ถ้าไม่มีช่องใส่ผลไม้ เครื่องก็จะทำน้ำเปล่าออกมาทุกครั้ง แต่ถ้ามีช่อง (parameter) เราก็ใส่มะม่วง มะนาว หรือส้ม เข้าไป แล้วได้น้ำผลไม้รสต่าง ๆ จากเครื่องเดิม `argument` คือค่าจริงที่เราส่งเข้าไปตอนเรียกใช้ฟังก์ชัน เช่น `"อาย"` ใน `sayHello("อาย")`

function sayHello(name) {
  console.log("สวัสดี " + name);
}

sayHello("อาย");   // สวัสดี อาย
sayHello("บอม");  // สวัสดี บอม

จากตัวอย่าง: `name` ใน `function sayHello(name)` คือ **parameter** (ช่องรับค่า) ส่วน `"อาย"` ใน `sayHello("อาย")` คือ **argument** (ค่าที่ส่งเข้าไป) **ข้อสำคัญ**: ถ้าไม่ส่ง argument เลย parameter จะมีค่าเป็น `undefined`

Parameter กับ Argument ต่างกันอย่างไร

**วิธีจำ**: `pArameter` = **A**nnounce (ตอนประกาศ) ส่วน `Argument` = **A**ctual value (ค่าจริงตอนเรียกใช้) หรือจำว่า parameter = Placeholder (ที่ว่างรอรับ), argument = Actual (ค่าจริง)

ฟังก์ชันรับได้หลายค่า

ฟังก์ชันหนึ่งตัวสามารถมีหลาย `parameter` ได้ โดยคั่นด้วยเครื่องหมาย `,` **ลำดับของ argument ต้องตรงกับลำดับของ parameter เสมอ** — argument ตัวแรกจับคู่กับ parameter ตัวแรก ตัวที่สองจับคู่กับตัวที่สอง ต่อกันไปตามลำดับ

function showScore(name, score) {
  console.log(name + " ได้ " + score + " คะแนน");
}

showScore("Mai", 10);  // Mai ได้ 10 คะแนน
showScore("Nok", 25);  // Nok ได้ 25 คะแนน

function showScore(name, score) {
  console.log(name + " ได้ " + score + " คะแนน");
}

showScore("Mai");  // Mai ได้ undefined คะแนน

เมื่อ `argument` ที่ส่งมาน้อยกว่า `parameter` ที่ประกาศไว้ JavaScript จะให้ `parameter` ที่เหลือมีค่าเป็น `undefined` — นี่คือสาเหตุที่ `default value` มีประโยชน์มาก ซึ่งเราจะเรียนในหัวข้อถัดไป

Default value — ค่าสำรองเมื่อไม่ส่ง argument

**default value** คือค่าที่เรากำหนดไว้ล่วงหน้าให้กับ `parameter` ถ้าตอนเรียกใช้ฟังก์ชันไม่มีการส่ง `argument` มาในตำแหน่งนั้น JavaScript จะใช้ค่า default แทน วิธีเขียน: ใส่วงเล็บตอนประกาศฟังก์ชัน แล้วกำหนด `parameter = ค่าเริ่มต้น` เช่น `function greet(name, greeting = "สวัสดี")`

function greet(name, greeting = "สวัสดี") {
  console.log(greeting + " " + name);
}

greet("แป้ง", "หวัดดี");  // หวัดดี แป้ง  (ใช้ค่าที่ส่งมา)
greet("อ้อม");             // สวัสดี อ้อม  (ใช้ default)

Default value หลายตัวและกฎการวางตำแหน่ง

ฟังก์ชันมี default value ได้มากกว่า 1 ตัว แต่ต้องปฏิบัติตามกฎสำคัญ: **parameter ที่มี default value ต้องอยู่หลัง parameter ที่ไม่มี default value เสมอ** เหตุผล: JavaScript จับคู่ argument กับ parameter ตามลำดับจากซ้ายไปขวา ถ้าเราใส่ default ไว้ตรงกลางแล้วไม่ส่ง argument ตัวนั้น JavaScript จะไม่รู้ว่าควรเลื่อน argument ตัวถัดไปหรือไม่

function announceProduct(name, amount = 1, unit = "ชิ้น") {
  console.log(name + " จำนวน " + amount + " " + unit);
}

announceProduct("ปากกา");              // ปากกา จำนวน 1 ชิ้น
announceProduct("สมุด", 3);            // สมุด จำนวน 3 ชิ้น
announceProduct("ดินสอ", 5, "แท่ง");   // ดินสอ จำนวน 5 แท่ง

สังเกตว่า `name` วางไว้หน้าแรกเพราะไม่มี default — ผู้ใช้ต้องระบุชื่อสินค้าเสมอ ส่วน `amount` กับ `unit` มี default ผู้ใช้จะส่งหรือไม่ส่งก็ได้ **หลักการตั้ง default value**: ให้ถามว่าค่าไหนที่ส่วนใหญ่จะเหมือนเดิมทุกครั้งที่เรียก ตั้งค่านั้นเป็น default เช่น จำนวนสินค้าส่วนใหญ่เริ่มที่ 1, หน่วยนับส่วนใหญ่เป็น "ชิ้น"

ข้อผิดพลาดที่พบบ่อย

• **ลืมส่ง argument ให้ parameter ที่ไม่มี default**: ถ้า parameter ไม่มี default และไม่ส่ง argument มา ค่าจะเป็น `undefined` ซึ่งมักทำให้ output แปลก ๆ เช่น `"สวัสดี undefined"`
• **สลับลำดับ argument ผิด**: `showScore(10, "Mai")` จะทำให้ `name` = `10` และ `score` = `"Mai"` — จำไว้ว่า JavaScript ไม่ตรวจชนิดข้อมูลให้
• **วาง parameter ที่มี default ไว้กลาง**: `function announce(amount = 1, name)` จะใช้ไม่ได้ เพราะถ้าเรียก `announce("ปากกา")` JavaScript จะเอา `"ปากกา"` ใส่ `amount` แล้ว `name` กลายเป็น `undefined`
• **ใช้ parameter กับ argument สลับความหมาย**: ตอนประกาศเราเขียน `parameter` ในวงเล็บ ตอนเรียกเราใส่ `argument` — ถ้าจำสลับกันจะงงเวลาอ่านเอกสารหรือ search หาวิธีใช้
• **เข้าใจผิดว่า default value ใช้เมื่อเรียกโดยไม่มีวงเล็บ**: `greet` เฉย ๆ ไม่เท่ากับ `greet()` — แบบแรกคืออ้างถึงฟังก์ชันแต่ไม่เรียก แบบหลังคือเรียกแต่ไม่ส่ง argument ซึ่ง default จะทำงาน

Lab 1: รับ parameter 1 ตัว

Lab 2: รับหลาย parameter

Lab 3: Default value 1 ตัว

Lab 4: Default value หลายตัว

Lab 5: Mini Challenge — รายงานสินค้า

Lab 6: เรียกฟังก์ชันซ้ำด้วยข้อมูลต่างกัน

Lab 7: แก้ไขลำดับ argument ที่สลับกัน

Lab 8: เติม default value ป้องกัน undefined