JavaScript optional chaining

본 글은 A surprising feature of JavaScript optional chaining 을 번역한 글 입니다. 오역이 있을 수 있습니다.

2020년, JavaScript는 optional chaining 이라는 새로운 기능이 생겼습니다. 이 기능은 여러가지 해결책과 표준화된 방법으로 그 동안 직면했던 문제를 해결했습니다.

💻 Optional chaining 으로 해결한 문제

아래와 같은 객체가 있습니다:

const object = {
  greet: "hai",
  deepProp: {
    greet: "hello",
    deeperProp: {
      greet: "ohai",
    }
  }
}

API나 데이터베이스에서 읽어온 JSON이거나 프론트엔드에서 만든 객체 일수 있습니다.

만약 object, deepProp, deeperProp이 정의되지 않았다(undifined)라면 세번째 greet 에는 어떻게 접근할 수 있을까요?

JavaScript의 &&구문(evaluation semantics) 를 이용할 수 있으며, 표현식에서 마지막 값이 반환 됩니다.

const greeting = 
      object &&
      object.deepProp &&
      objet.deepProp.deeperProp &&
      object.deepProp.deeperProp.greet

이 방법은 작성하기가 어렵고, 오류를 범할 가능성이 높으며, 처음 시작하는 사람에게 혼란을 줄 수 있습니다.

조건문을 사용하는 것이 작성하는데 명확합니다.

let greeting = undefined
if (object) {
  if (object.deepProp) {
    if (object.deepProp.deeperProp) {
      greeting = object.deepProp.deeperProp.greet
    }
  }
}

조금더 명확해졌지만, 장황해졌으며 실제 코드에서 위와 같이 작성하는 사람은 없습니다. 할당을 위해 조건문을 사용하는 것이 어색하기도 합니다.

흔하게 사용되는 다른 접근법은 Lodash 와 같은 라이브러리를 사용하는 것입니다.

const greeting = _.get(object. "deepProp.deeperProp.greet")

필요성을 느끼지 못해 개인적으로는 좋아하지 않습니다.

💻 Optional chaining 의 사용

Optional chaining 을 사용하면, 위 작업을 기본적으로 수행할 수 있습니다.

const greeting = object?.deepProp?.deeperProp?.greet

이것은 무엇이든 연결(chaining) 할 수 있기 때문에 중요합니다.

함수 호출:

object?.deepProp?.function?.(args)

배열 접근:

object?.deepProp?.deepArray?.[5]

표현식:

object?.deepProp?.[console.log("runs if deepProp defined")]