TypeScript 3.8 optional chaining으로 null 체크 지옥 탈출

문제 상황

재택근무 전환 이후 API 응답 처리 코드를 리팩토링하던 중, 중첩된 null 체크가 너무 많아 가독성이 떨어지는 부분을 발견했다.

// 기존 코드
const userCity = user && user.address && user.address.city;
const displayName = user && user.profile && user.profile.name ? user.profile.name : 'Anonymous';

Optional Chaining 도입

TypeScript 3.8에서 정식 지원하는 optional chaining(?.)을 적용했다.

// 개선된 코드
const userCity = user?.address?.city;
const displayName = user?.profile?.name ?? 'Anonymous';

배열이나 함수 호출에도 적용 가능했다.

const firstItem = items?.[0];
const result = api.fetchData?.();

Nullish Coalescing

|| 연산자 대신 ??를 사용하면 0이나 빈 문자열을 falsy로 취급하지 않는다.

const count = response.count ?? 10; // 0이 와도 0 유지
const message = response.message ?? 'default'; // 빈 문자열이 와도 빈 문자열 유지

주의사항

tsconfig의 target을 ES2015 이상으로 설정해야 하고, 구형 브라우저 지원이 필요하면 Babel 플러그인을 추가해야 한다.

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020"]
  }
}

팀 전체가 재택으로 전환되면서 코드 리뷰가 더 중요해졌는데, 이런 문법 개선이 리뷰 시간을 상당히 단축시켰다.