|| (논리 OR 연산자) 와 ?? (널 병합 연산자)는 언제 뭘 써야할까?

기본적이지만 가끔 까먹어서 다시 한번 정리해보고자 한다.

결론은 의도에 맞는 연산자를 사용하자! 이다.

 

`useQuery`와 `useSuspenseQuery`의 차이점은 초기값이 보장되는가에 있다.

 

만약 `useQuery`를 사용한다면 `undefined`가 타입에 적용되기에 지금까지 반환되는 `data`에 옵셔널 체이닝(?)이나 널 병합 연산자(??)를 사용했었다.

 

문제 상황은 코드리뷰를 하다가 동료가 `||` 연산자를 `data` 초기값에 넣어주었다. 

const { data } = useSomethingQuery();

const name = data?.name ?? '기본값';

// 또는
const name = data?.name || '기본값';

 

이때, || 연산자를 사용하면 어떤 문제가 있을까?

상황에 따라 다르지만, name이 의도적으로 빈 문자열인 경우가 있을 것이다.

 

|| 연산자를 사용하면, 왼쪽 피연산자 값이 Falsy한 경우 오른쪽 값을 반환한다.

Falsy로 평가되는 값은 false, 0, ''(빈문자열), null, undefined, NaN 이 있다.

 

즉, 의도된 빈 문자열도 기본값으로 들어가게 될 것이다.

 

?? 연산자는 왼쪽 피연산자의 값이 `null`, `undefined`인 경우에만 오른쪽 값을 반환한다.

따라서 다른 Falsy한 값인 0, '', false는 그대로 반환이 된다.

 

이러한 특성을 사용해 초기값을 생각해보자.

?? 연산자가 더 적절한 경우는 값이 0, '', false일 때, 이를 유효한 값으로 사용하려는 경우일 것이다.

 

어떨 때 사용 해야할까?

만약 `useQuery`와 같이 명확히 null과 undefined일 때만 처리를 해주고 싶다면?

?? 연산자가 더욱 안전하고 명확한 표현인 것 같다.

 

|| 연산자는 Falsy 값 전체를 대체하므로 데이터에 따라 예상치 못하게 0이나 ''도 기본값으로 처리할 위험이 있을 것 같다.