[ES] optional chaining

이번 포스팅은 optional chaining이라는 연산자를 다뤄본다.

?.  <- 이렇게 표시되는 연산자인데... 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. ?. 연산자는 . 연산자와 유사하게 작동하지만~ 만약 참조가 nullish라면 에러가 발생하는 것 대신 표현식의 리턴값은 undefined로 단락된다. 함수 호출에서 사용될 때 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다.

참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 잛고 간단한 표현식이 생성된다. 어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다.

 

mdn의 데모 expression이 이해가 쉽게 나와 캡쳐해본다.

adventurer라는 object가 있고  name과 cat(object) 프로퍼티가 있다.  dogname에 chaining을 사용해 dog?.name으로 표현식을 써주니 output이 undefined라고 뜬다. 만약 dog.name이었다면 에러가 발생했을 것이다.

아래 함수 체이닝 도 마찬가지이다. 선언되지 않은 함수를 optional chaining을 이용함으로 인해 에러가 아닌 undefined가 발생했다.

 

자 다시 한번 정리 해보자. 기본적으로

이런 구문에서는 prop에 profile이 없으니 undefined로 뜬다.

여기에 정의되지 않은 prop의 value를 출력하도록 했으니 에러가 발생한다.

?. 구문을 쓰지 않고 해결하는 방법은

&&연산자를 활용해 lee.profile이 있으면 오른쪽 구문을 실행하게 해주면 해결이된다. 단점은 코드가 길어진다는 것이다.

만약 api를 통해 데이터를 가져오는데 object가 매우 방대하다면? 코드가 정말 길어질 수 있다.

 

이때 ?.를 활용하면 코드가 매우 간결해진다.

요로코롬~ 아무리 많은 prop들을 적어도 설령 중간에 값이 없든 어느 한곳에 없더라도 undefined로 뜨게 된다.

위코드를 풀어쓰면 lee.profile && lee.profile.email && lee.profile.email.created &&.....

매우 길다.

 

유용하다~

 

es6,7,8 을 배우며 한가지 주의할 점은 ~ 어떤브라우저에 적용이 안되는지 확인해야할것!!