javascript - optional chaining (?.)

Optional Chaining 이란?

'.' 체이닝 연산자와 비슷하지만, null 또는 undefined 이라면 에러를 반환하는 대신

undefined를 반환하는 것으로 마무리하도록 해주는 연산자 입니다.

 

예시를 몇가지 들어보겠습니다.

 

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

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],
  openingHours,
  order (a,b) {
    console.log(this.starterMenu[a], this.starterMenu[b])
  }
};

// mon 속성이 있어야 open 속성이 읽어진다
// 없으면 undefined 반환
console.log(restaurant.openingHours.mon?.open)

이런식으로 연결된 속성값을 출력하는데, 위의 예시에서는 mon 속성이 없습니다.

원래라면 에러를 발생시키겠지만, '?.' 연산자를 사용함으로써 undefined를 반환하게 됩니다.

 

이번엔 for문을 통해 사용해보겠습니다.

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

// undefined 시 기본값 사용하도록 Nullish coalescing operator(??) 사용
for(let day of days) {
  const open = restaurant.openingHours[day]?.open ?? 'closed';
  console.log(`open at ${open}`)
}

 

여기서도 역시 원래라면 에러가 발생해야 하지만, ?? 연산자와 연계함으로써

undefined 일 시에 기본값이 적용되도록 했습니다.

 

 

배열에서도 역시 사용 가능합니다.

// Arrays
const users = [{
  name: 'overaction',
  email: 'overaction@overaction.com'
}];

console.log(users[0]?.name);
console.log(users[2]?.name)

 

 

마지막으로 객체의 메서드에서도 사용할 수 있습니다.

// 객체
const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],
  openingHours,
  order (a,b) {
    console.log(this.starterMenu[a], this.starterMenu[b])
  }
};

// order 함수 사용
restaurant.order?.(0,1);
restaurant.orderno?.(0,1) ?? console.log('Method가 존재하지 않습니다');

존재하지 않는 메서드라면 에러 대신 기본값이 출력되도록 할 수 있습니다.