pnwt.bid
Published on

Optional Chaining ใช้ดีไหม?

Authors

Overview

ใน javascript มี operator ตัวนึงที่น่าสนใจ คือ optional operator (?.)

โดยปกติหากเราต้องการ เข้าถึง properties ใน object นั้นๆ เราจะต้อง .properties เข้าไป แต่ถ้าหากเราไม่แน่ใจว่า จะมี properties นั้นๆ อยู่ไหม optional chaning อาจเข้ามาช่วยได้

optional-chaning-1.jsx
const customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // detailed address is unknown
  }
};
const customerCity = customer.details?.address?.city;

ผลที่ได้คือ จะได้ value เป็น undefined แต่ในกรณีนี้เราจะเช็ค ด้วย optional chaning ด้วยว่า มันมีค่าอยู่จริง ถ้ามีก็จะไปทำที่ address ต่อ

ซึ่งปกติ ถ้าจะเราเอา properties ใน object มาใช้งานตรงๆ เราอาจจะทำแบบนี้

optional-chaining-2.jsx
  const customerCity = customer.details.age

  ## 82

ถ้าแบบนี้เราไม่รู้ว่า customer.details มีค่าหรือไม่ ใน documents เขาเลยแนะนำว่า ถ้าในกรณีที่ ไม่แน่ใจว่าจะมีค่าไหม ก็ให้ใช้ optional chaning เข้ามาช่วย

แต่ส่วนตัวผมคิดว่า ถ้าเราแน่ใจว่า object ตัวไหนถ้าจะต้องมีแน่ๆ ไม่มีทาง null หรือ undefined เราก็สามารถใช้แบบปกติได้เลยครับ

ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Thank you for watching!