[JavaScript] Null, Undefined 핸들링: Optional Chaining 연산자

Optional Chaining 연산자 (?.)  ES11 (ECMAScript 2020)

객체의 Property에 접근하거나 함수를 호출했을 때

undefined 또는 null인 경우

에러를 던지는 대신, undefined를 반환한다. 

즉, nullish값 (null 또는 undefined) 으로 인해 에러가 발생하는 것을 간단한 표현으로 처리할 수 있다.

 

왜 Optional Chaining을 사용할까?

예를 들어 adventurer 객체 안에 중첩된(nested) cat 객체가 있는 아래의 코드를 보자.

nullish 값을 체크하면서(null 또는 undefined인 경우 에러가 발생하기 때문)

adventurer 객체에 중첩된 'cat 객체의 name'을 가져오려면 어떻게 할 수 있을까?

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

1️⃣ 아래와 같이 && 연산을 이용해 cat이 null 또는 undefined인지 체크하고, cat.name을 가져오는 방법

 

const catName = adventurer && adventurer.cat && adventurer.cat.name;

2️⃣ Optional Chaining 이용 

const catName = adventurer?.cat?.name;

위 두가지 방법을 비교해보면 Optional Chaining이 왜 쓰이는지 알 수 있다.

매우 짧고, 간단하게 Chaining을 통해 null 또는 undefined에 대한 핸들링이 가능하다!

특히, 객체에 어떤 property가 요구되는지, 존재하는지에 대해  guarantee 되어있지 않은 경우(null 또는 undefined 가능성이 있는 경우) 해당 property에 접근할 때 유용하게 사용할 수 있다.

---

Syntax

obj.val?.prop
obj.val?.[expr]
obj.func?.(args)

 

 

 

참고 출처: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining