JS를 공부하면서, 와 이 문법은 정말 좋다- 하고 느꼈던 옵셔널 체이닝에 대해 알아보고자 한다.

옵셔널 체이닝 '?.'

우리는 개발하면서 흔히 이런 상황에 많이 직면하곤 한다.

const order = {}
const product_option = order.product.product_option; // TypeError: Cannot read property 'product_name' of undefined

그리고 이런 경우에 단순하게는 이런식으로 처리를 하게 된다.

...
if (order && order.product && order.product.product_option) {
  product_name = order.product.product_option;
}

이렇게 AND 연결해서 사용하게 되면 코드가 너무 길어진다는 단점이 있다.

옵셔널 체이닝을 사용하면 이런식으로 프로퍼티에 접근할 수 있다.

const order = {}
const product_option = order?.product?.product_option; // undefined

옵셔널 체이닝은 '?.' 앞의 평가 대상이 undefined 또는 null 이면 평가를 멈추고 undefined를 반환한다.

편하다고 마구 남용하는 것은 금지

'?.' 는 존재하지 않아도 괜찮은, 다시 말해서 옵셔널 프로퍼티 값에만 사용하여야 한다.
논리적으로 존재하여야 하는 값까지 옵셔널 체이닝을 사용하게 되면 추후 디버깅이 어려워 질 수 있다.

?.() 와 ?.[]

이 문법은 함수 또는 객체 프로퍼티를 호출할 때에도 사용이 가능하다.

const user_1 = {
  sayHi() {
    console.log('Hi!');
  }
}
const user_2 = {}
user_1.sayHi?.(); // Hi!
user_2.sayHi?.(); // 에러가 발생하지 않음.

const user_1 = {
  name: 'John'
}
const user_2 = {}
console.log(user_1?.['name']); // John
console.log(user_2?.['name']); // 에러가 발생하지 않음.

'?.' 는 할당 연산자 왼쪽에서는 사용이 불가능.

const user = {}
user?.name = 'John' // SyntaxError