자바스크립트에서 ??(Nullish Coalescing) vs ||(Logical OR) 차이점

1. ??(Nullish Coalescing) 연산자

: ?? 연산자는 null 또는 undefined 인 경우에만 오른쪽 값을 사용

console.log(null ?? "대체값"); // "대체값"
console.log(undefined ?? "대체값"); // "대체값"
console.log(0 ?? "대체값"); // 0 (대체값 적용 안 됨)
console.log("" ?? "대체값"); // "" (대체값 적용 안 됨)
console.log(false ?? "대체값"); // false (대체값 적용 안 됨)

• null 또는 undefined 만 체크
• 0, false, "" 같은 Falsy 값들은 그대로 유지
• "값이 없는 경우"만 기본값을 적용하고 싶을 때 적합

2. ||(Logical OR) 연산자

: || 연산자는 Falsy한 값(예: 0, "", false, null, undefined)이 왼쪽에 있으면 오른쪽 값을 사용

console.log(null || "대체값"); // "대체값"
console.log(undefined || "대체값"); // "대체값"
console.log(0 || "대체값"); // "대체값" (⚠️ 0도 대체값으로 변경됨)
console.log("" || "대체값"); // "대체값" (⚠️ 빈 문자열도 대체값으로 변경됨)
console.log(false || "대체값"); // "대체값" (⚠️ false도 변경됨)

• null 또는 undefined뿐만 아니라 Falsy 값(0, "", false)도 기본값으로 대체
• "값이 비어있다고 판단되는 경우" 기본값을 적용하고 싶을 때 적합

정리

• 즉,
  - 값이 아예 null 또는 undefined일 때만 대체값을 적용하고 싶을 때 => ??사용
  - 0, "", false 같은 값도 모두 대체값으로 바꾸고 싶다면 => || 사용