Jaynarol Blog

ว่าด้วยเรื่อง ES6 : Functions & Variables

สวัสดีครับ บทความนี้เราจะมาต่อในหัวข้อ Functions และ Variables ของ ES6

โดยภาพรวมในบทความจะเน้นการแสดงให้เห็น syntax ที่เปลี่ยนไปหรือดีขึ้น พร้อมทั้งเปรีบเทียบกับ ES5 เช่นเคยครับ

ใครที่เพิ่งเข้ามาอ่านบนความนี้เป็นครั้งแรก

แนะนำให้อ่าน ES6 ฉบับปูพื้น และ Classes ก่อนเพื่อความเข้าใจมากขึ้นครับ

 

Scoping

 

Scoped Variables

เนื่องจากการสร้างตัวแปรด้วย var ใน ES5 นั้น ไม่มี Scope การทำงาน

จึงทำให้เกิด Bug จากเคสที่คาดไม่ถึงได้ง่ายมาก

ES6 จึงได้มีการเพิ่ม let เข้ามาเพื่อสนับสนุนการทำ Scope โดยเฉพาะ

ข้อดีคือ ตัวแปรที่ถูกสร้างด้วยคำสั่ง let จะตายลงแน่นอน เมื่อทำงานสิ้นสุดใน Scope ของมัน

 

 

Scoped Functions

ใน ES5 การใช้ Scoped Functions เราซิกแซกด้วยการสร้าง anonymous function และเรียกใช้งานทันที

ใน ES6 เรามี syntax ที่ง่ายขึ้น

 

 

Variables

 

Constants

ใน ES6 เราสามารถกำหนดค่าคงที่ง่ายๆได้ในบรรทัดเดียว

โดยค่าคงที่นี้จะไม่สามารถเปลี่ยนแปลงได้ตลอดการทำงาน สะดวกกว่า ES5 อย่างมาก

 

 

Property Shorthand

ใน ES6 การสร้าง object สามารถเขียนได้สั้นและลดความซ้ำซ้อนลง

เราสามารถกำหนดค่าตัวแปรลงไปใน object ได้เลย โดย ES6 จะแปลงชื่อตัวแปรเป็นชื่อ property ของ object โดยอัตโนมัติ

 

 

Computed Property Names

สามารถสร้างชื่อ property ของ object ที่อยู่ในรูปแบบ dynamic ในโครงสร้างของ object นั้นได้ทันที

 

 

Method Properties

เราสามารถสร้าง method ลงไปใน object ได้ด้วย code ที่สะอาดขึ้น และรองรับ generator functions* ด้วย
* จะอธิบายในบทความหน้า

 

 

Arrow Function

เป็นอีกหนึ่งฟีเจอร์ของ ES6 ที่ควรทำความเข้าใจและให้ความสำคัญกับมันมากๆ เพราะได้ใช้มันบ่อยแน่ๆ 🙂

ES6 สามารถย่อรูป anonymous function ให้หดได้แบบน่ารักมาก

 

 

Parameter Handling

 

Default Parameter Values

ฟีเจอร์นี้ถือเป็นสวรรค์โดยแท้ เราสามารถกำหนดค่า default ให้กับ function หรือ method ได้เหมือนภาษาอื่นๆแล้ว

 

 

Spread Operator and Rest Parameter

Spread Operator คือ การนำ array มากระจายออกด้วย syntax […val]

โดยถ้านำมันไปใช้เป็น parameter ก็ถูกจะเรียกอีกชื่อนึงว่า Rest Parameter

เป็นฟีเจอร์ที่โดดเด่นอีกอันใน ES6 สามารถนำไปประยุกต์ใช้ได้หลายท่ามาก

 

ปิดท้าย

ฟีเจอร์ที่กล่าวมาทั้งหมดในหน้านี้ ช่วยให้เรามองเห็นถึงจุดประสงค์ของ ES6 เพิ่มขึ้นมาอีก 1 อย่าง

นอกเหนือจากการปรับ syntax ให้โค้ดอ่านง่ายแล้ว

ES6 ได้แสดงถึงความตั้งใจที่จะช่วยลดข้อผิดพลาดหรือ Bug ที่อาจเกิดขึ้นจากความไม่ตั้งใจ

ไม่ว่าจะเป็นความสามารถของ Scoping ที่ช่วยจำกัดขอบเขตของตัวแปร

หรือ Default Parameter ที่ช่วยให้รับค่าได้อย่างมั่นใจว่าจะไม่เจอ undefined

อีกเรื่องนึง ที่ผมแนะนำให้ศึกษาไว้ให้แม่นก็เห็นจะเป็น Arrow Function และ Spread Operator

นอกจากมันจะทำให้โค้ดเราดูสะอาดขึ้นทันตาเห็นแล้ว มันยังช่วยให้เราอ่านโค้ดคนอื่นออกด้วยครับ 🙂