Default Parameters (พารามิเตอร์ค่าเริ่มต้น) ใน JavaScript

Default Parameters อนุญาตให้กำหนดค่าเริ่มต้นให้พารามิเตอร์ของฟังก์ชันได้โดยตรงในการประกาศฟังก์ชัน ทำให้โค้ดสะอาดและอ่านง่ายขึ้น

ตัวอย่างการใช้งาน

<html>
  <body>
    <script>
      // default คือ 1
      function inc(val1, inc = 1) {
        return val1 + inc;
      }
      
      document.write(inc(10, 10)); // 20
      document.write("<br>");
      document.write(inc(10));     // 11 (ใช้ค่า default)
    </script>
  </body>
</html>

รูปแบบต่างๆ ของ Default Parameters

1. ค่าเริ่มต้นแบบคงที่

function greet(name = 'Guest', greeting = 'Hello') {
  return `${greeting}, ${name}!`;
}

greet();           // "Hello, Guest!"
greet('John');     // "Hello, John!"
greet('John', 'Hi'); // "Hi, John!"

2. ค่าเริ่มต้นจากนิพจน์หรือฟังก์ชัน

function createUser(name, id = generateId(), createdAt = new Date()) {
  return { name, id, createdAt };
}

function generateId() {
  return Math.random().toString(36).substr(2, 9);
}

3. ใช้พารามิเตอร์ก่อนหน้าเป็นค่าเริ่มต้น

function multiply(a, b = a * 2) {
  return a * b;
}

multiply(5);    // 50 (b = 5 * 2 = 10)
multiply(5, 3); // 15

4. ใช้กับ Destructuring

function connect({ host = 'localhost', port = 3000, secure = false } = {}) {
  console.log(`Connecting to ${host}:${port} (${secure ? 'HTTPS' : 'HTTP'})`);
}

connect();                    // localhost:3000 HTTP
connect({ port: 8080 });      // localhost:8080 HTTP
connect({ host: 'api.com', secure: true }); // api.com:3000 HTTPS

ความแตกต่างจากวิธีเก่า (|| operator)

// วิธีเก่า - มีปัญหากับค่า falsy (0, '', false, null)
function oldWay(a, b) {
  b = b || 1; // ถ้า b = 0 จะกลายเป็น 1 (ผิด!)
}

// วิธีใหม่ - default parameter จัดการ falsy ได้ถูกต้อง
function newWay(a, b = 1) {
  // b = 0 จะคงเป็น 0
}

ข้อควรระวัง

• Default parameters ถูกประเมินทุกครั้งที่เรียกฟังก์ชัน (ไม่ใช่ครั้งเดียวตอนโหลด)
• พารามิเตอร์ที่มี default ควรอยู่ท้ายสุด (แต่ JS ไบบังคับ)
• ไม่สามารถใช้ arguments object ได้ใน strict mode เมื่อมี default parameters