선택적 연결 연산자

선택적 연결 연산자?.는 ES2020에 도입된 새로운 Javascript 언어 기능입니다. 체인의 각 참조가 유효한지 명시적으로 확인하지 않고도 중첩된 개체 속성에 액세스할 수 있는 방법을 제공합니다.
?. 연산자는 참조가 . 또는 null 인 경우 오류를 발생시키는 대신 undefined 값을 반환한다는 점을 제외하면 undefined 연결 연산자와 유사하게 작동합니다. 함수 호출과 함께 사용할 때 주어진 함수가 존재하지 않으면 undefined를 반환합니다.

예를 들어:

const obj = {
  prop1: {
    prop2: {
      prop3: "value"
    }
  }
};

존재하지 않는 위 개체의 속성에 액세스하려고 시도하면 obj.prop2.prop3 다음 오류가 발생합니다.
Uncaught TypeError: Cannot read property 'prop3' of undefined
일반적으로 논리 연산자와 삼항 표현식을 결합하여 잠재적으로 속성이 누락된 경우를 처리할 수 있습니다.

const myProp3 = obj.prop2 && obj.prop2.prop3 ? obj.prop2.prop3 : undefined;

이 자세한 구문은 myProp3 값을 undefined 에 자동으로 할당하는 선택적 연결 연산자를 대신 사용하여 작성할 수 있습니다.

const myProp3 = obj.prop2?.prop3; //undefined

더 깊이 중첩된 객체를 처리하기 위해 동일한 명령문에서 선택적 연결 연산자를 여러 번 사용하여 속성 액세스를 안전하게 수용할 수 있습니다.
let temp = obj.first?.second?.third?.value;
또한 함수가 존재하는지 확인하기 위해 함수 호출과 함께 사용할 수 있으며, 존재하지 않으면 반환합니다undefined.
let data = obj.someMethod?.(someArgument); //undefined
배열과 함께 사용할 수도 있습니다.

const arr = [5,6,7,8];

arr?.[10] // undefined

지도 데이터 구조:

let myMap = new Map();
myMap.set("foo", {name: "baz", desc: "inga"});

let nameBar = myMap.get("bar")?.name;

마지막으로 nullish 병합 연산자??를 사용하여 다음을 수행합니다.

const myCar = {
  make: "Ford",
  details: { year: 1982 }
};
const customerCar = myCar?.make ?? "Unknown Car";
console.log(customerCity); // Unknown Car