Nullish - 널 병합 연산자란?

널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

라는게 mdn web docs의 이야기!

쉽게 말하면 거짓의 판단을 유연하게 판단하며, 삼항 연산자와 비슷하게 사용할 수 있다.
?? 앞에 자료가 없다면 ?? 뒤에 내용이 출력된다

console.log(age.미성년자 ?? '돌아가' ); //돌아가

언제 어떻게 사용할까

null값을 체크하여 특정 문구를 내보내거나, null 때문에 발생하는 오류들을 없앨때 사용하면 좋다.

value 을 받아와서 화면에 출력하고 싶다, 단순히 null 이여서 표시가 안되어도 된다면 nullish를 사용하지 않아도 되지만, value를 가공하여 화면에 출력하려 할 때 (replace/substring 같은 메서드 사용 시)이 value가 null 이라면 오류가 발생한다.
또는 내가 해야될 부분은 집계된 데이터를 출력하여야 하는데, 사이트 오픈시 집계전이라 이건 0과는 다르게 표시 되어야 하기 때문에 가공이 필요했다.
백엔드쪽에서 가공하여 N/A 값으로 표현하여 주면 좋지만.. 힘없는 우리는 어쩔수없지..

사용 방법

api를 받아 올 때 코드

.then((res) => {
  const resData = res.data;
  // console.log('resData', resData);
  	if (res.retCode === '000') {
      dailyBoxList.value.forEach((topList) => {
        const { contentKey, percentKey, signKey } = topList;
          if (contentKey in resData) {
            topList.content = resData[contentKey];
          }
          if (percentKey in resData) {
            topList.percent = resData[percentKey];
          }
          if (signKey in resData) {
            topList.sign = resData[signKey];
            styleToSign(topList.sign);
          }
        });
      }
    })

해당화면에선 null값을 체크하지 않고, key가 맞으면 value값을 삽입하도록 되어있다.
값이 있을 때 ,

값이 없을 때 화면

이건 쪼옴,,, 곤란하잖아? 테스터님들께서 분명 버그로 잡을것이 분명하다고!ㅠㅠ

그래서 null값을 체크하여 N/A로 내보내기로 했다.
if문을 새로 돌리는 방법도 있지만,, 게으른 나는 그렇게 복잡하게 쓰기 싫어 조금만 추가했다.

.then((res) => {
  const resData = res.data;
  // console.log('resData', resData);
  	if (res.retCode === '000') {
      dailyBoxList.value.forEach((topList) => {
        const { contentKey, percentKey, signKey } = topList;
        if (contentKey in resData) {
          topList.content = resData[contentKey] ?? 'N/A'; //?? 추가
        }
        if (percentKey in resData) {
          topList.percent = resData[percentKey] ?? 'N/A'; //?? 추가
        }
        if (signKey in resData) {
          topList.sign = resData[signKey];
          styleToSign(topList.sign);
        }
       });
      }
    })

수정후 출력된 화면! 매우 간단하죠?

그럼 나는 이제,, 내 화면에서 나오는 null 값을 체크하러 가야겠다..

번외) || 하고 ?? 차이

||는 0, "", false, undefined 같은 false 값을 전부 검사 하는 연산자,
??는 undefined 하고 null 같은 nullish 만 검사하는 연산자

다시한번 보여주지만 0과 null의 차이는 당연히 알겠지?
각인시켜주지.

const a = false || "어떻게";
// a => "어떻게"
const b = false ?? "사람 이름이";
// b => false
const c = undefined ?? null ?? "엄",
// c => "엄"