TIL : 250418금 (nullish 병합(??)과 단축 평가(||))

아래의 코드

let bookmarkMenu = bookmarks.value[menu.name];
if (!bookmarkMenu) {
  bookmarks.value[menu.name] = { ...menu, isMarked: false };
  bookmarkMenu = bookmarks.value[menu.name];
}

를 한 줄로 합쳐서 간결하게 쓰고 싶다면, nullish 병합(??) 또는 단축 평가(||)를 사용 가능하다.

 

 

✅ 단축 평가 버전 (가장 간단)

let bookmarkMenu = bookmarks.value[menu.name] ||= { ...menu, isMarked: false };

• `||=`는 "값이 falsy일 때만 할당"
• 즉, 기존에 값이 없으면 `{ ...menu, isMarked: false }`를 넣음

 

위 코드의 동작 순서

let bookmarkMenu = bookmarks.value[menu.name] ||= { ...menu, isMarked: false };

 

 

✅ 평가 순서

1. bookmarks.value[menu.name] 을 먼저 확인함.
2. 그 값이 falsy (undefined, null, false, 0, '', NaN) 이면 → bookmarks.value[menu.name] = { ...menu, isMarked: false }; 실행
3. 최종적으로 bookmarkMenu에 그 값을 할당함.

 

✅ 예제

const bookmarks = ref({});
const menu = { name: 'menu1' };

let bookmarkMenu = bookmarks.value[menu.name] ||= { ...menu, isMarked: false };

• `bookmarks.value.menu1`이 `undefined`면 → 새로 객체 만들어서 넣음.
• 이미 값이 있으면 → 기존 값을 그대로 사용.

 

💡 참고: `||=` 는 단축 평가

• `a ||= b` 는 `a = a || b` 와 같은 의미.
• 즉, 좌측이 falsy면 우측으로 할당되는 구조.

 

 

✅ nullish 병합 버전 (값이 null 또는 undefined일 때만)

let bookmarkMenu = (bookmarks.value[menu.name] ??= { ...menu, isMarked: false });

• `??=`는 null 또는 undefined일 때만 할당
• 값이 false, 0, '' 같은 falsy라도 그대로 유지함

 

 

✳️ 정리

	조건	설명
||=	좌변이 falsy한 값일 때	좌변이 false, 0, '', null, undefined, NaN 중 하나일 경우에만 우변 값을 할당
??=	null 또는 undefined일 때만	더 정확하게 "없을 때만" 할당

👉 `bookmarks.value[menu.name]`이 0이나 빈 문자열일 수도 있는 상황이면 `??=`를 쓰는 게 안전하다.