옵셔널 체이닝 '?.'

최근에 추가된 문법으로 프로퍼티가 없는 중첩 객체를 에러없이 안전하게 접근 가능하게 해준다.

?.은 앞의 평가 대상이 undefined이거나 null이면 평가를 멈추고 undefined를 반환한다. 존재한다면 해당 프로퍼티를 반환

아래와 같이 없는 프로퍼티에 접근하여 에러가 나게된다.

user.address만 접근하면 없는 프로퍼티이기에 undefined가 출력되겠지만, undefined에 street을 참조하려고하기 때문에 error

let user = {};

alert(user.address.street); // TypeError: Cannot read property 'street' of undefined

해결 방법

• 기존 방법 : &&이용

alert(user && user.address && user.address.street); //undefined

• 새로운 방법 : 옵셔널 체이닝(?.) 이용

alert(user?.address?.street); //undefined

특징

• ?.앞의 변수는 꼭 선언이 되어있어야한다.

• ?.은 연산자가 아니라 함수나 대괄호와 함께 동작하는 특별한 문법 구조체

  let user1 = {
    firstName: 'Violet',
    admin() {
      alert('관리자 계정입니다.');
    },
  };
  let user2 = {};
  
  user1.admin?.(); // 관리자 계정입니다.
  user2.admin?.(); //아무일이 일어나지 않는다.
  
  alert(user1?.['firstName']); //Violet
  alert(user2?.['firstName']); //undefined