Nullish 병합 — ?? 연산자의 정체

이 토픽을 마치면

??와 ||의 차이를 이해하고, 기본값을 설정할 때 어떤 걸 써야 하는지 판단할 수 있게 됩니다.

|| 로 기본값 설정하기

javascript

const port = config.port || 3000;

config.port가 falsy이면 3000을 씁니다. 흔한 패턴입니다. 하지만 함정이 있습니다.

javascript

const config = { port: 0, debug: false, name: "" };

const port = config.port || 3000;     // 3000 — 0은 falsy
const debug = config.debug || true;   // true — false는 falsy
const name = config.name || "default"; // "default" — ""는 falsy

0, false, ""는 정상적인 값인데, ||는 이것들을 모두 falsy로 취급해서 기본값으로 덮어씁니다. 포트를 0으로 설정했는데 3000이 되고, 디버그를 끄려고 false를 넣었는데 true가 됩니다.

?? 는 null과 undefined만 체크합니다

javascript

const port = config.port ?? 3000;     // 0 — 유지
const debug = config.debug ?? true;   // false — 유지
const name = config.name ?? "default"; // "" — 유지

?? (nullish 병합 연산자)는 왼쪽 값이 null 또는 undefined일 때만 오른쪽 값을 사용합니다. 0, false, ""는 유효한 값으로 취급합니다.

text

||  → falsy 체크   (0, "", false, null, undefined, NaN)
??  → nullish 체크  (null, undefined만)

실무에서의 차이

API 응답에서 기본값을 설정하는 상황을 보겠습니다:

javascript

const response = { total: 0, items: [], message: "" };

// ||를 쓰면
const total = response.total || "N/A";   // "N/A" — 0을 무시
const msg = response.message || "없음";    // "없음" — 빈 문자열 무시

// ??를 쓰면
const total = response.total ?? "N/A";    // 0 — 정확
const msg = response.message ?? "없음";    // "" — 정확

함수 파라미터의 기본값에서도 같은 문제가 생깁니다:

javascript

function createUser(name, age) {
  const userAge = age || 25;   // age가 0이면? 25가 됨
  const userAge2 = age ?? 25;  // age가 0이면? 0 유지
}

??와 ||를 섞어 쓸 수 없습니다

javascript

// SyntaxError
const value = a || b ?? c;

??와 ||(또는 &&)를 괄호 없이 섞으면 문법 에러입니다. 우선순위가 애매하기 때문에 JavaScript가 명시적으로 금지했습니다. 괄호를 쳐야 합니다:

javascript

const value = (a || b) ?? c;

선택 기준

간단합니다:

값이 "없을 때" 기본값을 주고 싶다 → ??
값이 "비어있을 때" 기본값을 주고 싶다 → ||

"없다"와 "비어있다"는 다릅니다. 0은 비어있지만 존재하는 값입니다. null은 진짜 없는 겁니다.

대부분의 경우 ??가 의도에 더 정확합니다. ||는 0과 ""를 진짜로 기본값으로 대체하고 싶을 때만 쓰세요.

핵심

??는 null과 undefined일 때만 기본값을 적용합니다. ||는 모든 falsy 값(0, false, "")에 기본값을 적용합니다. "값이 없을 때" 기본값을 설정하려면 ??가 정확합니다.