[ES2020] ?. 연산자 - Optional Chaining

optional chaining을 지원하기 위해서 ES2020에서 추가된 문법인 ?. 연산자에 대해서 알아보도록 하겠습니다.

. 연산자를 통한 속성값 접근의 문제점

그동안 자바스크립트에서는 주로 . 연산자(chaining)를 사용해서 객체의 속성값에 접근했었습니다.

간단한 예로, user 객체의 name 속성의 first 속성값은 다음과 같이 접근할 수 있습니다.

> user = {name: {first: "John", last: "Doe"}}
> user.name.first
'John'

하지만 이렇게 여러 단계로 이루어진 객체를 탐색할 때는 항상 TypeError가 발생할 확률이 생깁니다.

> user.address.street
Uncaught TypeError: Cannot read property 'street' of undefined

이를 방지하기 위해서 일반적으로 다음과 같은 방어 로직을 넣게 되는데 보시다시피 코드가 지저분하게 됩니다.

> user.address && user.address.street
undefined

그래서 기존에는 lodash와 같은 유틸리티 라이브러리를 이용하여 이 문제를 해결했었습니다. 😝

import { get } from "lodash";

get(user, "address.street");

?. 연산자를 통한 안전한 속성값 접근

?. 연산자를 사용하면 지저분한 방어 로직이나 유틸리티 라이브러리 없이 안전하고 깔끔하게 속성값에 접근할 수 있습니다.

객체의 속성을 접근할 때 . 연산자 대신에 ?. 연산자를 사용하면, 해당 객체가 nullish 즉, undefined나 null인 경우에 TypeError 대신에 undefined를 얻게 됩니다.

> user?.name?.first
'John'
> user?.address?.street
undefined

?. 연산자는 배열이나 함수에서도 사용할 수 있습니다.

> arr = null;
> arr?.[0]
undefined

> func = undefined
> func?.()
undefined

?? 연산자와 함께 사용하기

?. 연산자는 ES2020에서 함께 도입된 ?? 연산자와 함께 사용하면 더욱 시너지를 발휘합니다. nullish coalescing을 위해 사용되는 ?? 연산자에 대한 내용은 관련 포스팅를 참고 바랍니다.

> user?.country ?? "Korea"
'Korea'

마치면서

2020년 현재 대부분의 최신 브라우저는 optional chaining을 지원하기 때문에 ?. 연산자를 사용할 수 있습니다. Node.js의 경우 버전 14부터 지원하며, 그 이전 버전에서는 Babel과 같은 트랜스파일러(transfiler)를 통해서 접해볼 수 있습니다.

optional chaining에 대한 좀 더 자세한 내용은 관련 MDN 공식 문서를 참고바라겠습니다.