Rest Parameters | Office.in.th

Rest Parameters ใน JavaScript: รับ Arguments ได้ไม่จำกัด!

จากบทเรียนที่แล้ว เราได้เรียนรู้เกี่ยวกับ Default Parameters ซึ่งช่วยให้เรากำหนดค่าเริ่มต้นให้กับ parameters ของฟังก์ชันได้ ในบทนี้ เราจะมาทำความรู้จักกับ Rest Parameters ซึ่งเป็นอีกหนึ่ง feature ที่มีประโยชน์อย่างมากในการจัดการกับ arguments ของฟังก์ชัน โดยเฉพาะอย่างยิ่งเมื่อเราไม่ทราบจำนวน arguments ที่จะถูกส่งเข้ามาล่วงหน้า

Rest Parameters คืออะไร?

Rest Parameters คือวิธีที่ JavaScript อนุญาตให้ฟังก์ชันรับ arguments จำนวนเท่าใดก็ได้ โดย arguments เหล่านั้นจะถูกรวบรวมไว้ในรูปแบบของ array ภายในฟังก์ชัน syntax ของ Rest Parameters คือการใช้เครื่องหมายจุดสามจุด (...) นำหน้าชื่อ parameter ตัวสุดท้ายของฟังก์ชัน

Syntax ของ Rest Parameters

รูปแบบการใช้งาน Rest Parameters เป็นดังนี้:

function myFunction(param1, param2, ...rest) {
  // ...
}

ในตัวอย่างนี้ param1 และ param2 คือ parameters ปกติที่รับ arguments สองตัวแรก ส่วน ...rest คือ Rest Parameter ที่จะรวบรวม arguments ที่เหลือทั้งหมด (ถ้ามี) ไว้ใน array ชื่อ rest

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

ลองมาดูตัวอย่างการใช้งาน Rest Parameters เพื่อทำความเข้าใจให้มากขึ้น

function sumAll(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sumAll(1, 2, 3));   // Output: 6
console.log(sumAll(1, 2, 3, 4, 5));  // Output: 15
console.log(sumAll());  // Output: 0

ในตัวอย่างนี้ ฟังก์ชัน sumAll รับ Rest Parameter ชื่อ numbers ฟังก์ชันนี้จะทำการวนลูปผ่าน array numbers และคำนวณผลรวมของตัวเลขทั้งหมด จากนั้นจึงคืนค่าผลรวม

จากตัวอย่าง จะเห็นว่าเราสามารถส่ง arguments จำนวนเท่าใดก็ได้ให้กับฟังก์ชัน sumAll และฟังก์ชันจะทำการคำนวณผลรวมได้อย่างถูกต้อง แม้ว่าจะไม่มี arguments ถูกส่งเข้ามาเลยก็ตาม (ในกรณีนี้ numbers จะเป็น array ว่างเปล่า และผลรวมจะเป็น 0)

การแปลง Arguments เป็น Array

ข้อดีที่สำคัญอย่างหนึ่งของ Rest Parameters คือการที่ arguments ที่ถูกส่งเข้ามาจะถูกแปลงเป็น array โดยอัตโนมัติ ทำให้เราสามารถใช้ array methods ต่างๆ เช่น map, filter, และ reduce เพื่อจัดการกับ arguments เหล่านั้นได้อย่างง่ายดาย

function multiplyByFactor(factor, ...numbers) {
  return numbers.map(number => number * factor);
}

console.log(multiplyByFactor(2, 1, 2, 3));  // Output: [2, 4, 6]

ในตัวอย่างนี้ ฟังก์ชัน multiplyByFactor รับ parameter factor และ Rest Parameter numbers จากนั้นใช้ method map เพื่อคูณแต่ละตัวเลขใน array numbers ด้วย factor และคืนค่าเป็น array ใหม่

ข้อควรระวังในการใช้งาน Rest Parameters

แม้ว่า Rest Parameters จะมีประโยชน์อย่างมาก แต่ก็มีข้อควรระวังบางประการที่เราควรทราบ:

Rest Parameter ต้องเป็น Parameter ตัวสุดท้าย: Rest Parameter จะต้องเป็น parameter ตัวสุดท้ายของฟังก์ชัน ไม่สามารถมี parameter อื่นตามหลัง Rest Parameter ได้
ฟังก์ชันมี Rest Parameter ได้เพียงตัวเดียว: ฟังก์ชันสามารถมี Rest Parameter ได้เพียงตัวเดียวเท่านั้น

ตัวอย่างการใช้งานที่ไม่ถูกต้อง:

// ไม่ถูกต้อง: Rest Parameter ไม่ได้เป็น Parameter ตัวสุดท้าย
function invalidFunction(...rest, param1) {
  // ...
}

// ไม่ถูกต้อง: มี Rest Parameter มากกว่าหนึ่งตัว
function anotherInvalidFunction(...rest1, ...rest2) {
  // ...
}

Rest Parameters vs. Arguments Object

ใน JavaScript รุ่นเก่า (ก่อน ES6) เราสามารถเข้าถึง arguments ที่ถูกส่งเข้ามาในฟังก์ชันได้ผ่านทาง arguments object ซึ่งเป็น object ที่คล้ายกับ array แต่ไม่ใช่ array จริงๆ

แม้ว่า arguments object จะยังคงใช้งานได้ แต่ Rest Parameters มีข้อดีกว่าในหลายๆ ด้าน:

Rest Parameters เป็น array จริงๆ: ทำให้เราสามารถใช้ array methods ต่างๆ ได้โดยตรง
Rest Parameters มีชื่อ: ทำให้โค้ดอ่านง่ายและเข้าใจได้ง่ายกว่า
Rest Parameters ไม่รวม Parameters ที่มีชื่อ: arguments object จะรวม arguments ทั้งหมดที่ถูกส่งเข้ามาในฟังก์ชัน รวมถึง arguments ที่ถูกจับคู่กับ parameters ที่มีชื่อแล้ว ในขณะที่ Rest Parameters จะรวมเฉพาะ arguments ที่เหลือเท่านั้น

ตัวอย่างเปรียบเทียบ:

function usingArguments(param1, param2) {
  console.log(arguments); // Output: { '0': 1, '1': 2, '2': 3, '3': 4 }
  console.log(Array.prototype.slice.call(arguments, 2)); // ต้องใช้ slice เพื่อแปลงเป็น Array
}

function usingRestParameters(param1, param2, ...rest) {
  console.log(rest); // Output: [ 3, 4 ]
}

usingArguments(1, 2, 3, 4);
usingRestParameters(1, 2, 3, 4);

จากตัวอย่าง จะเห็นว่า arguments object รวม arguments ทั้งหมด (1, 2, 3, 4) ในขณะที่ Rest Parameter rest รวมเฉพาะ arguments ที่เหลือ (3, 4) เท่านั้น

สรุป

Rest Parameters เป็น feature ที่มีประโยชน์อย่างมากในการจัดการกับ arguments ของฟังก์ชัน โดยเฉพาะอย่างยิ่งเมื่อเราไม่ทราบจำนวน arguments ที่จะถูกส่งเข้ามาล่วงหน้า การใช้ Rest Parameters ช่วยให้โค้ดของเรามีความยืดหยุ่น อ่านง่าย และเข้าใจได้ง่ายขึ้น นอกจากนี้ การที่ arguments ถูกแปลงเป็น array โดยอัตโนมัติ ทำให้เราสามารถใช้ array methods ต่างๆ เพื่อจัดการกับ arguments เหล่านั้นได้อย่างมีประสิทธิภาพ

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับ Spread Operator ซึ่งเป็น feature ที่เกี่ยวข้องกันและมักถูกใช้ควบคู่กับ Rest Parameters เพื่อจัดการกับ arrays และ objects อย่างมีประสิทธิภาพ