[JavaScript] วิธีใช้ Spread syntax (...)

Spread syntax คือการนำค่าของตัวแปรที่มีลักษณะเป็น collection ไม่ว่าจะ array หรือ object มาแจกแจงกระจายออกมาใช้งาน ซึ่งจะคนละอย่างกับ Rest syntax (แต่ใช้ ... เหมือนกัน) โดย Rest syntax จะเป็นการประกาศให้ function รับ argument กี่ตัวก็ได้ ซึ่งจะเขียนในบทความถัดไป

Spread syntax จะมีการใช้งานหลัก ๆ อยู่ 3 รูปแบบดังนี้

ใช้ส่ง arguments ให้ function

ยกตัวอย่าง function sum ตามภาพ รับ argument 3 ตัว เราสามารถโยน array ที่มีสมาชิก 3 ตัวด้วย Spread syntax เข้าไปใน function ได้เลย

function sum(x, y, z) {
    return x + y + z;
}
let numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

และหากเรานำไปใช้กับ function ที่ประกาศด้วย Rest syntax จะมองเห็นความเจ๋งของ Spread syntax ได้ชัดขึ้น

function sum(...theArgs) {
//theArgs รับเข้ามาจะเป็น array
    return theArgs.reduce((previous, current) => {
        return previous + current;
    });
}
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(sum(...numbers)); // 55

ใช้งานกับ array

array ใน JavaScript จะมีความพิเศษอยู่อย่างหนึ่ง คือเมื่อเรา assign ค่าตัวแปรที่เป็น array ตัวหนึ่งให้ตัวแปรอีกตัว มันคือการ assign by reference กล่าวคือแทนที่มันจะมองเป็น array คนละตัว มันกลับมองเป็นตัวเดียวกัน ถ้าเราแก้ตัวแปะตัวหนึ่ง อีกตัวจะกระทบไปด้วย

let a = [1, 2, 3];
let b = a;
a[0] = 0;
console.log(b); // [0, 2, 3]

ถ้าเราต้องการจะ clone array ให้มันเป็นคนละตัวแยกกันไป เราสามารถใช้ Spread syntax เข้ามาช่วยได้

let a = [1, 2, 3];
let b = [...a]; //ใช้ Spread syntax
a[0] = 0;
console.log(b); // [1, 2, 3]

อีกความเจ๋งของ Spread syntax คือเราสามารถ merge รวม array และเพิ่มค่าใหม่เข้าไปได้ด้วย

let a = [1, 2, 3];
let b = [4, 5, 6];
let c = [
    ...a,
    7, 8, 9,
    ...b
];
console.log(c); // [1, 2, 3, 7, 8, 9, 4, 5, 6]

ใช้งานกับ object

จะคล้ายกับ array คือใช้เพื่อ clone ได้ และ merge รวม property ของ object ได้ด้วย

let a = {firstname: 'John', lastname: 'Doe', job: 'Programmer'};
let b = {height: 190, age: '30', firstname: 'Amelia'};
let c = {
    ...a,
    ...b,
    hobby: 'Playing games',
};
console.log(c); // Object { firstname: "Amelia", lastname: "Doe", job: "Programmer", height: 190, age: "30", hobby: "Playing games" }

จะสังเกตเห็นว่า firstname จะโดนทับค่าด้วยตัวหลังสุด กลายเป็น Amelia จะมีประโยชน์มากเวลาเราต้องการอัพเดทค่าของ object ด้วยค่าใหม่หลาย ๆ ค่า

สรุป

หวังว่าจะช่วยให้เข้าใจการใช้งานและประโยชน์ของ Spread syntax ได้ไม่มากก็น้อย ติดตรงไหน comment ไว้ได้จะเข้ามาตอบเรื่อย ๆ

ค้นหาบล็อกนี้

Kotenarok