Spread Operator คืออะไร ? | พื้นฐาน JavaScript EP.11

ถ้ามีคนถามถึงสุดยอด feature เอนกประสงค์ และสารพัดประโยชน์สุด ๆ ของ JavaScript ผมคงนึกถึงอย่างอื่นไปไม่ได้ นอกจาก Spread Operator

เพราะไม่ว่าจะใช้ ต่อ Array 2 ตัวนี้แบบไหน Spread Operator ก็ทำได้หมดไม่ว่าจะแทรกตรงไหน

const cats = ["ส้ม", "ชิเอล", "คิรัวร์"];
const dogs = ["นวล", "โบ้", "จุ้มเหม่ง"];

ตัวแรก

const catsFirst = ["ไข่ขาว", ...cats];

ตัวสุดท้าย

const catsLast = [...cats, "เหมียว"];

หรือตรงกลางก็ทำได้

const [firstCat, ...RestCats] = cats;
const catsMiddle = [firstCat, "มีบุญ", ...RestCats];

หรือจะใช้ Destructuring เพื่อดึงค่าออกจาก Object หรือ Array

const object = { id: 1, title: "foo" };
const { ...copyObject } = object;

น้อง ๆ พี่อยากให้ function รับ parameters ได้เยอะ ๆ แต่เขียนสั้น ๆ

const sum = (...values) => {
  return values.reduce((prev, curr) => prev + curr, 0);
};
sum(10, 20, 30); // 60

อยากก้อป array ?

const cats = ["ส้ม", "ชิเอล", "คิรัวร์"];
const copiedCats = [...cats];

อยากก้อป object ?

const cat = { name: "เหมียว", age: 2 };
const copiedCat = { ...cat };

อยากดึงค่า array ทั้งหมด ยกเว้นตัวแรก ?

const cats = ["ส้ม", "ชิเอล", "คิรัวร์"];
const [firstCat, ...restCats] = cats;

เป็นยังไงกันบ้างครับสำหรับ Spread Operator สุดยอด feature สุดเจ๋ง ใช้งานง่าย และยังสารพัดประโยชน์สุด ๆ

---

สามารถรับชมแบบวิดีโอได้ที่นี่ครับ