[JavaScript] ?. 연산자 - Optional Chaining

객체의 속성값에 접근하기 위해서는 . 연산자를 사용하였다. 하지만 경우에 따라 깊게 접근하면 제일 앞에 객체에서 값을 읽어올수 없을때 undefined 에러가 발생했다. 그럴때마 if문을 통해 경우의 수를 두었는데 같이 진행하는 팀원 "토스 SLASH 2021"에서 본 ?. 연산자를 알려주었고 적용하였다.

?. 연산자란?

• 인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. ?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (en-US) (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다.
• undefined나 null인 경우에 TypeError 대신에 undefined를 얻게 됩니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

적용 경우

• 만약 Redux의 user객체를 사용한 코드를 작성한다고 예를 들겠다. user안의 이름을 알고 싶다.
• 기존에 작성했던 코드라면

if (user!== undefined) {
  console.log(user.login.user.email)

이렇게 undefined 에러(TypeError)가 발생할 수 있는 위치를 생각하면서 단계 단계 조건물을 두었을 것이다. 😓
하지만 ?.을 사용한다면 한줄에 해결이 가능했다.

user?.login?.user?.email