[TIL] TypeScript 의 물음표 Optional Chaining

TypeScript를 활용하면서 코드에 점점 ?를 많이 쓰게 되고, 또 많아지면서 물음표가 정확히 어떤 작동을 하는지 알아보게 되었다.

export default function sampleFunction(
  data: SampleFunctionFactorTypes,
): { field: string; value: string | undefined }[] {
  return [
    {
      field: '필드1',
      value: data?.sampleField?.name,
    },
    {
      field: '필드2',
      value: SAMPLE_CONSTANT_LIST.find((v) => v.name === data?.sampleField)
        ?.other_name,
    },
  ];
}

field, value에 값을 채운 배열을 리턴해주는 간단한 함수이다.

(?) optional chaining을 알아보기전 속성 접근자를 잠시 알아보자면

. 은 속성 접근자(이하 접근자)로 객체 (혹은 method) 내부 property에 접근하는 용도로 사용해왔었고 참조 시 해당 객체가 유효한 값을 가지고 있지 않다면 에러를 발생 시킨다.

optional chaining을 사용하면 위와 같은 상황에 에러 대신 리턴 값은 undefined로 단락된다. 만일 함수 호출에서 사용될 때, 만약 주어진 함수 존재, 유효하지 않는다면, undefined를 리턴한다.

만일 optional chaing을 사용하지 않는다면

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

nestedProp라는 변수에 특정 객체의 내부 값을 넣어준다면 obj.first가 유효한지 검사 이후 obj.first.second 의 값을 넣어준다

Optional Chaing을 사용한다면

let nestedProp = obj.first?.second;

이전 nested 값이 유효한지 테스트 하는 과정이 줄게 되었다.

Null 병합 연산자와 같이 사용 예

let customerCity = customer.details?.address?.city ?? 'seoul';
console.log(customerCity); 

optional chaining은 중첩해서 사용이 가능하고 해당 값이 null 일 때에 default 값을 줄 수 있다.

기존 조회한 값이 없다면 || 연산자를 사용해서 default 를 지정해 주었으나, || 연산자 보다는 ?? null 병합 연산자를 사용하는것이 옳다. null 병합 연산자는 모든 falsy한 값이 아닌 null / undefined 만 걸러준다. 만일 함수의 인자로 사용하는 경우에는 default 값을 부여해주는것이 옳다.