Pseudo Mandatory Parameters ใน JavaScript: Default Parameters และ Logical OR

JavaScript ไม่มี Mandatory Parameters (พารามิเตอร์บังคับ) ในตัว แต่สามารถเลียนแบบได้ 2 วิธี: 1) Default Parameters (ES2015) กำหนดค่าเริ่มต้นใน Signature 2) Logical OR (||) ภายในฟังก์ชัน — วิธีเก่าที่ยังเห็นบ้าง

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pseudo Mandatory Parameters</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 20px; font-weight: 500; color: blueviolet; }
  </style>
</head>
<body>
  <h1>Pseudo Mandatory Parameters ใน JavaScript</h1>
  <div class="result"></div>
  <button class="Btn">คลิกที่นี่</button>
  <h3>กดปุ่มเพื่อเรียก add() และ multiply() โดยไม่ส่งพารามิเตอร์</h3>
  <script>
    const resEle = document.querySelector(".result");
    // 1. Default Parameters (Modern, แนะนำ)
    function add(a = 0, b = 0) {
      return a + b;
    }
    // 2. Logical OR (Legacy) - มีปัญหากับค่า falsy (0, "", false)
    function multiply(a, b) {
      a = a || 0; // ❌ ถ้า a = 0 จะกลายเป็น 0 (ถูกต้อง) แต่ถ้า a = "" ก็กลายเป็น 0
      b = b || 0;
      return a * b; // ⚠️ โค้ดต้นฉบับเขียน a + b ผิด (ควรคูณ)
    }
    document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML = "Sum (default params) = " + add() + "<br>";
      resEle.innerHTML += "Multiply (||) = " + multiply() + "<br>";
    });
  </script>
</body>
</html>

ผลลัพธ์

เมื่อกดปุ่ม "คลิกที่นี่":

Default Parameters (ES2015) — วิธีมาตรฐาน

function greet(name = "Guest", greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
greet();              // "Hello, Guest!"
greet("Somchai");     // "Hello, Somchai!"
greet("Somchai", "Hi"); // "Hi, Somchai!"
greet(undefined, "Hi"); // "Hi, Guest!" (undefined ใช้ default)
greet(null, "Hi");    // "Hi, null!" (null ไม่ใช้ default)

Logical OR (||) — ปัญหากับ Falsy Values

function legacy(a, b) {
  a = a || 10; // ❌ ถ้า a = 0 → กลายเป็น 10 (ผิด!)
  b = b || 20; // ❌ ถ้า b = "" → กลายเป็น 20
  return a + b;
}
legacy(0, 0); // 30 (คาดหวัง 0)
legacy("", ""); // 30 (คาดหวัง "" หรือ 0)

Nullish Coalescing (??) — แก้ปัญหา Falsy (ES2020)

function modern(a, b) {
  a = a ?? 10; // ✅ ใช้ default เฉพาะ null/undefined
  b = b ?? 20;
  return a + b;
}
modern(0, 0);   // 0 ✅
modern("", ""); // "" ✅ (string concatenation)
modern(null, undefined); // 30 ✅

Mandatory Parameters (บังคับจริง) — Throw Error

// Helper
const required = (paramName) => {
  throw new Error(`Missing required parameter: ${paramName}`);
};

function createUser({ name = required("name"), email = required("email"), age = 18 } = {}) {
  return { name, email, age };
}

createUser({ name: "John", email: "john@example.com" }); // OK
createUser({ name: "John" }); // Error: Missing required parameter: email
createUser(); // Error: Missing required parameter: name

สรุป