Spread Operator (…)

คือ operator ใหม่ที่เข้ามาช่วยเราในการกระจาย object ใน array ให้ง่ายมากขึ้น ลองดูตัวในตัวอย่างนะครับ

Apply

โดยปกติแล้วเราจะใช้ Function.prototype.apply ในการ Apply

function foo(x, y, z) { }
var args = [0, 1, 2];
foo.apply(null, args);

ตอนนี้เราทำได้ง่ายมากขึ้นโดยการใช้ … เข้ามาช่วยแล้วครับ ซึ่งทำได้ดังนี้

function foo(x, y, z) { }
var args = [0, 1, 2];
foo(...args);

แค่นี้เราก็สามารถนำค่าไปใส่ตาม parameter ได้แล้วครับ

Destructuring

เราสามารถใช้ … ในการรับค่าอะไรบ้างอย่างที่เราไม่ทราบจำนวนที่แน่นอนได้ เช่น

var [x, y, ...remaining] = [1, 2, 3, 4];
console.log(x, y, remaining); // 1, 2, [3,4]

ผลที่ได้คือ remaining จะได้ผลเป็น array [3, 4] ทั้งนี้เราสามารถนำมาใช้กับ parameter ใน function ก็ได้นะครับ

Array Assignment

คล้ายกับการ Apply เราสามารถใช้ … ในการ assign array ให้กับ array อื่นได้

var list = [1, 2];
list = [...list, 3, 4];
console.log(list); // [1,2,3,4]

หรืออย่างงี้ก็ได้นะครับ

var list = [1, 2];
var list2 = [3, 4, 5];
list.push(...list2)
console.log(list); // [1,2,3,4,5]

ผลที่ได้คือ [1, 2, 3, 4, 5] ไม่จำเป็นต้อง loop เอาเองอีกแล้ว

สรุป

Spread Operator มาช่วยเราให้เราสามารถเขียนโปรแกรมได้สะดวกมากขึ้น ลดบรรทัดในการเขียน code ลง ทำให้คนอื่นมาอ่าน code เราได้ง่ายขึ้นอีกด้วย