40. Optional Chaining (?.)

안녕하세요. 박기린 입니다.

이번엔 Optional Chaining(옵셔널 체이닝)에 대해 알아보겠습니다.

 

Optional Chaining의 탄생 비화 in ES2020

const openingHours = {
  thu: {
    open: 12,
    close: 22,
  },
  fri: {
    open: 11,
    close: 23,
  },
  sat: {
    open: 0, // Open 24 hours
    close: 24,
  },
};

우선 위와 같은 객체가 있다고 가정을 합니다. 하지만 개발자는 이 객체의 정확한 정보를 모르기 때문에, 월요일부터 일요일까지 중에 어떤 요일이 있고 없는 지에 대해 모릅니다.

개발자는 서버에 당연히 월요일에 대한 정보가 있을 거라고 생각하고,

console.log(openingHours.mon.open); // TypeError: undefined

이런 코드를 작성했지만 에러를 표시하고 실행이 되지 않습니다. 왜냐하면, openingHours Object에는 mon property가 존재하지 않기 때문입니다.

 

외부 서버의 API로 데이터를 받아올 경우, 위처럼 해당 데이터가 없거나 안 불러와지는 경우가 발생할 수 있습니다. 그래서 대안으로 if문을 사용해서 데이터의 유무를 검사했지만, 매번 이러기에는 길고 복잡합니다.

 

ES2020은 이에 대한 솔루션으로 Optional Chaining(옵셔널 체이닝)을 업데이트했습니다.

 

 

---

Optional Chaining

Optional Chaining은 특정 property, method가 존재하지 않는 경우 TypeError 대신에 undefined를 return 합니다. 

사용 방법은 '?.' 물음표와 온점을 사용하는 것입니다.

 

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

 

위 코드의 경우,

1. openinHours Object는 존재하기 때문에 넘어갑니다.

2. mon property는 openinHours Object에 존재하지 않습니다. 코드를 중단하고 undefined를 return 합니다.

 

 

응용 예시

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

for (const day of days) {
  console.log(day);
  const open = openingHours[day]?.open ?? 'closed'; // expression을 이용해서 이름을 설정하려면 []대괄호 사용
  console.log(`On ${day}, we open at ${open}`);
}

 

위의 코드의 작동 방식

1. for-of 문으로 days Array의 개별 요소에 접근합니다.

2. open 변수에 

  2-1. day 변수가 openingHours의 요일 property에 포함될 경우 (thu, fri, sat), 그때의 open time을 저장한다.

  2-2. day 변수가 openingHours의 요일 property에 포함되지 않는 경우, 'closed' String을 저장한다.

 

( ?? 연산자를 모른다면 이 글을 참고해주세요 : https://arnopark.tistory.com/523)

 

 

 

---

Method

Optional Chaining으로 method의 유무를 확인할 수 있습니다.

Object이름.method이름?.(method에 넣을 인수);

독특한 점은 method()구조에서 method?.()구조로, method의 이름과 (괄호) 사이에 '?.'을 넣어주어야 합니다.

 

 

응용 예시

console.log(restaurant.order?.(0, 1) ?? 'Method does not exist');
console.log(restaurant.orderRisotto?.(0, 1) ?? 'Method does not exist');

 

 

---

Arrays

Optional Chaining으로 Array 안에 특정 index의 element가 존재하는 지를 검사할 수 있습니다.

const users = [{name: 'Jonas', email: 'ewqrqwe@qwerqwer.com'}];
console.log(users[0]?.name || 'User array empty.');