บทความ IT เจ๋งๆ

Spread Operator (...) เป็นหนึ่งใน Syntax ของ JavaScript ที่ช่วยให้คุณ สามารถการจัดการกับ Arrays และ Objects ง่ายและ Clean ขึ้น ไม่ว่าจะเป็นการรวมข้อมูล, คัดลอก หรือแก้ไขค่า บทความนี้จะพาคุณไปดู 6 วิธีใช้งาน JavaScript Spread Operator ที่ Developer ควรรู้ พร้อมตัวอย่างการใช้งานจริง

Spread Operator คืออะไร?

Spread Operator คือ Syntax ที่ใช้เครื่องหมายจุดสามจุด (…) ใน JavaScript เพื่อกระจายค่า Iterable เช่น Arrays, Strings และ Objects ให้ออกมาเป็นค่าทีละตัว นอกจากนี้ยังสามารถใช้เพื่อ Copy Object, Merge Object และ Combine Array

หนึ่งในตัวอย่างที่ใช้บ่อยที่สุดคือ การ Combine Array ในลักษณะที่ Clean cละอ่านเข้าใจได้ง่าย

วิธีใช้งาน Spread Operator

1. Array Spreading

ในการกระจาย Elements จาก Array หนึ่งไปยังอีก Array หนึ่ง สามารถใช้ Spread Operator (…) แล้วตามด้วย Array ที่ต้องการจะกระจายค่า

ในตัวอย่างนี้ ค่าใน nums จะถูกคัดลอกไปยัง Array ใหม่ จากนั้นค่า 4 และ 5 จะถูกเพิ่มเข้าไปด้านท้าย

2. Object Spreading

เมื่อใช้ Spread Operator กับ Object จะเป็นการคัดลอก Properties ของ Object หนึ่งไปยัง Object ใหม่

หาก Property ใดที่มีอยู่แล้ว (เช่น age) ค่าใหม่ก็จะเขียนทับค่าเดิม

ควรใช้ Spread Operator เมื่อใด?

1. คัดลอก Arrays

คุณสามารถสร้างสำเนาแบบ Shallow Copy ของ Array ได้ด้วย Spread Operator ซึ่งหมายความว่า Array ใหม่จะมีค่าข้อมูลเหมือนเดิม แต่จะเป็นการอ้างอิงคนละตำแหน่งกันในหน่วยความจำ

2. รวม Arrays เข้าด้วยกัน

Spread Operator จะช่วยให้การรวมหลาย ๆ Arrays ให้เป็น Array ใหม่ ทำได้ง่ายขึ้น โดยที่ไม่ต้องแก้ไข Array ต้นฉบับ

3. โคลน Objects

การสร้างสำเนาแบบ Shallow Copy ของ Object สามารถทำได้ง่ายโดยใช้ Spread Operator ซึ่งจะทำการสร้าง Object ใหม่ที่มี Properties เหมือนกับ Object ต้นฉบับ

การเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นกับ clonedObject จะไม่ส่งผลกระทบกับ originalObject

4. ส่ง Array เป็น Arguments ให้ Function

เมื่อเรียกใช้ Function ที่ต้องการรับ Arguments แบบแยกค่า Spread Operator จะช่วยให้คุณสามารถส่งค่าจาก Array ไปเป็น Arguments ทีละตัวได้

ในตัวอย่างนี้ …numbers จะทำการกระจาย Array ออกเป็นค่าแต่ละตัว (1, 2, 3) เพื่อให้ตรงกับ Parameter ของ Function

5. แยก String

Spread Operator ยังสามารถใช้ในการกระจาย String ให้กลายเป็นตัวอักษรทีละตัวได้

ในตัวอย่างนี้ ตัวอักษรแต่ละตัวใน String จะถูกกระจายไปอยู่ใน Array ใหม่

6. กำจัดค่าที่ซ้ำกันใน Array

คุณสามารถใช้ Spread Operator ร่วมกับ Set เพื่อกำจัดค่าที่ซ้ำกันใน Array ได้

ข้อดีของ Spread Operator

• Simplicity: Syntax เข้าใจง่าย ทำให้ Code อ่านได้ง่ายและกระชับมากขึ้น
• Immutability: สร้าง Array หรือ Object ใหม่, ช่วยรักษาข้อมูลต้นฉบับไม่ให้ถูกแก้ไข
• Versatility: สามารถใช้งานได้กับ Arrays, Objects, Function Arguments และค่า Iterable อื่น ๆ เช่น Strings และ Maps

ข้อเสียของ Spread Operator

• Shallow Copy: Spread Operator สามารถสร้างเพียงแค่ Shallow Copy ได้เท่านั้น Object หรือ Array ที่ซ้อนกันยังคงอ้างอิง Reference เดิม
• Performance: หากใช้กับ Arrays หรือ Objects ที่มีขนาดใหญ่มาก อาจส่งผลต่อ Performance เนื่องจากมีการใช้หน่วยความจำเพิ่มขึ้น

สามารถใช้ Spread Operator กับ Data Type อื่น ๆ นอกจาก Arrays และ Objects ได้หรือไม่?

คำตอบคือ ได้ โดย Spread Operator ยังสามารถใช้กับ Iterable Data Types อื่น ๆ เช่น Strings, Sets และ Maps ได้เช่นกัน

• Strings: ตัวอักษรแต่ละตัวจะถูกกระจายออกเป็น Element แยกกัน
• Sets: ค่าที่ไม่ซ้ำกันแต่ละค่าจะถูกกระจายไปยัง Array ใหม่
• Maps: แต่ละ Entry จะถูกกระจายออกมาเป็น Key–Value Pair ซึ่งโดยทั่วไปจะอยู่ในรูปแบบ Array

สรุป

และนี่ก็เป็น 6 วิธีใช้งาน JavaScript Spread Operator ที่ Developer ควรรู้ เพราะมันเป็นเครื่องมือสำคัญของ Modern JavaScript ที่ช่วยให้ Code สั้น อ่านง่าย และจัดการข้อมูลแบบ Immutable ได้สะดวก เมื่อคุณใช้งานได้คล่อง มันจะช่วยเพิ่มคุณภาพและความยืดหยุ่นของ Code ในงาน Development ได้อย่างมาก

ที่มา: https://medium.com/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความล่าสุด

• 7 ความผิดพลาดในการใช้ Git ที่ควรหลีกเลี่ยง เพื่อปรับ Workflow ให้ดีขึ้น
• IT & Digital Events in April 2026
• 10 API Tools ที่ Full-Stack Developer สามารถนำไปใช้ในงานจริงได้