ไวยากรณ์แปลก `?.` ใน JavaScript หมายถึงอะไร?

มาลองเข้าใจ ?. ด้วยตัวอย่าง

พิจารณาอ็อบเจกต์ต่อไปนี้ที่อธิบายมนุษย์เพศชายอายุ 23 ปี

const being = {
  human: {
    male: {
      age: 23
    }
  }
};

ตอนนี้สมมติว่าเราต้องการเข้าถึงคุณสมบัติ age ของอ็อบเจกต์ being ง่ายมากใช่ไหม เราจะใช้การเชื่อมโยง (chaining) เข้าถึงแบบโค้ดด้านล่าง

ตัวอย่าง

const being = {
  human: {
    male: {
      age: 23
    }
  }
};
console.log(being.human.male.age);

ผลลัพธ์

ผลลัพธ์ในคอนโซลคือ

23

ตอนนี้สมมติว่าเราเปลี่ยนคุณสมบัติ male ของ being เป็น female หรืออย่างอื่นเพื่อเหตุผลทางเทคนิค

การเชื่อมโยงของเราจะเกิดอะไรขึ้น? จะโยน TypeError ว่าไม่สามารถเข้าถึงคุณสมบัติ undefined ของ human ได้ มีวิธีไหนป้องกันไม่ให้โค้ดโยนข้อผิดพลาดไหม? มี และนี่คือที่ที่ ?. หรือ Optional Chaining (การเชื่อมโยงแบบเลือกได้) มาช่วยเหลือ

สิ่งที่ Optional Chaining ทำค่อนข้างง่าย มันทำงานเหมือนการเชื่อมโยงปกติในสภาพปกติ แต่เมื่อเราพยายามเข้าถึงคุณสมบัติจาก undefined แทนที่จะโยนข้อผิดพลาด มันจะหยุดการเชื่อมโยงทันทีและคืนค่า undefined เพื่อให้โค้ดส่วนที่เหลือทำงานต่อได้ปกติ

พิจารณาตัวอย่างล่าสุด (Optional Chaining)

ตัวอย่าง

const being = {
  human: {
    male: {
      age: 23
    }
  }
}
console.log(being?.human?.female?.age);

ผลลัพธ์

แทนที่จะโยนข้อผิดพลาด ผลลัพธ์จะเป็น

undefined