Skip to main content

ความคล้ายและความแตกต่างระหว่าง Rest Parameters vs. Spread Operators ใน JavaScript

· 2 min read
Kongvut Sangkla
Kongvut Sangkla
Author

Table of contents

Intro​

สวัสดีครับ บทความนี้จะพูดถึง ความคล้ายและความแตกต่างระหว่าง Rest Parameters vs. Spread Operators (เป็นคุณสมบัติใหม่ของ JS รุ่น ES6) เพราะตอนใช้งานแรก ๆ จะสับสนการเรียกอะไรคือ Rest อะไรคือ Spread เรียกสลับกันไปมา รู้แต่ว่าใช้ ... 😅 ทีนี้พอเข้าใจและเขียน JS มาสักพักแล้วก็เลยอยากสรุปเรื่องนี้ไว้สักหน่อย มาเริ่มกันเลยครับ

Rest parameter​

Rest parameter Example
function abc(a, b, ...z) {
  console.log(a, ' ', b); // hi-ya hi

  console.log(z); // ["hey", "hello", "howdy", "hullo"]
  console.log(z[0]); // hey
  console.log(z.length); // 4
}

abc("hi-ya", "hi", "hey", "hello", "howdy", "hullo");
Rest parameter Example
const [c, ...m] = [1,2,3,4,5];
console.log(c); // 1
console.log(m); // [2,3,4,5]

Spread operators​

Spread operator Example
const arr = ["b", "c", "d"];
const arr2 = ["a", ...arr];
console.log(arr2);  // ["a", "b", "c", "d"]
Spread operator Example
const params = [ "hello", true, 7 ];
const other = [ 1, 2, ...params ]; // [1,2,"hello", true, 7]
// มีค่าเท่ากับ
const other = [1, 2].concat(params); // [1,2,"hello", true, 7]
Rest Parameter vs. Spread operator (การหาผลรวม)
// For Spread operator
function sum1(x, y, z) {
  return x + y + z;
}

// For Rest Parameter
function sum2(...arr) {
  return arr[0] + arr[1] + arr[2];
  // used reduce for dynamic
  // return a.reduce((value, sum) => sum + value)
}

// input values
const numbers = [1, 2, 3, 4, 5];

// Result of Spread operator
console.log(sum1(...numbers)); // 6

// Result of Rest Parameter
console.log(sum2(1, 2, 3, 4, 5)); // 6

สรุป​

Rest parameter คือ การรวบรวม Values ที่เหลือทั้งหมดไปไว้ Array สรุป (values -> array)

Spread operator คือ การดำเนินแยกค่าใน Arrays ออกเป็น Values สรุป (array -> values)

ช่วยบริจาคสำหรับค่ากาแฟ
Loading...