JS Optional Chaining

Optional Chaining이란

Optional Chaining이란? 객체 값을 참조할 때 유효하지 않은 값을 참조하는 경우에 대한 처리를 단순하게 표현하기 위한 문법이다.

문법

일단 문법을 먼저 보면 다음과 같은 구조를 가진다.
?. 부분이 optional chaining 으로 객체가 undefined혹은 null인 경우 에러 대신 undefined를 리턴한다.

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

일반적인 객체 뿐만 아니라 배열이나 함수를 참조할 때도 유효성을 체크할 수 있다.

사용 용도

만약 optional chaining 문법을 사용하지 않는다면 어떻게 처리해야 할까?

여러 방법이 있겠지만 간단하게는 다음과 같을 것이다.

obj && obj.prop

그렇게 복잡한 것 같지는 않지만 다음과 같이 object의 중첩이 있다면 좀 더 효율적이다.

obj && obj.prop1 && obj.prop1.prop2 // without optional chaining

obj?.prop1?.prop2 // with optional chaining

주의할 점

해당 문법은 ES2020에 추가된 문법으로 대부분 최신 브라우저에서는 지원하지만 IE에서는 지원하지 않는다. 따라서 IE나 이전 버전 브라우저에서의 적용이 필요하면 babel을 통한 트랜스파일링이 필요하다.