Fusión nullish: la naturaleza del operador ??

Al finalizar este tema

Entenderás la diferencia entre ?? y ||, y podrás determinar cuál usar al establecer valores predeterminados.

Establecer valores predeterminados con ||

const port = config.port || 3000;

Si config.port es falsy, se escribe 3000. Es un patrón común, pero tiene una trampa.

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

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

0, false y "" son valores válidos, pero || los trata como falsos (falsy) y los sobrescribe con los valores predeterminados. Si se establece el puerto en 0, cambia a 3000, y si se intenta desactivar el modo de depuración con false, cambia a true.

?? solo comprueba si son null o undefined.

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

?? (operador de fusión nula) utiliza el valor de la derecha solo cuando el valor de la izquierda es null o undefined. 0, false y "" se consideran valores válidos.

||  → comprueba valores falsy   (0, "", false, null, undefined, NaN)
??  → comprueba valores nullish  (solo null y undefined)

Diferencias en la práctica

Consideremos un caso en el que se configuran valores predeterminados en la respuesta de una API:

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

// Con ||
const total = response.total || "N/A";   // "N/A" — ignora 0
const msg = response.message || "Ninguno"; // "Ninguno" — ignora la cadena vacía

// Con ??
const total = response.total ?? "N/A";    // 0 — correcto
const msg = response.message ?? "Ninguno"; // "" — correcto

El mismo problema ocurre con los valores predeterminados de los parámetros de la función:

function createUser(name, age) {
  const userAge = age || 25;   // ¿Si age es 0? Se convierte en 25
  const userAge2 = age ?? 25;  // ¿Si age es 0? Conserva 0
}

No se pueden usar ?? y || juntos.

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

?? y || (o &&) mezclados sin paréntesis generan un error de sintaxis. Debido a que la precedencia es ambigua, JavaScript lo prohíbe explícitamente. Debe usar paréntesis:

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

Criterios de selección

Es sencillo:

• Si quieres asignar un valor predeterminado cuando el valor es "nulo" → ??
• Si quieres asignar un valor predeterminado cuando el valor está "vacío" → ||

"No existir" y "estar vacío" son diferentes. 0 es un valor que está vacío, pero existe. null es cuando realmente no existe.

En la mayoría de los casos, ?? se ajusta mejor a la intención. Usa || solo cuando quieras reemplazar verdaderamente 0 y "" con un valor predeterminado.

Concepto clave

?? aplica el valor predeterminado solo cuando null y undefined. || aplica el valor predeterminado a todos los valores falsy (0, false, ""). Para establecer un valor predeterminado cuando "no hay valor", ?? es la opción correcta.