[Javascript] Optional chaining คืออะไร ใน ES11 ที่กำลังจะมาถึง
บทความนี้จะเป็นการอธิบายในมุมมองของผม หากส่วนไหนผิด ขออภัยด้วยนะครับ
Optional chaining คือ operator ?. (เครื่องหมาย คำถาม และ จุด) ซึ่งจะยินยอมให้เราอ่านค่า property ใน object ใช้เหมือนกับ operator . (จุด)
แต่ที่พิเศษกว่าคือ operator ?. จะทำการเช็ค object ที่เราต้องการอ่าน ว่ามีค่าหรือไม่หากไม่มีก็จะ fallback undefined ให้เราแทนที่จะ throw error
ตัวอย่างเช่น
const obj = { foo: {}}console.log(obj.foo?.bar?.foobar) // undefined// เราจะได้ fallback undefined แทนที่จะเกิดการ throw error
// เพราะค่าของ bar เป็น undefined.
แถมตัว operator ?. ยังสามารถเช็คได้อีกว่า function ที่เราจะทำการ execute ใน object มีอยู่จริงหรือไม่ ก่อน execute เพื่อป้องกัน error
Optional chaining เป็นหนึ่งในฟีเจอร์ใหม่ที่จะมาใน ES11สถานะตอนนี้คืออยู่ใน Stage 3 ในการประชุม TC39 เดือน กรกฎาคม 2019
แต่ใน Browser บางตัวก็เริ่มซัพพอร์ตแล้วทั้งใน Desktop และ Mobile
เอาหละ เชื่อว่า Dev ทุกคนคงเคยผ่านปัญหากับ nested object ที่บางครั้ง property ที่ต้องใช้ดันหายไป หรือมาไม่ครบ จากการ fetching data หรือ side effect บางอย่าง จนทำให้เกิด Error: Cannot read property ‘x’ of undefined
วิธีที่เราใช้กันในปัจจุบัน
จะเห็นได้ว่าเราต้องเขียน expression ในการเช็ค property ยาวมาก ถ้าเกิดว่าต้องอ่านค่า property ที่อยู่ใน nested object ถ้าไม่เช็คก็อาจจะเกิด error ได้
แต่ถ้าเกิดใช้ Operation ?.
จะเห็นว่า เราไม่ต้องเขียน expression โดยใช้ && ในการเช็ค property แต่ละชั้นอีกแล้ว! (ซึ่งจะยาวมาก ถ้าหากต้องเช็คหลาย property ใน nested object)
แต่ความเทพของ ?. ยังไม่หมด
- เช็คว่ามี function ที่เราจะ execute อยู่ใน object หรือไม่ก่อนที่จะ execute function
2. ใช้กับ expressions ได้
3. ใช้กับ array access item ได้
4. ใช้กับ nullish coalescing operator ได้
สำหรับ Operation chaining เป็นหนึ่งใน feature ที่จะมาพร้อมกับ ES11 หรือ ES2020 ซึ่งจริงๆ ยังมี feature อื่นๆ อีกมากมายที่จะช่วยให้เรา ทำงานได้ง่ายยิ่งขึ้นในอนาคต.
