옵셔널 체이닝 등장 배경

비교적 새로 추가된 자바스크립트 문법으로 프로퍼티가 없는 중첩 객체를 에러없이 접근할 때 사용한다. 유저 정보를 담아두는 user 객체에 아무런 정보가 없는 상태에서 address 속성에 접근하려고 하면 아래처럼 타입 에러가 발생한다.

const user = {};
console.log(user.address.street) 
// TypeError: Cannot read property 'street' of undefined

React나 Vue의 상태관리 라이브러리를 쓸 때 아직 스토어에 있는 정보를 다 불러오지 않은 시점에서 객체의 속성에 접근할 때도 비슷한 타입에러가 발생한다.

// selectedMall은 스토어에서 불러올 정보
// 아직 스토어에서 selectedMall 정보를 조회하지 않은 상태라면 
// 아래 코드가 실행될 시점에선 타입에러가 발생한다
watch(
  () => selectedMall.value,
  (newValue, oldValue) => {
    if (oldValue.id === newValue.id) {
      return updateInboxState();
    }
    if (newValue.id) {
      updateInboxState();
    }
  }
);

• 🔍️ 위 코드에 옵셔널 체이닝을 사용한 예시

중첩 객체의 특정 프로퍼티에 접근할 때 거치는 속성들을 AND 연산자를 활용해 실제 해당 객체나 프로퍼티가 있는지 확인하여 타입에러를 피할 수 있다. 하지만 이 같은 방식은 코드가 매우 길어지는 단점이 존재한다.

const user = {};
console.log(user && user.address && user.address.street)

옵셔널 체이닝 사용법

<aside> 💡 구형 브라우저에선 폴리필 필요

</aside>

옵셔널 체이닝은 속성을 명시하는 온점 앞에 물음표를 ?. 추가하는 방식으로 사용한다. 평가 대상이 undefined거나 null이면 평가를 멈추고 undefined를 반환한다. 즉 접근하는 객체나 객체의 속성이 존재하지 않는다면 undefined를 반환한다.

const user = {};
console.log(user?.address?.street); // undefined

const user = null;
console.log(user?.address); // undefined

단락 평가

?. 왼쪽 평가 대상에 값이 없으면 평가를 멈춘다. 이런 평가 방식을 단락 평가(short-circuit)라고 부른다. 왼쪽 ?.의 평가를 멈췄다면 ?. 우측에 있는 부가동작도 실행하지 않는다.