등장 배경

• 존재하지 않는 요소에 접근할 때 오류가 발생함
  • e.g. 주소 정보가 없는 사용자가 있을 때 user.address 접근 → TypeError 발생
• && 연산자의 사용
  • e.g. user && user.address && user.address.street
  • 중첩 객체의 특정 요소에 접근하기 위해 거쳐야 할 구성 요소들을 &&로 연결해 실제 해당 객체나 요소가 있는지 확인 → 코드가 길어진다는 단점

옵셔널 체이닝

• e.g. user?.address?.street
• ?.을 체인을 만들어 사용하면 중첩 요소들에 안전하게 접근 가능
• 요소가 undefined나 null이면 undefined 반환 후 평가 종료

옵셔널 체이닝 주의 사항

• ?. 앞의 대상만 평가하며 평가 종료 후 뒤의 동작은 작동X

• 논리상 존재하지 않아도 괜찮은 대상에만 선택적으로 사용

  • user?.address.street (X)
    • user가 존재하면 user.address 반드시 존재해야함 → 아닐 시 SyntaxError 발생
  • user.address?.street (O)

• 선언이 완료된 변수를 대상으로만 동작 → 아닐 시 ReferenceError 발생

• 참고