Optional Chaning - ?? (물음표 두개) 문법

 

오늘 회사에서 ?? 를 쓴 문법을 처음 봐서 검색해봐따.

그 문법 이름은 Optional Chaining 이라고 한다.

 

애초에 회사에서 저 문법을 사용하게 된 계기가 디비에서 값을 불러와서 전역으로 선언하는데

테스트 때 사용하는 로컬 디비에는 그 값이 들어가있지 않아서 

그 값을 사용하는 react 컴포넌트에서 에러가 나서 render가 되지 않아서 문제였다.

 

나는 로컬 디비에 그 값을 넣어주는 것으로 해결을 했었는데

좀 더 스마트 한 방법이 있었던 것이다! 뚜둥

 

보통 아래와 같은 문법으로 객체를 확인했었다.

let user = {}; // 주소 정보가 없는 사용자

alert( user && user.address && user.address.street ); // undefined

 

이제는 아래와 같이 적용하여 에러 없이 원하는 결과물을 얻을 수 있다! 

let user = user.address?.street;

 

형식은 아래와 같이 쓸 수 있다고 한다.

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

 

결과값에 따라 함수를 실행 시킬 수도 있다.

let result = someInterface.customMethod?.();

함수와 함께 사용할때는 위와 같이 함수 이름 뒤에 Optional Chaining을 붙이고 함수를 실행시키면

customMethod라는 함수가 존재하는 경우에만 함수를 실행하고, 존재하지 않으면 undefined를 리턴한다.

 

 

** 결론

회사에서는 저 문법을 이용해서 값이 없을 경우 'None' 을 입력해주어 해결하였다.

깔끔하고 좋군.

 

ex ) let user = {}

ex )  user :  user.address?street[0]?.id ?? 'None'

 

 

---------------------------------------------------------------------------------------------------------

출처 : developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining