Js - 옵셔널 체이닝

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

let nameBar = myMap.get("bar") && myMap.get("bar").name;
console.log(nameBar);  // undefined

위의 코드는 myMap이라는 자료구조에서 2가지를 검증하고 데이터를 파싱하는 코드이다.

1. bar 라는 key가 존재하는지 확인한다. nulish면 undefined를 반환한다.
2. bar라는 key가 존재하면, 해당 value에서 name이라는 속성이 있는지 확인한다. nulish면 undefined를 반환한다.

결국 myMap이라는 자료구조에서 name 프로퍼티의 값을 가져오는 코드인데, 이를 위해 상위타입이 nulish인지 여부를 검증을 해야했다. 이 경우에 옵셔널 체이닝(?.)을 사용하면 자동으로 nuslish 체크를 해주면서 코드의 가독성을 높혀줄 수 있다.

옵셔널 체이닝을 적용한 코드는 아래와 같다.

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

let nameBar = myMap.get("bar")?.name;
console.log(nameBar);  // undefined

옵셔널 체이닝과 함께사용하면 좋을 널 병합 연산자(??)도 있다.

nulish 이면, 명시한 값 또는 객체를 할당하는 연산자이다.

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

let nameBar = myMap.get("bar")?.name ?? "unkown";
console.log(nameBar);  // unkown

출처

MDN - 옵셔널 체이닝

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