반응형
아래의 코드
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 };
✅ 평가 순서
- bookmarks.value[menu.name] 을 먼저 확인함.
- 그 값이 falsy (undefined, null, false, 0, '', NaN) 이면 → bookmarks.value[menu.name] = { ...menu, isMarked: false }; 실행
- 최종적으로 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이나 빈 문자열일 수도 있는 상황이면 `??=`를 쓰는 게 안전하다.
반응형
'Developer > TIL' 카테고리의 다른 글
TIL: 20250421월 ~ 20250502금 (0) | 2025.05.01 |
---|---|
TIL : 250428월 (JS문법: slice와 splice 차이/사용 용도) (0) | 2025.04.29 |
TIL : 20250424목 (테이블 헤더 세로 정렬, 오라클 문법 regexp_count, nvl) (0) | 2025.04.24 |
TIL : 250417목 (오늘 한 일) (0) | 2025.04.18 |
TIL : 250416수 (BE 업무 처리 대비 오라클 DB 함수 공부) (0) | 2025.04.16 |
TIL: 20250415화 (백엔드 인수인계 (엔드포인트 트래킹 방법 등), 오라클 함수 outer join, 별칭 지정, nvl) (0) | 2025.04.15 |