모.자.딥.다 공부 중 옵셔널 체이닝 연산자 덕분에 유용하게 해결한 적이 있기도 하고
알아부면 이후 TypeError를 방지하기도 좋을 거 같아 가지고 왔다.
?.
을 붙여 준다.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 - 옵셔널 체이닝 연산자
.
.
.
문제 될 시 삭제하겠습니다.