JavaScript Spread Operator (...): คู่มือใช้งานครบวงจร

JavaScript spread operator (....) ขยาย iterable object ใน syntax ที่รับ arguments ใช้ duplicate objects, merge arrays, หรือส่ง array contents เข้า function

Spread operator ไม่เกี่ยวกับขนมปัง! ใน JS หมายถึง: เข้าถึง contents ของ iterable object ได้ สร้างใน ES6

Spread Operator คืออะไร?

เข้าถึง contents ของ iterable object ได้ Syntax: 3 dots (ellipsis) ตามด้วยชื่อ iterable

Iterable objects 3 ประเภท: arrays, object literals, strings สามารถ for loop วนผ่านได้ทั้งหมด

Iterable objects มีประโยชน์: execute กระบวนการเดิมซ้ำได้ เช่น loop string replace chars, loop array sum values

Syntax:

var names = ["John", "Lisa", "Harry"];
var new_names = [...names, "Leslie"];
console.log(new_names); // ["John", "Lisa", "Harry", "Leslie"]

...names ส่ง contents ของ names เข้า new_names array ใหม่ มี items เดิม + Leslie

3 use cases หลัก:

1. Copy iterable
2. Add items เข้า iterable ใหม่
3. Pass arguments เข้า function

1. Copy Iterable

Duplicate iterable ได้ง่าย:

Array:

var new_names = [...names];

Object (ใช้ curly braces):

const lemon_drizzle = {
  name: "Lemon Drizzle",
  price: 1.95,
  vegan: true
};
const new_lemon_drizzle = {...lemon_drizzle};
console.log(new_lemon_drizzle);
// { name: "Lemon Drizzle", price: 1.95, vegan: true }

Object ต้องใช้ {} ไม่ใช่ [] spread object เข้า object ใหม่

2. Add Items เข้า Iterable ใหม่ / Merge Arrays

const cupcakes = ['Lemon Drizzle', 'Chocolate Chip', 'Vanilla Iced'];
const new_cupcakes = [...cupcakes, 'Red Velvet', 'Raspberry Dark Chocolate'];
console.log(new_cupcakes);
// ["Lemon Drizzle", "Chocolate Chip", "Vanilla Iced", "Red Velvet", "Raspberry Dark Chocolate"]

Merge 2 arrays:

const old_menu = ['Lemon Drizzle', 'Chocolate Chip', 'Vanilla Iced'];
const new_menu = ['Red Velvet', 'Raspberry Dark Chocolate'];
const final_menu = [...old_menu, ...new_menu];
console.log(final_menu); // ผลลัพธ์เหมือนด้านบน

3. Pass Arguments เข้า Function

function placeOrder(name, order, price) {
  console.log('Name: ' + name);
  console.log('Order: ' + order);
  console.log('Price: ' + price);
}

// ทางเดิม
placeOrder('Geoff', 'Red Velvet', 1.85);

// ใช้ spread operator
const order = ['Geoff', 'Red Velvet', 1.85];
placeOrder(...order);

ทั้งคู่ output เหมือนกัน แต่วิธี spread ใส่ค่าใน array แล้ว spread เข้า function อ่านง่ายกว่า

สรุป

Spread operator (...) ใช้กว้างขวางใน JS: copy iterables, add items เข้า iterable ใหม่, merge iterables, pass arguments เข้า function Syntax: 3 dots + iterable object ตอนนี้คุณใช้ spread operator แบบ pro แล้ว!