?? vs ||, 0이 사라지는 버그의 원인

const score = userScore || "점수 없음";

console.log(null || "기본값");      // "기본값"
console.log(undefined || "기본값"); // "기본값"
console.log(0 || "기본값");         // "기본값" ← 의도하지 않은 동작
console.log("" || "기본값");        // "기본값" ← 의도하지 않은 동작
console.log(false || "기본값");     // "기본값" ← 의도하지 않은 동작

console.log(null ?? "기본값");      // "기본값" ✅
console.log(undefined ?? "기본값"); // "기본값" ✅
console.log(0 ?? "기본값");         // 0        ✅ 그대로 통과
console.log("" ?? "기본값");        // ""       ✅ 그대로 통과
console.log(false ?? "기본값");     // false    ✅ 그대로 통과

const value = a || b ?? c;   // SyntaxError!
const value = (a || b) ?? c; // 괄호를 붙이면 OK

// 사용자가 타임아웃을 0으로 설정할 수 있는 경우
function createTimer(timeout) {
  // ❌ 0을 설정하면 기본값 3000으로 대체됨
  const delay = timeout || 3000;

  // ✅ 0도 유효한 값으로 처리
  const delay = timeout ?? 3000;
}

// 사용자가 설명을 의도적으로 비워둘 수 있는 경우
const description = userInput || "설명이 없습니다"; // ❌ 빈 문자열도 기본값으로
const description = userInput ?? "설명이 없습니다"; // ✅ null/undefined만 기본값으로

const response = await fetchUserSettings();

// ❌ fontSize가 0이면 14로 덮어씌워짐
const fontSize = response.fontSize || 14;

// ✅ 명시적으로 null/undefined인 경우만 기본값 적용
const fontSize = response.fontSize ?? 14;

const user = {
  profile: {
    age: 0, // 0세 사용자 (드물지만 유효한 값)
  },
};

// ❌ age가 0이면 "나이 정보 없음"으로 표시됨
const age = user?.profile?.age || "나이 정보 없음";

// ✅ null/undefined인 경우만 기본값 표시
const age = user?.profile?.age ?? "나이 정보 없음";

const config = {
  theme: "dark",
  language: null,
};

// null/undefined인 경우만 기본값 설정
config.language ??= "ko";    // null이었으니 "ko" 할당
config.theme ??= "light";    // "dark"가 있으니 그대로

console.log(config);
// { theme: "dark", language: "ko" }

config.language = config.language ?? "ko";

// 입력값이 없거나 비어있으면 기본 검색어 사용
const query = searchInput || "전체"; // "" → "전체"로 교체 의도적

// 권한이 없는 사용자에게 기본 역할 부여
const role = userRole || "guest"; // false/undefined/null 모두 "guest"