มารู้จัก Optional Chaining ใน ES2020 (ES11) กันเถอะ

Optional Chaining in ES2020 (ES11)

Optional Chaining หรือ ` ?. ` มันคือ อะไรกัน ?

เรามาลองดูกันนะครับ

ลองจินตนาการถึงการที่เราจะไปดึงค่า `c` จาก Object ต่อไปนี้

const data = { a: { b: { c: 10 } } }

บางทีใน `data` อาจไม่มี `a` อยู่ก็ได้ แม้จะมี `a` อยู่ก็ไม่มีหลักประกันว่า `b` จะมีอยู่เช่นกัน ส่วน `c` นั้นไม่ต้องพูดถึงเลย อยู่ลึกมาก

เพื่อให้เราแสดงผล `c` โดยไม่เกิดข้อผิดพลาด เราจึงต้องตรวจสอบเสียก่อนว่า
ภายใต้ `data` นั้น จะต้องมี `a` อยู่ และใน `a` นั้น จะต้องมี `b` อยู่ และใน `b` จะต้อง มี `c` อยู่

const result = data && data.a && data.a.b && data.a.b.c

เป็นไงครับเราต้อง check กันยาวเลย
มาลองกันดูว่าถ้าเราใช้เจ้า Optional Chaining จะออกมาเป็นยังไง

const result = data?.a?.b?.c // 10

จริงดิ สั้นๆ งี้เลยเอ่อ ? ใช่ครับสั้นๆ งี้เลย

แล้วมันใช้กับการ Chaining แบบ ธรรมดาแบบนี้ได้ไหม ?

ได้เหมือนกันครับผม เราสามารถใช้แบบผสมๆ กันได้อย่างลงตัวเลย

const result = data?.a.b?.c // 10

สามารถอธิบายได้แบบนี้ครับ
มันจะเข้าถึง `a` ได้เฉพาะกรณีที่มี `data` อยู่เท่านั้น และ
จะเข้าถึง `c` ได้เฉพาะเฉพาะกรณีที่มี `b` อยู่เท่านั้น

แล้วถ้าสมมุติว่าจะไปเอาตัวที่มันไม่มีอยู่จริงละ ?

เช่น จะไปเอา `z` ที่ไม่มีอยู่จริงใน `a`

const result = data.a.z 
// Uncaught TypeError: Cannot read property ‘z’ of undefined

!!! อื้อหือ, ถึงกับพังกันเลยทีเดียว T_T

แต่ถ้าเราใช้เจ้าตัว Optional Chaining แทนผลที่ได้จะออกอย่างที่เห็นเลยครับ

const result = data?.a?.z // undefined

คือ code เราจะไม่พังแต่มันจะ return undefined มาให้แทน

แล้วมันเอามาใช้กับอะไรได้อีก ?

จริงๆ มันใช้ได้อีกหลายรูปแบบเลยครับ ถ้าเรามาดูตาม Syntax ของมัน

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

ทีนี้ลองเอาไปดูอีกสักตัวอย่างง่ายๆ แล้วกันครับ

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
}
const baz = obj?.foo?.bar?.baz // 42
const safe = obj?.qux?.baz // undefined

ใช้แบบ bracket notation (obj?.[expr]) แบบนี้ก็ได้นะเออ

const baz = obj?.['foo']?.bar?.baz // 42

แล้วลองเอามาประยุกต์ใช้กับพวก function แบบนี้ก็ได้ครับ

const duration = vacations.trip?.getTime?.()

สุดท้ายนี้ก็อยากบอกว่ายังไงก็ลองเอาไปเล่นกันดูนะครับ รับรองว่าจะช่วยให้คุณทำงานได้ง่ายขึ้นอย่างแน่นอน