옵셔널 체이닝을 남용하지 마세요

이 게시물은 optional chaining과 사용법에 대한 소소한 호언 장담입니다.

모르는 경우 선택적 연결을 사용하면 연결에 존재하지 않는 참조가 표시될 때 반환undefined하여 개체 참조 연결을 줄일 수 있습니다.

한 사람의 국가 이름이 체인에 지정되어 있는 시나리오를 고려하십시오: person.location.address.country.name . 이제 그 사람이 이것의 전체 무리를 지정할 필요가 없다면 어떨까요? 위치는 선택사항이고 주소는 선택사항입니다(현재 국가가 선택사항인 경우). 이제 많은 if 또는 && 🛡 또는 lodash get 🎣로 코드를 보호하거나 직접 오류를 잡아야 합니다 💣.

선택적 연결은 이러한 고통을 이해하고 다음과 같이 단축할 수 있습니다.

const countryName = person.location?.address?.country?.name;

이렇게 하면 오류가 발생하지 않으며 체인이 실패하면 반환됩니다undefined. 또한 TypeScript 🎩와도 작동합니다.

Docs

이것은 분명히 반가운 기능입니다. 저는 이 기능을 많이 사용합니다. 그러나 때때로 우리는 그것이 남용되는 것을 봅니다. 예제 자체에서 과도하게 사용했습니다country?.name.
country가 있지만 name가 없는 시나리오가 있습니까? 이름 없는 나라?

없는 경우 다음과 같이 작성해야 합니다.

const countryName = person.location?.address?.country.name;

오류가 있을 수 있고 국가 이름이 없는 경우에 오류를 건너뛰는 것은 사실입니다. 하지만 그렇다면 불가피한 일을 지연시키는 것일 수도 있습니다.

const coordinates = location?.coordinates;

// eternities later
plotMap(coordinates);

위치에 좌표가 있어야 하는 경우 여기에서 수행하는 작업은 오류의 영향을 원점에서 멀리 이동하는 것입니다.

Sentry(오류 추적 시스템)에서 centerMap 함수에 오류가 있다고 말하면 코드에 문제가 있음을 파악하기 위해 뿌리까지 역추적해야 합니다. 그렇지 않으면 coordindates 의 undefined 를 얻을 수 없다고 직접적으로 말했을 것입니다.



오류가 발생하지 않으면 UI가 여전히 엉망이 될 것이며 원인을 보지 않고 단지 그것의 효과는 다른 곳에서.

즉, TypeScript 또는 선택적 연결을 책임감 있게 사용합니다.