Optional chaining 이란?

ES2020에 나온 최신 문법이며, 기존의 && 연산자를 쓰면서 길어졌던 코드를 더욱 간결하게 사용하는 연산자이다.

가장 처음에 사용했던 방식은 삼항 연산자 방식을 사용했다. 만약 데이터가 동기적으로 받아와야하는 경우라면, 데이터가 오기 전에 페이지를 렌더링을 해주고 있기 때문에(async ... await 와 같은 비동기 처리를 하지 않는 이상) 삼항 연산자를 사용하여 데이터가 있을 때, 없을 때를 모두 적어주어야 했다.

예제코드 1

// Users 라는 가상의 객체 형식의 외부 데이터가 있고, 그 데이터를 보여주기 위한 상황이라고 가정하자.
Users ? Users.name : undefined

매번 undefined 를 적어줘야하니 불편하다.
그 다음으로 발전한 방식이 && 연산자 이다.

예제코드 2

Users && Users.name

&& 연산자의 경우 데이터가 없을 경우 자동으로 undefined 를 반환해준다. 데이터가 없을 경우 따로 빈 div 쓸 필요가 없으면 else 부분도 쓸 필요가 없으므로 편리해졌다.

예제코드 3

Users?.name

그러나 이것조차도 불편하다고 느꼈는지 optional chaining 이라는 문법이 나타났다. ?. 연산자 앞 객체의 참조가 undefined 라면 undefined를 리턴하고, null 이라면 null을 리턴해준다. 위의 기능들과 똑같지만 한결 더 간결해지고 가독성이 좋아진 것이다.

물론 함수의 호출에 대해서도 optional chaining 을 사용할 수 있다. 만약 메서드가 없는 경우라면 undefined 를 리턴한다.

---

참조문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining