โอเปอเรเตอร์ Spread (...) ใน JavaScript คืออะไร?

โอเปอเรเตอร์ Spread (...) ใช้ ขยาย (Expand) Iterable Object (Array, String, Object, Map, Set, Arguments, NodeList ฯลฯ) เป็นรายการองค์ประกอบแยกต่างหาก ใช้ใน 3 บริบทหลัก:

1. Function Arguments: func(...iterable)
2. Array Literals: [...iterable, ...]
3. Object Literals: {...obj, ...} (ES2018)

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

<html>
<body>
  <script>
    var a = [10, 20];
    var b = "rank";
    var c = [30, "points"];
    var d = "run";
    
    // concat method (เก่า)
    var e = a.concat(b, c, d);
    
    // spread operator (ใหม่ สะดวกกว่า)
    var f = [...a, b, ...c, d];
    
    document.write("concat: " + e + "<br>");
    document.write("spread: " + f);
  </script>
</body>
</html>

การใช้งานหลัก

1. Copy Array (Shallow Copy)

var arr1 = [1, 2, 3];
var arr2 = [...arr1]; // Clone
arr2.push(4);
console.log(arr1); // [1,2,3] ไม่เปลี่ยน
console.log(arr2); // [1,2,3,4]

2. Merge Arrays

var arr1 = [1, 2];
var arr2 = [3, 4];
var merged = [...arr1, ...arr2]; // [1,2,3,4]

// เพิ่มค่าระหว่าง
var withExtra = [...arr1, 99, ...arr2]; // [1,2,99,3,4]

3. Spread ใน Function Call

function sum(x, y, z) { return x + y + z; }
var numbers = [1, 2, 3];
sum(...numbers); // 6 - เทียบเท่า sum(1,2,3)

// Math functions
Math.max(...[1, 5, 3, 9]); // 9
Math.min(...[1, 5, 3, 9]); // 1

4. Spread ใน Object (ES2018)

var obj1 = { a: 1, b: 2 };
var obj2 = { c: 3, d: 4 };
var merged = { ...obj1, ...obj2 }; // { a:1, b:2, c:3, d:4 }

// Override property
var updated = { ...obj1, b: 20, e: 5 }; // { a:1, b:20, e:5 }

5. String และ Iterable อื่นๆ

[..."Hello"];        // ["H", "e", "l", "l", "o"]
[...new Set([1,2,2])]; // [1, 2] (Unique)
[...arguments];       // Arguments -> Array
[...document.querySelectorAll('div')]; // NodeList -> Array

ข้อจำกัดและข้อควรระวัง

• Shallow Copy เท่านั้น: Nested Object/Array ยังอ้างอิงเดิม
• Iterable Only: ไม่ทำงานกับ Plain Object โดยตรงใน Array Context (แต่ทำงานใน Object Context)
• Performance: ช้ากว่า Array.from() หรือ slice() สำหรับ Array ใหญ่ๆ
• Rest Parameter: function(...args) คือ Rest (รวม) ไม่ใช่ Spread (แยก)

Spread vs Rest

// Spread: แยกออกไป (ใช้เวลาเรียกใช้ / สร้าง Array/Object)
func(...args);
[...arr, 4];
{...obj, b: 2};

// Rest: รวมเข้ามา (ใช้ใน Parameter / Destructuring)
function func(...args) { } // args เป็น Array
const [first, ...rest] = [1,2,3,4]; // rest = [2,3,4]
const {a, ...rest} = {a:1, b:2, c:3}; // rest = {b:2, c:3}