[JavaScript] ?, !

자바스크립트에서 객체의 값을 사용할 때 객체가 존재하는지 확인하는 경우가 있다. 

const data = axios.get(~);

const list = data && data.list;

async await을 사용하는 방법도 분명 존재하지만 React Query를 사용하는 경우 isSuccess 가 되기 전까지 

data는 null이 된다. 

 

React Query를 갑자기 꺼냈는데, 간단하게 async await을 사용하지 않는 경우를 말한 것이다. 

 

&&를 쓰는 행위 자체가 문제가 되지 않지만 이것을 더 간단하게 처리해줄 수 있다. 

 

? 옵셔널 체이닝

옵셔널 체이닝은 중첩된 객체의 속성이 존재하는가에 대한 조건을 간단하게 처리할 수 있다. 

const data = axios.get(~);

const list = data?.list;

? 를 사용하면 객체가 없다면 undefined를 출력한다. 

 

! 논-널 어서션 연산자

이것은 타입스크립트에서만 사용되는 것이고 옵셔널 체이닝과 완전히 다른 기능이지만 

비슷한 객체 관련 이야기를 하니깐 같이 정리한다. 

 

컴파일 옵션으로 --strickNullChecks를 지정해서 컴파일하면, 타입스크립트는 일반적으로 null인 가능성이 있는 객체에 대한 접근을 에러로 취급한다. 

 

이때 null이 아님을 나타내고 싶다면 논-널 어서션 ( Non-Null Assertion )이라는 기능을 사용해 명시적으로 문제가 없음을 전달할 수 있다. 

function getName(user? : User) {
  return user!.name;
}

사용 방법은 옵셔널 체이닝과 비슷하다. 

이때 주의할 점은 논-널 어서션은 에러를 발생시키지 않는다고 컴파일러에게 알려줄 뿐 실행시 에러가 발생할 수 있다. 

 

즉, null인 user를 User 타입으로 변경시키진 않는다.