JavaScript: ?? vs || 연산자 비교

 

 

?? (Nullish Coaslescling Operator)

동작 방식 

- 왼쪽 값이 null 또는 undefined 일때만 오른 쪽 값 반환 

- 유효한 값 : 0, false, ''(빈 문자열), NaN

0 ?? 9.7        // → 0 (0은 유효한 값)
null ?? 9.7     // → 9.7
undefined ?? 9.7 // → 9.7
false ?? true   // → false (false는 유효한 값)
'' ?? 'default' // → '' (빈 문자열은 유효한 값)

 

|| (Logical OR Operator)

동작 방식

- 왼쪽 값이 falsy일 때 오른쪽 값 반환

- Falsy 값: false, 0, -0, 0n, ''(빈 문자열), null, undefined, NaN

0 || 9.7        // → 9.7 (0은 falsy)
null || 9.7     // → 9.7
undefined || 9.7 // → 9.7
false || true   // → true (false는 falsy)
'' || 'default' // → 'default' (빈 문자열은 falsy)

 

 

 

결론: 언제 어떤 연산자를 사용해야할까?

1. ?? : nul/undeifend만 걸래내고 싶을 때

2. || : 0, false,빈 문자열도 걸러내고 싶을 때

 

---

Falsy 값 요약

 

• ??는 null / undefined 만 “없음”으로 보고 대체값 사용 (숫자 0이나 빈 문자열 ''을 그대로 쓰고 싶으면 ?? 사용)
• ||는 Falsy 값 전부(0, '', false, NaN 등)를 “없음” 취급해서 대체값 사용 (대충 비어 있으면 다 fallback”이면 || 사용)

 

| 값          | 타입       | `??` 결과          | `||` 결과        | Falsy 여부 |
|------------|-----------|------------------|-----------------|------------|
| null       | Null      | fallback         | fallback        | ✅ Falsy    |
| undefined  | Undefined | fallback         | fallback        | ✅ Falsy    |
| 0          | Number    | 0 (유효)          | fallback        | ✅ Falsy    |
| -0         | Number    | -0 (유효)         | fallback        | ✅ Falsy    |
| 0n         | BigInt    | 0n (유효)         | fallback        | ✅ Falsy    |
| NaN        | Number    | NaN (유효)        | fallback        | ✅ Falsy    |
| false      | Boolean   | false (유효)      | fallback        | ✅ Falsy    |
| ''         | String    | '' (유효)         | fallback        | ✅ Falsy    |
| ' '        | String    | ' ' (유효)        | ' ' (유효)       | ❌ Truthy   |
| '0'        | String    | '0' (유효)        | '0' (유효)       | ❌ Truthy   |
| 1          | Number    | 1 (유효)          | 1 (유효)         | ❌ Truthy   |
| true       | Boolean   | true (유효)       | true (유효)      | ❌ Truthy   |
| []         | Object    | [] (유효)         | [] (유효)        | ❌ Truthy   |
| {}         | Object    | {} (유효)         | {} (유효)        | ❌ Truthy   |