[TIL] Optional chaining

옵셔널체이닝이란?

?. 연산자라고도 불리며 참조값 혹은 기능이 undefined 이나 null 이 될 경우 에러발생이 아닌 undefined 를 return한다.

중첩 구조를 갖는 Object가 있다고 가정해보자. 하지만 뎁스가 깊은 구조라면 하위 속성을 꺼내올 때 꽤 많은 조건을 컴퓨터에게 알려주어야 한다. 아래의 코드를 살펴보자

let user = {
    name : 'yang',
    detail : { age : 31, gender : 'female', hobby : 'eating'}
}

이때, user의 hobby속성을 가져오기 위해서는

let isHobby = 
(user.detail !== null && user.detail.hobby !== null) ? user.detail.hobby : 'Unknown'

혹은

let isHobby = 
(user.detail && user.detail.hobby) ? user.detail.hobby : 'Unknown'

user.detail의 값은 user.detail.info 의 값에 접근하기 이전에 해당 값이 존재한다. 즉, undefined이나 null이 아니라는 점을 검증하기 위한 코드이다. 또한 값이 없을 때(detail이라는 프로퍼티가 없거나, 프로퍼티는 존재하나value값이 없는 경우) 일어날 수 있는 에러를 방지한다.

좋다.. 이렇게 처리할 수 있겠지만, 만약 더 복잡한 데이터 구조라면 ?
끔찍.. 코드는 더 길어질 것이다.

이번에는 optional chaning (?.)을 사용하여 리팩토링 해보자

let isHobby = user.user.detail?.user.detail.hobby ? 
user.user.detail?.user.detail.hobby : 'Unknown'

옵셔널 체이닝의 역할

js의 ?.는 이런 역할을 한다.

• user.detail.hobby 속성에 접근하기 이전에 user.detail의 값이 있는지를 판단한다
• 판단함과 동시에 값이 있으면 user.detail.hobby 까지 접근하여 값을 꺼내온다
• 즉, user.detail이 undefined 또는 null이 아니라는 것을 암묵적으로 판단하고 다음 구문을 실행하는 것이다.
• 만약, undefined 또는 null 이라면 ? 표현식은 undefined를 return한다

조금 더 활용해서, 함수를 제어해보자

const selectedOpt = params => {
      const today = dayjs().toDate()
      state.isOpen = false
      const options = {
        0: () => ({ start: today, end: today }),
        1: () => ({
          start: dayjs().subtract(1, 'day').toDate(),
          end: today,
        }),
        7: () => ({
          start: dayjs().subtract(1, 'week').toDate(),
          end: today,
        }),

        30: () => ({
          start: dayjs().subtract(1, 'month').toDate(),
          end: today,
        }),
      }
      return options[params.optionValueKey]?.()
    }

return 값을 보면 options의 value를 호출하기 위해 화살표 함수의 key값이 null 또는 undefined인지를 체크한 뒤 함수를 호출() 한다.

만약, 인자값 params 안에 options의 key값이 null 또는 undefined라면 undefined을 return 한다.

optional chaining ?.과 유사하게 생겼지만 다르게 쓰이는 nullish coalescing ?? 연산자 역시 ES6문법 중 하나로 유용하게 쓸 수 있다.
널병합연산자 ?? 에 대해서는 다음 포스트에 기록할 예정이다.