[TypeScript] !, ? 연산자

!

표현식 뒤에 !를 붙이면 해당 표현식이 null을 반환하지 않는다고 인식시킨다.

!연산자는 컴파일러에게 표현식은 값이 무조건 할당되어있다고 말해준다.

 

null 이 반환되지 않음을 보장할 수 있으면 쓰면 된다.

document.querySelector('p')!;

 

만약 느낌표가 앞의 표현식이 null 이 반환되지 않을거라는 확신이 없다면 조건문을 쓰는 해결책이 있음

const userInputElement = document.getElementById('user-input');

if(userInputElement){
  (userInputElement as HTMLInputElement).value = 'value';
}

이 상황에서는 형변환은 조건문 안에 넣어주는 것이 맞다

null 검사를 먼저 하고 null이 아니라는 것을 확인한 후에 형변환을 하는 것이 순서상 맞기 때문이다

 

? (optional Chaining , Optional Property)

Optional Property (?)

선택적 속성을 정의할 수 있다.

해당 프로퍼티가 인터페이스를 구현하는 클래스 내에 있을 수 있지만, 반드시 있어야 하는건 아니라고 인식하게 하는 것인데

선택사항으로 만드는 것이다.

그래서 없더라도 오류가 나지 않는다.

interface Named {
  readonly name?: string;
  outputName?: string;
}

프로퍼티 뒤에 ?를 붙이면 된다

 

클래스에서도 사용할 수 있다.

 

Optional Chaining (?.)

Optional Chaining은 null이나 undefined를 처리하는데 사용되는 기법이다.

일반적으로 객체의 프로퍼티에 접근할때 안전하게 접근하게 해주는 구문이다

 

API로 데이터를 받아오고 어떤 이유로 인해, 있을것이라 생각했던 프로퍼티가 없는 상황을 생각해보자.

const fetchedUserData = {
  id: 'id1',
  name: 'Kim'
}

console.log(fetchedUserData.job.title)
// '{ id: string; name: string; }' 형식에 'job' 속성이 없습니다.

fetchedUserData를 위와 같은 형식으로 전달받고, job이 있을거라 생각하고 작성했던 코드가 오류가 나는 상황이다.

 

이럴때, 옵셔널체이닝을 사용하면 유용하다.

?. 의 왼쪽의 값이 null이나 undefined이면 평가를 멈추고 undefined를 바로 반환해준다.

console.log(fetchedUserData?.job?.title)

 

nullish Coalescing ( ?? )

null 병합 연산이다

 

null 데이터 처리에 도움을 준다.

 

어떤 데이터나 입력값이 null이나 undefined 인지, 유효한 데이터인지 알 수 없는 경우를 생각해보자.

그래서 null이나 undefined라면 기본 초기값을 설정해주는 동작을 작성하려 한다

 

일반적으로 아래와 같이 작성해볼수 있다.

const data = userInput || 'Default'

userInput이 falsy라면 Default가 data에 저장될 것이다

문제점이 하나 있는데, 빈문자열도 falsy라서 'Default'가 저장된다

userInput이 빈 문자열일 수도 있는 상황이 가능할 수 있기 때문에 문제가 있다.

 

이런 상황엔 null 병합 연산이 유용하다

null이나 undefined 일때만 처리하고 싶다면 ?? 로 대체하면 된다.

const data = userInput ?? 'Default';