✔️ 시작

모.자.딥.다 공부 중 옵셔널 체이닝 연산자 덕분에 유용하게 해결한 적이 있기도 하고
알아부면 이후 TypeError를 방지하기도 좋을 거 같아 가지고 왔다.


📍 옵셔널 체이닝 연산자(optional chaining)

  • 좌항에 ?.을 붙여 준다.
  • ES11에서 도입되었다.
  • a?.b 좌항의 피연산자가 null이거나 undefined인 경우 undefined를 반환하고 아닌 경우 우항의 프로퍼티를 참조한다. (TypeError를 방지하기 위해 도입 되었다.)
let a = null

let value = a?.value
value // undefined

a가 null이거나 undefined인 경우 undefined를 반환하고 아닌 경우 우항의 b를 참조한다.

옵셔널 체이닝 연산자는 객체를 가리키기를 기대하는 변수가 null이거나 undefined인지 확인하고 프로퍼티를 참조할 때 유용하다.

이전 에는 논리 연산자 &&을 사용했다고 한다.

let a = null

let value = a && a.value
result // null

a가 Falsy한 값이면 a로 평가하고 아닌 경우(Truthy) a.value로 평가 된다.

옵셔널 체이닝 연산자는 좌항 피연산자가 false로 평가되는 Falsy한 값(false, undefinde, null, 0, -0, NaN, '')이라도 null이거나 undefined가 아니면 우항의 프로퍼티를 참조 한다.

let str = ''

let length = str?.length
length//0

좌항 피연산자가 false로 평가되는 Falsy 값이라도 null 또는 undefinde가 아니면 우항의 프로퍼티를 참조한다.

이런식으로도 작업할 수 있다.

list?.map((text, idx) => < ItemContainer {...rest}><BodyText key={idx} children={text} /></ItemContainer>)

list가 null이거나 undefined이여도 오류를 발생하지 않는다.

덕분에 에러가 발생하지 않았다.
이후 유용하게 사용할 수 있을 거 같다.


참고

모던 자바스크립트 Deep Dive - 옵셔널 체이닝 연산자
.
.
.
문제 될 시 삭제하겠습니다.

profile
💻 프론트엔드를 목표로 성장 중! (알아봤던 내용 등을 정리하기)

0개의 댓글