Spread Operator

Spread Operator ใน JavaScript: ขยายพลังให้ Array และ Object

ในบทเรียนที่แล้ว เราได้เรียนรู้เกี่ยวกับ Rest Parameters ที่ช่วยให้ฟังก์ชันของเรารับ arguments ได้ไม่จำกัดจำนวนและจัดการเป็น array ได้อย่างง่ายดาย ในบทนี้ เราจะมาทำความรู้จักกับเพื่อนร่วมงานของ Rest Parameters นั่นคือ Spread Operator ซึ่งมีหน้าที่ตรงกันข้ามกัน นั่นคือการ ขยาย (Spread) array หรือ object ออกมาเป็นส่วนประกอบย่อยๆ ทำให้เราสามารถ copy, รวม หรือส่งค่าเหล่านี้ไปยังฟังก์ชันได้อย่างสะดวกและยืดหยุ่น

Syntax ของ Spread Operator (...)

Spread Operator ใช้สัญลักษณ์ ... (เครื่องหมายจุดสามจุด) นำหน้า array หรือ object ที่เราต้องการขยาย ตัวอย่างเช่น:

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

ในตัวอย่างนี้ Spread Operator ได้ขยาย array myArray ออกมาเป็น 1, 2, 3 ซึ่งถูกส่งไปยัง console.log() เป็น arguments แยกกัน

การ Copy Array และ Object

Spread Operator เป็นวิธีที่ง่ายและมีประสิทธิภาพในการสร้างสำเนา (copy) ของ array หรือ object โดยไม่เปลี่ยนแปลงต้นฉบับ (shallow copy) ซึ่งมีความสำคัญอย่างยิ่งในการเขียนโปรแกรมที่ต้องการหลีกเลี่ยง side effects

การ Copy Array

const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];

console.log(copiedArray); // Output: [1, 2, 3]

// เปลี่ยนแปลงค่าใน copiedArray จะไม่กระทบ originalArray
copiedArray[0] = 10;
console.log(originalArray); // Output: [1, 2, 3]
console.log(copiedArray);   // Output: [10, 2, 3]

ในตัวอย่างนี้ เราใช้ Spread Operator เพื่อสร้างสำเนาของ originalArray ไปยัง copiedArray การเปลี่ยนแปลงค่าใน copiedArray จะไม่ส่งผลกระทบต่อ originalArray

ข้อควรระวัง: Spread Operator ทำการ shallow copy เท่านั้น หมายความว่าถ้า array หรือ object ที่เรา copy มี nested objects หรือ arrays อยู่ภายใน การเปลี่ยนแปลงค่าใน nested objects/arrays จะส่งผลกระทบต่อทั้งสำเนาและต้นฉบับ หากต้องการ deep copy คุณจะต้องใช้วิธีอื่น เช่น JSON.parse(JSON.stringify(originalObject)) (แต่มีข้อจำกัดเรื่อง type บางอย่าง) หรือ library ที่ช่วยในการ deep copy

การ Copy Object

const originalObject = { name: "John", age: 30 };
const copiedObject = { ...originalObject };

console.log(copiedObject); // Output: { name: "John", age: 30 }

// เปลี่ยนแปลงค่าใน copiedObject จะไม่กระทบ originalObject
copiedObject.name = "Jane";
console.log(originalObject); // Output: { name: "John", age: 30 }
console.log(copiedObject);   // Output: { name: "Jane", age: 30 }

เช่นเดียวกับการ copy array เราสามารถใช้ Spread Operator เพื่อสร้างสำเนาของ object ได้ การเปลี่ยนแปลงค่าใน copiedObject จะไม่ส่งผลกระทบต่อ originalObject และเช่นเดียวกับ array, Spread Operator ทำ shallow copy สำหรับ object ด้วย

การรวม Array และ Object

Spread Operator ช่วยให้เราสามารถรวม (merge) array หรือ object เข้าด้วยกันได้อย่างง่ายดาย

การรวม Array

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];

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

ในตัวอย่างนี้ เราใช้ Spread Operator เพื่อขยาย array1 และ array2 และรวมเข้าด้วยกันเป็น combinedArray

เรายังสามารถเพิ่มค่าใหม่เข้าไปใน array ที่ถูกรวมได้:

const array1 = [1, 2, 3];
const combinedArray = [0, ...array1, 4];

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

การรวม Object

const object1 = { name: "John", age: 30 };
const object2 = { city: "New York", country: "USA" };
const combinedObject = { ...object1, ...object2 };

console.log(combinedObject); // Output: { name: "John", age: 30, city: "New York", country: "USA" }

ในกรณีที่ object มี key ซ้ำกัน ค่าของ key ใน object ที่อยู่ทางขวา (ในตัวอย่างคือ object2) จะถูกนำมาใช้แทนค่าเดิม:

const object1 = { name: "John", age: 30 };
const object2 = { name: "Jane", city: "New York" };
const combinedObject = { ...object1, ...object2 };

console.log(combinedObject); // Output: { name: "Jane", age: 30, city: "New York" }

ในตัวอย่างนี้ ค่าของ name ใน combinedObject คือ "Jane" ซึ่งมาจาก object2

Spread Operator กับ Function Arguments

เราสามารถใช้ Spread Operator เพื่อส่ง elements ของ array เป็น arguments ให้กับฟังก์ชันได้:

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // Output: 6

ในตัวอย่างนี้ Spread Operator ได้ขยาย numbers array ออกมาเป็น 1, 2, 3 ซึ่งถูกส่งไปยังฟังก์ชัน sum() เป็น arguments แยกกัน

สรุป

Spread Operator เป็นเครื่องมือที่มีประโยชน์อย่างมากใน JavaScript ช่วยให้เราสามารถ copy, รวม และส่งค่า array หรือ object ได้อย่างง่ายดายและยืดหยุ่น การเข้าใจการทำงานของ Spread Operator จะช่วยให้คุณเขียนโค้ดที่อ่านง่ายขึ้น มีประสิทธิภาพมากขึ้น และหลีกเลี่ยง side effects ที่ไม่พึงประสงค์ได้

ในบทเรียนถัดไป เราจะมาเรียนรู้เกี่ยวกับ Destructuring Assignment ซึ่งเป็นอีกหนึ่งคุณสมบัติที่ช่วยให้เราสามารถดึงค่าจาก array และ object ได้อย่างสะดวกและรวดเร็ว