Default Parameters ในฟังก์ชัน

Default Parameters ในฟังก์ชัน: กำหนดค่าเริ่มต้นให้ parameters

ในบทความที่แล้ว เราได้ทำความรู้จักกับ Arrow Functions ซึ่งเป็นวิธีการเขียนฟังก์ชันที่กระชับและมีประโยชน์อย่างมาก ในบทความนี้ เราจะมาเรียนรู้เกี่ยวกับอีกหนึ่งฟีเจอร์ที่ช่วยให้การเขียนฟังก์ชันใน JavaScript สะดวกและยืดหยุ่นมากยิ่งขึ้น นั่นคือ Default Parameters หรือการกำหนดค่าเริ่มต้นให้กับ parameters ของฟังก์ชัน

Default Parameters คืออะไร?

Default Parameters คือการกำหนดค่าเริ่มต้นให้กับ parameters ของฟังก์ชัน หากตอนเรียกใช้งานฟังก์ชัน ไม่มีการส่งค่า argument ที่สอดคล้องกับ parameter นั้นมา ฟังก์ชันจะใช้ค่า default ที่เรากำหนดไว้แทน ทำให้ฟังก์ชันทำงานได้โดยไม่เกิดข้อผิดพลาดและมีความยืดหยุ่นมากยิ่งขึ้น

การกำหนด Default Parameter

การกำหนด Default Parameter ทำได้ง่ายๆ โดยใช้เครื่องหมายเท่ากับ (=) ตามด้วยค่า default ที่ต้องการ หลังชื่อ parameter ใน function definition ดังนี้:

function greet(name = "Guest") {
  console.log("Hello, " + name + "!");
}

greet();       // Output: Hello, Guest!
greet("Alice"); // Output: Hello, Alice!

จากตัวอย่างข้างต้น ฟังก์ชัน greet มี parameter ชื่อ name ซึ่งมีค่า default เป็น "Guest" หากเราเรียกฟังก์ชัน greet() โดยไม่ส่ง argument ใดๆ ฟังก์ชันจะใช้ค่า default คือ "Guest" ทำให้แสดงผล "Hello, Guest!" แต่ถ้าเราส่ง argument เป็น "Alice" ฟังก์ชันก็จะใช้ค่า "Alice" แทน และแสดงผล "Hello, Alice!"

การใช้งาน Default Parameter กับ Data Types ต่างๆ

Default Parameter สามารถใช้ได้กับ data types ทุกชนิดใน JavaScript ไม่ว่าจะเป็น string, number, boolean, array, object หรือแม้กระทั่ง function:

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

console.log(multiply(5));   // Output: 5 (5 * 1)
console.log(multiply(5, 2)); // Output: 10 (5 * 2)

function isAdult(age, minAge = 18) {
  return age >= minAge;
}

console.log(isAdult(20));    // Output: true
console.log(isAdult(15));    // Output: false
console.log(isAdult(16, 16)); // Output: true (override default value)

function createArray(items, defaultValue = []) {
  return items.map(() => defaultValue);
}

const myArray = createArray(3);
console.log(myArray); // Output: [ [], [], [] ]

const myArrayWithValue = createArray(3, "default");
console.log(myArrayWithValue); // Output: [ 'default', 'default', 'default' ]

function logMessage(message, logger = console.log) {
  logger(message);
}

logMessage("This is a message."); // Output: This is a message. (using console.log)

const customLogger = (msg) => {
  alert("Custom Log: " + msg);
};

logMessage("Another message.", customLogger); // Output: (opens an alert box with "Custom Log: Another message.")

จากตัวอย่างข้างต้น จะเห็นว่าเราสามารถกำหนดค่า default เป็นค่า number, boolean, array, หรือแม้กระทั่ง function ได้ ทำให้ฟังก์ชันมีความยืดหยุ่นและสามารถปรับแต่งได้ตามความต้องการ

การใช้ Default Parameter กับ Parameters ก่อนหน้า

Default Parameter สามารถใช้ค่าจาก parameters ที่อยู่ก่อนหน้าได้:

function calculateArea(width, height = width) {
  return width * height;
}

console.log(calculateArea(5));    // Output: 25 (5 * 5, height defaults to width)
console.log(calculateArea(5, 10)); // Output: 50 (5 * 10)

function greetUser(firstName, lastName = "Doe", greeting = "Hello, " + firstName + " " + lastName + "!") {
    return greeting;
}

console.log(greetUser("John")); // Output: Hello, John Doe!
console.log(greetUser("Jane", "Smith")); // Output: Hello, Jane Smith!
console.log(greetUser("Peter", "Pan", "Greetings, Peter Pan!")); // Output: Greetings, Peter Pan!

ในตัวอย่างแรก ฟังก์ชัน calculateArea ถ้าไม่ได้ส่งค่า height มา จะใช้ค่า width เป็นค่า default ทำให้คำนวณพื้นที่ของสี่เหลี่ยมจัตุรัสได้ง่ายขึ้น

ในตัวอย่างที่สอง ฟังก์ชัน `greetUser` แสดงให้เห็นว่าเราสามารถใช้ค่าจาก `firstName` และ `lastName` ที่กำหนดไว้ก่อนหน้า เพื่อสร้างค่า default สำหรับ `greeting` ได้

ข้อควรระวังในการใช้ Default Parameter

• Undefined vs. Null: ถ้าคุณส่งค่า undefined เป็น argument, ฟังก์ชันจะใช้ค่า default ที่กำหนดไว้ แต่ถ้าส่งค่า null ฟังก์ชันจะใช้ค่า null นั้นเอง

  function logValue(value = "Default Value") {
    console.log(value);
  }
  
  logValue();          // Output: Default Value
  logValue(undefined); // Output: Default Value
  logValue(null);      // Output: null
  

• ลำดับของ Parameters: Parameters ที่มีค่า default ควรอยู่ท้ายสุดของ parameter list เสมอ เพื่อหลีกเลี่ยงความสับสนในการเรียกใช้งานฟังก์ชัน แม้ว่า JavaScript จะอนุญาตให้กำหนด default parameters ในตำแหน่งที่ไม่ใช่ parameter สุดท้าย แต่ก็ไม่แนะนำให้ทำ เพราะอาจทำให้โค้ดอ่านยากและเข้าใจยาก

  // ไม่แนะนำ
  function myFunction(a = 1, b) {
    return a + b;
  }
  
  // แนะนำ
  function myFunction(b, a = 1) {
    return a + b;
  }
  

• Lazy Evaluation: ค่า default จะถูกประเมิน (evaluated) เฉพาะเมื่อ parameter นั้นไม่มีค่า หรือมีค่าเป็น undefined เท่านั้น

  function getDefaultValue() {
    console.log("getDefaultValue() is called!");
    return "Expensive Calculation";
  }
  
  function processValue(value = getDefaultValue()) {
    console.log("Value:", value);
  }
  
  processValue(10); // Output: Value: 10 (getDefaultValue() is not called)
  processValue();   // Output: getDefaultValue() is called!
                   //         Value: Expensive Calculation
  

สรุป

Default Parameters เป็นเครื่องมือที่มีประโยชน์อย่างมากในการเขียนฟังก์ชันใน JavaScript ช่วยให้ฟังก์ชันมีความยืดหยุ่นมากขึ้น ลดความซับซ้อนของโค้ด และป้องกันข้อผิดพลาดที่อาจเกิดขึ้นจากการไม่มี argument ที่จำเป็นถูกส่งมาให้ฟังก์ชัน การเข้าใจและใช้งาน Default Parameters อย่างถูกต้อง จะช่วยให้คุณเขียนโค้ด JavaScript ที่มีคุณภาพและ maintainable มากยิ่งขึ้น

ในบทความถัดไป เราจะมาเรียนรู้เกี่ยวกับ Rest Parameters ซึ่งเป็นอีกหนึ่งฟีเจอร์ที่ช่วยให้การจัดการกับ parameters ของฟังก์ชันมีความยืดหยุ่นมากยิ่งขึ้น