[JavaScript] 옵셔널 체이닝

김정민·2022년 8월 17일
1
post-thumbnail

옵셔널 체이닝 '?.'

?. 은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환하여 객체가 존재하지 않더라도 에러가 발생하지 않는다.

  • ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 계속 진행

  • ?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다.

  • ?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.

  • 꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 이런 상황을 만들지 말도록 한다.

실제 예시

  • 체이닝을 시도할 때 ?. 연산자를 사용하게 되면 해당 객체가 undefined나 null인 경우 TypeError 대신 undefined를 얻게 된다.

  • . 자리에 ?.만 넣어주면 됩니다.

기존 TypeError 대신 undefined가 나오는 모습이다.

추가로 ?. 연산자는 배열이나 함수에서도 사용할 수 있다.
배열에서의 예시

함수에서의 예시

이렇게 만들게 되면 많은 케이스에서 undefined가 발생하게 된다. (즉 이로 인해서 발생할 수 있는 문제가 없을 때에만 사용이 가능하다.)

그렇다면 undefined를 추출하게 될 때 특정한 값을 출력하게 만들고 싶을 수도 있다.

그럴 때 사용할 수 있는게 바로 ??(Nullish coalescing operator) 연산자다.

??는 왼쪽 피연산자가 null이나 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 연산자다.

?.을 이용해서 undefined를 추출하게 되면 특정 값으로 반환하게 해 줄 수 있다.

?? 연산자에 대해서 궁금하다면 아래 포스팅을 참고하면 된다.

[JS] 널 병합 연산자 : Nullish Coalescing Operator(??)
https://ssocoit.tistory.com/216

출처 : https://ssocoit.tistory.com/214 [코딩하는 경제학도]
출처 : https://ko.javascript.info/optional-chaining

0개의 댓글