COOL IT IDEAS AND STUFF

See the original english version Click here!

 

Arrow Function เป็น Feature ที่ช่วยให้การเขียน JavaScript Code มีความกระชับ และอ่านง่ายขึ้น แต่ในขณะเดียวกันก็มีพฤติกรรมบางอย่างที่แตกต่างจาก Function ปกติ ซึ่งอาจทำให้เกิด Bugs แบบเงียบ ๆ ได้โดยไม่รู้ตัว บทความนี้จะพาไปดู 6 ความผิดพลาดของ Arrow Function ใน JavaScript ที่ Developer มักเจอในการทำงาน

1. Return Object ผิดวิธี

เรื่องนี้น่าจะเป็นหนึ่งในสิ่งที่แทบทุกคนเคยพลาดกันมาแล้ว

Code นี้ดูเหมือนว่าจะ Return Object แต่จริง ๆ แล้ว มันไม่ได้ Return อะไรเลย

ทำไมถึงเป็นแบบนั้น?

JavaScript มอง {} ในกรณีนี้เป็น Function Body ไม่ใช่ Object ดังนั้นจึงไม่มีค่า Return

JavaScript จะตีความ Code เป็นแบบนี้แทน

เมื่อไม่มี Return ค่าที่ได้จึงกลายเป็น undefined

วิธีที่ถูกต้อง:

เพียงแค่ครอบ Object ด้วยวงเล็บ () เท่านี้ก็ใช้งานได้แล้ว

ทุกครั้งที่ต้อง Return ค่าเป็น Object จาก Arrow Function ก็ควรจะใส่วงเล็บครอบไว้เสมอ เพราะการทำแบบนี้จะช่วยป้องกันการเกิด Bugs ได้ดีมาก

2. ปัญหาที่เกิดกับ map() แบบเงียบ ๆ 

ข้อนี้อันตรายมากถ้าเกิดใน Production

แม้ Code นี้ จะไม่มี Error แต่ข้อมูลที่ได้จะ ผิดทั้งหมด

ลองจินตนาการว่า คุณส่งข้อมูลนี้ไปให้ Frontend UI ดูสิ ตอนนี้ List ทั้งหมดในหน้า Web อาจพังได้ทันที

Version ที่ควรเป็น:

ดังนั้น ทุกครั้งที่คุณใช้ map() แล้วมีการ Return ค่าเป็น Object ก็อย่าลืมเช็ควงเล็บซ้ำอีกครั้งเสมอ

3. ใส่ Curly Braces แล้วลืม return

ข้อนี้มักจะเกิดขึ้นตอนที่เรารีบเขียน Code

จากด้านบน ดูเหมือนว่าจะ Return ค่าเป็น 5 ถ้าใส่ค่าเป็น 2 กับ 3 แต่จริง ๆ แล้ว มันไม่ได้ Return อะไรกลับมาเลย

ทันทีที่คุณใส่ {} คุณต้องใส่คำสั่ง Return อย่างชัดเจน

วิธีที่ถูกต้อง:

หรือ

กฎง่าย ๆ ก็คือ ถ้าคุณใช้ {} ก็ต้องมีคำสั่ง Return ด้วย

4. ใช้ Arrow Function เป็น Object Method

ข้อนี้อาจทำให้บางคน รู้สึกสับสนในครั้งแรก

คำถาม: ทำไมมันถึงไม่ทำงาน?

คำตอบ: Arrow Function ไม่มี this เป็นของตัวเอง

มันจะรับค่า this จาก Scope ภายนอก ซึ่งในกรณีนี้ มันไม่ได้อ้างอิงถึง Object User

Version ที่ถูกต้อง:

ตอนนี้มันทำงานได้อย่างถูกต้องแล้ว

Arrow Function เหมาะกับ Callbacks แต่ ไม่เหมาะกับ Object Methods

5. ใช้ arguments กับ Arrow Function

Arrow Function ไม่มี arguments Object

Code ด้านบนนี้ จะใช้งานไม่ได้ตามที่ควรจะเป็น

ถ้าต้องการรับ Parameter แบบไม่จำกัด ควรใช้ Rest Syntax

วิธีที่ถูกต้อง:

จะเห็นว่าวิธีนี้จะทำให้ อ่านง่ายกว่า ทันสมัยกว่า และพฤติกรรมของ Code ที่เข้าใจได้ง่ายและคาดเดาได้

6. Async Arrow Function ที่ Return undefined

ลองเอาปัญหาการ Return Object แบบผิดวิธี มาใช้ร่วมกับ async ดู จะทำให้การ Debug ยิ่งยากและซับซ้อนขึ้นทันที

สาเหตุหลักก็ยังคงเหมือนเดิม แต่ตอนนี้คุณกำลังต้องคิดเรื่อง Promise และ Async Chains ด้วย ดังนั้นความผิดพลาดทาง Syntax เล็กๆ น้อยๆ จึงถูกซ่อนอยู่ได้ง่าย

Version ที่ถูกต้อง:

เมื่อทำงานกับ Async Functions ข้อผิดพลาดทาง Syntax เล็ก ๆ น้อย ๆ ก็อาจกลายเป็นปัญหาใหญ่ได้

จากปัญหาข้างต้นสามารถสรุปเป็นประเด็นได้ดังนี้

• ถ้า Return Object → ต้องครอบด้วย ()
• ถ้าใช้ {} → ก็ต้องมี Return
• Object Methods → ใช้ Function Syntax ปกติ
• ถ้าต้องการ arguments หลายตัว → ให้ใช้ ...args
• ใช้ map() เพื่อ Return Objects → อย่าลืมตรวจสอบวงเล็บให้ดี

สรุป

และนี่ก็เป็น 6 ความผิดพลาดของ Arrow Function ใน JavaScript ที่ Developer มักเจอ แม้ว่า Arrow Function จะเป็นเครื่องมือที่ทรงพลัง แต่การใช้งานให้ถูกต้องจำเป็นต้องเข้าใจพฤติกรรมของมันให้ดี โดยเฉพาะเรื่อง return, การใช้ this และการคืนค่า Object จาก Function อีกทั้งการครอบ Object ด้วย () และการตรวจ Syntax ให้รอบคอบจนเป็นนิสัย ก็ช่วยลด Silent Bugs ที่อาจหลุดไปถึง Production ได้อย่างมาก

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

 

 

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

 

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

 

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

• 10 เทคนิค Modern CSS Layout ที่ Frontend Developer ควรรู้ในปี 2026
• คู่มือคำสั่ง Git พร้อมตัวอย่างการใช้งานสำหรับการทำงานจริง
• IT & Digital Events in March 2026