[JS] 옵셔널 체이닝

전상욱·2021년 5월 22일
2

JavaScript

목록 보기
14/17
post-thumbnail

Optional Chaning (?.) 이란?

  • 프로퍼티가 없는 중첩 객체에서도 에러 없이 안전하게 접근할 수 있는 방법이다.
  • ?.의 앞 대상을 평가하여 undefined 또는 null을 반환하면 평가를 멈추고 undefined를 반환한다.
  • ?.의 앞 대상을 평가하여 undefined 또는 null을 반환하지 않으면 해당 프로퍼티에 정상적으로 접근가능하다.

예시

let user = {};  // 주소 정보가 없는 사용자
alert(user.address.name);
// TypeError: Cannot read property 'address' of undefined
alert(user.address?.name);
// undefined

user라는 빈 객체 생성 후 useraddress의 프로퍼티 내부의 name 을 출력할 때
address가 존재하지 않고, name 또한 존재하지 않는다.
이럴 때 에러를 반환하는데 ?.를 사용하여 프로퍼티 내부로 진입 시 에러 없이 undefined를 반환받을 수 있다.

옵셔널 체이닝을 사용할 때 주의!!

  • ?.는 존재하지 않아도 괜찮은 대상에만 사용해야한다.
  • 위 예시에서 논리상 user는 반드시 있어야 하는데 address는 필수값이 아니다.
  • 실수로 인해 user에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야한다. 그렇지 않으면 에러를 조기에 발견하지 못하고 디버깅이 어려워진다.
  • 변수 user가 선언되어있지 않으면 user?.anything 평가시 에러가 발생한다. (user?.anything을 사용하려면 let이나 const,var를 사용해서 user를 정의해야 한다.
  • 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작한다.

요약

  • Obj?.prop : Obj가 존재하면 Obj.prop을 반환하고, 그렇지 않으면 undefined를 반환
  • Obj?.[prop] : Obj가 존재하면 Obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환
  • Obj?.method() : Obj가 존재하면 Obj.method()을 호출하고, 그렇지 않으면 undefined를 반환
  • ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행한다.
  • ?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다.
  • ?.?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.
profile
더 높은 곳으로

0개의 댓글