optional chaining .?

먼저 아래의 코드를 보자

if(restaurant.openingHours&&restaurant.openingHours.mon) 
 console.log(restaurant.openingHours.mon.open)

이 코드는 restaurant 객체에 openingHours라는 메서드가 있는지, 또 openingHours에 mon이라는 메서드가 있는지를 확인하는 코드이다. 똑같은 로직을 아래와 같이 간단하게 표현할 수 있는데, 이를 Optional Chaining이라고 한다.

console.log(restaurant.openingHours?.mon?.open)

이렇게 ?.를 사용해서 openingHours 메서드가 있는지 확인하고, 없으면 바로 undefined를 리턴한다.

다음 예시 코드를 보자

const days = ['mon','tue','wed','thu','fri','sat','sun']

for(const day of days){
  const open = restaurant.openingHours[day]?.open ?? 'closed'
  console.log(`on ${day}, we open at ${open}`)
}

for-of 루프를 사용하여 days 배열을 순회하고, open 변수에서 restaurant 객체의 openingHours에 day라는 키가 있는지 확인한다. 만약 openingHours?.[day]?.open이 있으면 그 값을 리턴하고, 없으면 undefined를 리턴한다. ??는 restaurant.openingHours?.[day]?.open이 null이나 undefined인 경우 closed를 리턴한다.

메서드에도 Optional Chaining을 사용할 수 있다. 아래의 코드를 보자.

console.log(
  restaurant.order?.(0,1)?? 'method does not exist'
)
console.log(
  restaurant.orderResotto?.(0,1)?? 'method does not exist'
)

restaurant 객체에 order라는 메서드가 있는지 확인하고, 있으면 (0, 1) 값을 집어넣어 호출한다. 만약 restaurant.orderRisotto?.(0, 1)의 값이 undefined나 null이면 'Method does not exist'를 리턴한다.

배열에서 사용할 때는 이렇게 쓰면 된다.

const users = [
  {name: 'Lingling',
    email: 'hello@lingling.io'
  }
]

console.log(users[0]?.name ?? 'User array empty ')

users 배열의 0번째 요소가 있는지 확인하고, 있으면 name을 확인한다. 값이 있으면 그 값을 리턴하고, undefined나 null이면 'User array empty' 값을 리턴한다.