프로젝트 코드 작성 시,
객체에 해당 키에 대응하는 배열 아이템이 있는지 파악 > 있다면 해당 배열에 새 값 추가 > 없다면 새 값이 들어간 새 배열을 해당 키에 할당
이런 로직을 작성해야 하는 때가 있었다.
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을 사용하자.