Optional chaining (?.)에 대해서

ES 2020에서 새로운 자바스크립트 문법을 지원하게 되었다.

Optional chaining은 다음과 같이 작성할 수 있다.

const a = {};
const b = a?.name; // a && a.name

위의 예제처럼 사용할 수 있는데, b의 값은 물론 undefined이다.

하지만, 위의 예제로는 이 문법의 유용함을 알리기에 조금 무리가 있다.

 

React에서 자바스크립트를 사용할 때 유용하게 사용할 수 있었는데, props로 받은 객체 데이터에 어떤 데이터는 있을 수도 있고 없을 수도 있다.

이럴 때 만약 객체 내부에 있을 수도 있고 없을 수도 있는 데이터가 객체이고, 그 객체의 데이터 내부의 프로퍼티에 접근할 일이 있을 수 있다.

이때 별도로 조건문을 설정하지 않으면, 존재하지 않는 객체 (undefined)의 프로퍼티를 찾는 꼴이 되어 에러를 발생시킨다.

이럴 때 Optional chaining을 사용하면, 간단하게 이 문제를 해결할 수 있다.

 

const Post = ({data}) => {
	return (
    	<div>
        	<h1>{data.title}</h1>
            <img src={data.image} alt={data.alt} />
            <h3>{data.content}</h3>
            <h4>{data?.options?.comments?.length}</h4>
        </div>
    )
}

다소 억지스러운 데이터일 수도 있지만, data 내부에 options는 필수 데이터가 아니고, 그 객체의 프로퍼티인 comments 배열 역시 그렇다.

이때, ?를 붙여줌으로써, 이 프로퍼티의 값이 유효한지 확인하고 유효하지 않다면 뒤의 체인된 메서드를 실행하지 않고 undefined를 반환하기에 이 컴포넌트는 data props내부에 options객체가 있던 없던 언제나 제대로 작동한다.