Arrow Function () => ใน Javascript ES6 และ Typescript
ในภาษา Javascript ES 6 มีการใช้ Arrow Function เข้ามาช่วยเสริมในการเขียน function ให้สะดวกมากขึ้น
หากใครคุ้นเคยกับภาษา C# น่าจะคุ้นหูคุ้นตากับ arrow function มาบ้างแล้ว จะเห็นว่า arrow function มีลักษณะคล้ายคลึงกับ Lambda Expressions ทั้งในด้าน syntax และ ลักษณะการทำงานเป็นอย่างมาก
โดย ข้อดีของ arrow function ใน javascript มีดังนี้
- สั้นกระทัดรัด ไม่จำเป็นต้องเขียนคำว่า function
- Context ภายในฟังก์ชัน ยังคงเป็น context ภายนอก
(ตัวแปร this ยังคงเป็น this ของภายนอก) - Arguments
ตัวอย่างการใช่ง่าย ๆ
มีความหมายคล้ายกับ
แต่มีข้อแต่ต่างนิดหน่อยตรงที่เมื่อเราใช้ this ภาษา javascript ความหมายของ this เปลี่ยนไปได้ง่ายเกินไป ซึ่งเจ้าตัวฟังก์ชั่นลูกศรนี้มาช่วยเราได้มาก ดูได้ในตัวอย่างต่อไปนี้
ผลลัพธ์ที่ต้องการคือ 2 แต่เมื่อนำ code ไป execute กลับได้คำตอบเป็น 1 เพราะ this ใน function Person กับ this ใน growOld เป็นคนละตัวกัน ซึ่ง arrow function เข้ามาแก้ไข้ในส่วนนี้
ซึ่ง code ที่เห็นสามารถเปลี่ยนให้เข้าใจได้ง่ายเมื่อเราเขียนดังนี้
จะเห็นว่า this ภายใน function กับ this ผ่านใน function growOld จะมีค่าเท่ากัน
** ถ้าใช้ typescript สามารถเขียน constructor ได้ง่าย ๆ ดังนี้
** ข้อควรระวัง การใช้ arrow function ควรจะเลือกใช้ในกรณีที่เหมาะสมเช่นเมื่อไม่ต้องการใช้ this ของ function หรือมีการใช้ arguments ที่แตกต่างกับ function ตัวนอก หรือการใช้ใน callback ของ libraries ต่าง ๆ เพราะในบางครั้งมีการใช้ this ใน libraries ด้วย
