[JS] Optional Chaning(?.)

Optional Chaning(?.)

옵셔널 체이닝 문법으로 객체의 속성 값이 유효한지 검증할 수 있습니다.
옵셔널 체이닝(?.) 앞의 대상이 undefined나 null이면 에러가 발생하지 않고 undefined 를 반환 합니다.

옵셔널 체이닝이 추가되기 전 중첩된 객체의 하위 속성을 찾기 위한 코드는 아래와 같았습니다.

const userInfo = {
  name: {
    first: 'Hong',
    last: 'Gildong',
  },
  address: {
    city: 'Seoul',
    postcode: '04377',
  },
};

const postcode = userInfo.address && userInfo.address.postcode;

&& 연산자를 사용해서 userInfo 에 address 속성이 있는지 확인을 하고 postcode에 접근하는 것을 볼 수 있습니다.

옵셔널 체이닝이 추가 된 후

const userInfo = {
  name: {
    first: 'Hong',
    last: 'Gildong',
  },
  address: {
    city: 'Seoul',
    postcode: '04377',
  },
};

const postcode = userInfo.address?.postcode;
 

옵셔널 체이닝을 사용하면 이전 코드보다 문법적으로 깔끔하고 안전하게 중첩된 객체의 하위 속성 값에 접근할 수 있습니다.

const userInfo = {
  name: {
    first: 'Hong',
    last: 'Gildong',
  },
  address: {
    city: 'Seoul',
    postcode: '04377',
  },
  getInfo: () => userInfo,
};

userInfo.getInfo?.();
// userInfo object

userInfo.setInfo?.();
// undefined

옵셔널 체이닝은 메소드의 존재 여부를 확인하고 호출할 때도 사용할 수 있습니다.

const userInfo = {
  name: {
    first: 'Hong',
    last: 'Gildong',
  },
  address: {
    city: 'Seoul',
    postcode: '04377',
  },
};
const key = 'city';

console.log(userInfo.address?.[key]);
// Seoul
 

. 대신 대괄호 [] 를 사용해 객체의 속성에 접근하는 경우에도 옵셔널 체이닝을 사용할 수 있습니다.