Typescript 물음표(?) 선택적 프로퍼티 / 옵셔널 체이닝 / Null 병합 연산자

타입스크립트에서 물음표를 이용한 문법 3가지가 있습니다.

세 가지에 대해서 정리해보려고 합니다.

 

선택적 속성 Optional Propery -?

type animal {
   name?: string
}

interface person {
   name: string
}

function add(num?: number) {
   return num;
}

속성을 정의할 때 사용할 수 있습니다.

해당 속성의 값이 있어도 되고 없어도 선택적으로 받을 수 있습니다.

 

옵셔널 체이닝(Optional Chaining) -?.

일반적으로 속성접근자(.)를 이용하여 속성의 값을 가져올 수 있습니다..

하지만 속성이 없을 경우에 오류가 발생합니다.

// const name = person.name // if person undefined -> error
// const name = person & persom.name

const name = person?.name

옵셔널 체이닝을 이용하면 person이 undefined인 경우에는 즉시 script 실행을 중지하고 undefined를 반환합니다.

값이 있을 때에만 선택적 접근을 할 수 있습니다.

 

Null 병합 연산자 Nullish Coalescing -??

a ?? b

a가 null이나 undefined 일 경우에 b를 반환합니다.

주로 기본값 설정이나, 조건을 간단하게 검사할 때 사용합니다.

const userName = person ?? name;

 

논리 연산자 (||) 와의 차이점은 falsy의 값은 제외하고 오로지 null과 undefined만 b를 반환합니다.

ex (false, undefined, null, 0, NaN, "")

자바스크립트에서 false 인 값(false, undefined, null, 0, NaN, "")