프로젝트 코드 작성 시,

객체에 해당 키에 대응하는 배열 아이템이 있는지 파악 > 있다면 해당 배열에 새 값 추가 > 없다면 새 값이 들어간 새 배열을 해당 키에 할당

이런 로직을 작성해야 하는 때가 있었다.

const notiPerDays = {}
const dayExpression = { today: '오늘', yesterday: '어제' }
const today = new Date()

notiDataArr.forEach((noti) => {
  const day = noti.created_at.split(' ')[0]
  const relativeDay = formatRelative(new Date(day), today).split(' at')[0]
  **const dayKey = dayExpression[relativeDay]
    ? dayExpression[relativeDay]
    : day**

  const value = notiPerDays[dayKey]
  notiPerDays[dayKey] = value ? [...value, noti] : [noti]
})

해당 코드를 nullish coalescing을 사용하면 더욱 깔끔하게 작성할 수 있다.

const notiPerDays = {}
const dayExpression = { today: '오늘', yesterday: '어제' }
const today = new Date()

notiDataArr.forEach((noti) => {
  const day = noti.created_at.split(' ')[0]
  const relativeDay = formatRelative(new Date(day), today).split(' at')[0]
  **const dayKey = dayExpression[relativeDay] ?? day**

  const value = notiPerDays[dayKey]
  notiPerDays[dayKey] = value ? [...value, noti] : [noti]
})

nullish coalescing이란

왼쪽 피연산자가 null이나 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 연산자이다.

let foo;  // undefined

let someDummyText = foo ?? 'Hello!';  // Hello!

기본적으로 변수에 값을 할당할 때 OR 연산자를 활용해서 작업할 수도 있다.

let foo;  // undefined

let someDummyText = foo || 'Hello!';  // Hello!

왜 OR 연산자를 사용하지 않는 것이 좋으냐면, OR는 왼쪽 피연산자가 falsy한 값이면 모두 다 오른쪽 값을 반환해주기 때문이다. 따라서 만약 ''이나 0, NaN을 유효한 값으로 생각하고 작업했을 때 이를 무시해버리는 문제가 발생할 수 있다.

let count;
let text;

...무슨무슨 작업...

count = 0;
text = "";

...무슨무슨 작업...

let qty = count || 42;
let message = text || "hi!";
console.log(qty);     // 42? 엥 0이 반환됐으면 좋겠는데
console.log(message); // "hi!" 엥 ""이 반환됐으면 좋겠는데

따라서 null과 undefined일 때만 적용할 수 있는 nullish coalescing을 사용하자.

Nullish coalescing operator - JavaScript | MDN