TIL. Optional chaining 연산자

코드를 작성하다가 동료가 Optional chaining 연산자에 대해서 알려줬는데, 유용하게 사용할 수 있을 것 같아서 기록해본다~!

Optional chaining 연산자 ?.

Optional chaining 연산자 ?.는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다고 한다.
?.연산자는 .체이닝 연산자와 유사하게 작동하지만 만약 참조가 nullish(null 또는 undefined)라면, 에러가 발생하는 것 대신 표현식의 리턴값은 undefined로 단락된다.

const adventurer = {
  name: 'chloe',
  cat: {
    name: 'joao'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

let nestedProp=obj.first && obj.first.second;

obj.first의 값은 obj.first.second값에 접근하기 전에 null,undefined가 아니라는 점을 검증한다.

let nestedProp=obj.first?.second;

.대신에 ?.연산자를 사용함으로써, 자바스크립트는 obj.first.second에 접근하기 전에 obj.first가 null 또는 undefined가 아니라는 것을 암묵적으로 확인하고 있다.
만약 obj.first가 null 또는 undefined이라면, 그 표현식은 자동으로 단락되어 undefined가 반환된다.

즉 위 코드는 아래와 같다!

let nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.second);

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