Lección 39: Nullish Coalescing (??)

🧠 Concepto

El nullish coalescing operator (??) es un operador lógico que retorna el operando de la derecha cuando el de la izquierda es null o undefined, y el de la izquierda en caso contrario.

const resultado = valor ?? 'valor por defecto';

Diferencia con || (OR lógico)

El operador || trata como “falsy” todos estos valores: false, 0, '' (string vacío), NaN, null, undefined.

El operador ?? solo trata como “nullish” a null y undefined.

// Con || (OR)
console.log(0 || 'default');           // "default"  (0 es falsy)
console.log('' || 'default');          // "default"  ('' es falsy)
console.log(false || 'default');       // "default"  (false es falsy)

// Con ?? (Nullish Coalescing)
console.log(0 ?? 'default');           // 0  (0 no es null/undefined)
console.log('' ?? 'default');          // '' ('' no es null/undefined)
console.log(false ?? 'default');       // false (false no es null/undefined)

// Ambos se comportan igual con null/undefined
console.log(null ?? 'default');        // "default"
console.log(undefined ?? 'default');   // "default"

💻 Ejemplo

// Caso práctico: valores que pueden ser 0 o vacío
function mostrarStock(cantidad) {
  return cantidad ?? 'No disponible';
}

console.log(mostrarStock(5));     // 5
console.log(mostrarStock(0));     // 0  (correcto, hay 0 en stock)
console.log(mostrarStock(null));  // "No disponible"
console.log(mostrarStock());      // "No disponible"

// Con || daría "No disponible" para 0 (incorrecto)
function mostrarStockMal(cantidad) {
  return cantidad || 'No disponible';
}
console.log(mostrarStockMal(0));  // "No disponible" (incorrecto!)

// Otro ejemplo: contador
function incrementar(contador) {
  return (contador ?? 0) + 1;
}
console.log(incrementar(0));    // 1
console.log(incrementar(null)); // 1
console.log(incrementar(5));    // 6

⚠️ Nota

No se puede combinar ?? directamente con && o || sin paréntesis. JavaScript lanza un SyntaxError:

// Esto da error:
// const x = a && b ?? c; // SyntaxError
// const y = a || b ?? c; // SyntaxError

// Debes usar paréntesis:
const x = (a && b) ?? c;
const y = a || (b ?? c);

La razón es ambigüedad: ?? tiene menor precedencia que || y &&, pero la especificación prohíbe la combinación sin paréntesis para evitar confusiones.

🎯 Tip

Usa ?? en lugar de || cuando el valor 0, '' o false sean valores válidos y significativos. El patrón más común es combinarlo con optional chaining:

const config = {
  tema: 'oscuro',
  fontSize: 0
};

const tema = config?.tema ?? 'claro';       // "oscuro"
const fontSize = config?.fontSize ?? 16;    // 0 (no 16)
const idioma = config?.idioma ?? 'es';      // "es" (no existe)

Así obtienes acceso seguro con valores por defecto, respetando los valores “falsy” válidos.

📝 Ejercicio

Escribe una función formatearPrecio que reciba un precio (puede ser número, null o undefined). Si es null/undefined debe retornar “Precio no disponible”. Si es 0 debe mostrar “Gratis”. Usa ?? y operador ternario.

function formatearPrecio(precio) {
  // Tu código aquí
}

console.log(formatearPrecio(100));  // "$100"
console.log(formatearPrecio(0));    // "Gratis"
console.log(formatearPrecio(null)); // "Precio no disponible"