Operador de Fusión de Nulos en JavaScript

Durante años, los desarrolladores de JavaScript usaron el operador lógico OR (||) como un truco ingenioso para asignar valores predeterminados. Funcionaba, pero tenía un defecto: trataba a valores como 0 o a una cadena vacía “” como si fueran “no válidos”, reemplazándolos. Introducido en ES2020, el operador de fusión de nulos (??), también conocido como nullish coalescing operator, llegó para solucionar este problema de forma elegante y precisa.

En esta guía veremos cómo funciona el operador ??, por qué es una herramienta superior para manejar valores opcionales, y cómo puedes usarlo para escribir código más limpio, seguro y predecible.

¿Qué es el Operador de Fusión de Nulos (??)?

El operador de fusión de nulos (??) es una entidad lógica que devuelve el operando del lado derecho solo si el operando del lado izquierdo es null o undefined. Si el operando izquierdo es cualquier otro valor (incluyendo otros valores falsy como 0, “” o false), devuelve el operando izquierdo.

const resultado = valorIzquierda ?? valorDerecha;

• exprIzquierda es el valor que se evalúa primero.
• exprDerecha es el valor que se asigna solo si exprIzquierda es null o undefined.

let userProvidedAge; // undefined
const defaultAge = 25;

const finalAge = userProvidedAge ?? defaultAge;

console.log(finalAge); // 25 (porque userProvidedAge era undefined)

El operador de fusión de nulos es útil para proporcionar valores predeterminados en caso de que el valor inicial sea nulo o indefinido, lo que simplifica y hace más legible el código.

Ejemplos de Uso: Asignación de Valores Predeterminados

El operador de fusión de nulos es útil para asignar un valor predeterminado solo cuando una variable es null o undefined.

const nombreUsuario = null;
const nombre = nombreUsuario ?? "Invitado";

console.log(nombre);

En el anterior ejemplo nombreUsuario es null, por lo que nombre toma el valor "Invitado". Si nombreUsuario hubiera tenido un valor distinto de null o undefined, nombre se habría asignado con ese valor.

Evitar Sobrescribir Valores “Falsy”

A diferencia del operador || el operador ?? permite retener valores “falsy” como 0, false, y "", en lugar de reemplazarlos con un valor predeterminado.

const puntuacion = 0;
const puntuacionFinal = puntuacion ?? 100;

console.log(puntuacionFinal);

En el anterior ejemplo puntuacion es 0, un valor “falsy” pero válido, por lo que puntuacionFinal toma el valor 0 en lugar de 100.

Diferencia entre el operador lógico OR y Fusión de Nulos

El operador lógico OR || también se usa para asignar valores predeterminados, pero considera cualquier valor “falsy” como false, 0, NaN, "", null, o undefined. Esto significa que el operador || sustituirá valores que pueden ser válidos en algunos casos.

Ejemplo Comparativo:

const texto = "";
const mensaje1 = texto || "Texto predeterminado";
const mensaje2 = texto ?? "Texto predeterminado";

console.log(mensaje1);
console.log(mensaje2);

En el ejemplo anterior || reemplaza el string vacío "" por "Texto predeterminado", mientras que ?? respeta "" como un valor válido.

Usa ?? cuando desees conservar valores “falsy” como 0, false, o "", y reserva || para asignaciones donde cualquier valor “falsy” deba ser reemplazado.

El Operador de Fusión de Nulos y su Cortocircuito

Al igual que && y ||, el operador ?? utiliza el cortocircuito. Esto significa que si el operando de la izquierda no es null ni undefined, la expresión de la derecha nunca se evalúa.

Esto es excelente para el rendimiento, ya que evita la ejecución de funciones o cálculos innecesarios.

const result = undefined ?? console.log('Hola Programador');

En este caso, como el primer valor es undefined el operador de fusión de nulos evaluará la segunda expresión console.log('Hola Programador') y mostrará su valor en la consola.

function getDefaultConfig() {
    console.log("¡Función de configuración ejecutada!"); // Este mensaje no aparecerá
    return { theme: 'dark' };
}

const userConfig = { theme: 'light' };

// Como 'userConfig' no es null/undefined, la función getDefaultConfig() nunca se llama.
const finalConfig = userConfig ?? getDefaultConfig();

console.log(finalConfig); // { theme: 'light' }

Ventajas del Cortocircuito:

• Mejora el rendimiento al evitar evaluaciones innecesarias.
• Aumenta la eficiencia del código al evitar operaciones redundantes.
• Garantiza un comportamiento predecible al priorizar la eficacia sobre la evaluación exhaustiva.

Combinando ?? con Otros Operadores Lógicos

JavaScript impone una restricción de seguridad: no puedes combinar directamente ?? con los operadores && y || sin usar paréntesis. Esto es para evitar ambigüedad y forzarte a declarar explícitamente tu intención.

Ejemplo de Error:

const result = null || "Hola" ?? "Adiós"; 
console.log(result); // SyntaxError

En este ejemplo se produce un error de sintaxis porque la combinación directa del operador OR con el operador de fusión de nulos no sigue la precedencia de los operadores.

La Solución: Usar Paréntesis
Debes envolver la expresión && o || en paréntesis para indicarle a JavaScript el orden de evaluación correcto.

const result = (null || undefined) ?? 'OK';
console.log(result);

Al envolver la expresión a la izquierda del operador de fusión de nulos entre paréntesis, se asegura que la evaluación se realice de manera correcta y sin errores sintácticos.

// Evalúa primero (isValid && "Permitido") y luego aplica ??
const isValid = false;
const result = (isValid && "Permitido") ?? "Acceso Denegado";

console.log(result); 
// "Acceso Denegado" (porque isValid && "Permitido" devuelve 'false', que no es nullish)

Buenas Prácticas y Casos de Uso

1. Prefiere ?? sobre || para valores predeterminados. Es la opción más segura y predecible. Úsalo para configurar objetos, manejar parámetros de funciones o cualquier situación donde 0 o “” sean valores válidos.
2. Usa || solo cuando realmente quieras tratar a todos los valores falsy como inválidos. Por ejemplo, si quieres asegurarte de que una variable no sea 0, “”, false, null o undefined.
3. Encadena con seguridad. Puedes encadenar múltiples operadores ?? sin problemas, ya que se evalúan de izquierda a derecha.
4. Evita Mezclar ?? con Otros Operadores Lógicos sin Paréntesis: JavaScript no permite combinar ?? con && o || sin usar paréntesis, ya que puede causar ambigüedad en la evaluación de las expresiones.

Conclusión

El operador de fusión de nulos (??) es una herramienta moderna y poderosa que soluciona una de las imperfecciones históricas de JavaScript. Te permite asignar valores predeterminados de una manera precisa y segura, respetando valores como 0 y “”. Al adoptarlo como tu opción principal para manejar datos opcionales, escribirás un código más robusto, menos propenso a errores y mucho más fácil de leer y mantener.