Optional chaining y nullish coalescing

Trabajar con datos que pueden estar ausentes es una situación habitual en JavaScript. Un usuario puede no tener dirección, una respuesta de un servidor puede no incluir ciertos campos o una variable puede quedar sin inicializar. Antes, para acceder de forma segura a propiedades anidadas había que escribir cadenas largas de comprobaciones con el operador &&.

JavaScript moderno incorpora dos operadores que resuelven esto de manera directa: optional chaining (?.) y nullish coalescing (??). Son sencillos, breves y hacen el código mucho más legible.

Estos operadores son parte del estándar ECMAScript desde la versión 2020 y están disponibles en todos los navegadores y en Node.js.

Optional chaining con el operador ?.

El operador ?. (punto interrogante) permite acceder a una propiedad o llamar a un método sin que el programa falle si el valor intermedio es null o undefined. En lugar de lanzar un error, la expresión devuelve undefined.

El problema que resuelve

Sin optional chaining, acceder a una propiedad anidada en un objeto incompleto provoca un error:

const usuario = { nombre: "Ana" };

console.log(usuario.direccion.calle);
// TypeError: Cannot read properties of undefined

La solución tradicional era encadenar comprobaciones:

const calle = usuario && usuario.direccion && usuario.direccion.calle;
console.log(calle); // undefined

Funciona, pero se vuelve pesado cuando hay tres o cuatro niveles anidados.

Sintaxis con optional chaining

El operador ?. sustituye esas comprobaciones por una sola expresión compacta:

const usuario = { nombre: "Ana" };

const calle = usuario?.direccion?.calle;
console.log(calle); // undefined (no hay error)

Si cualquier parte de la cadena es null o undefined, la expresión completa devuelve undefined sin propagar el error.

Acceso a arrays y llamadas a funciones

Optional chaining también funciona con índices de array y llamadas a funciones:

const respuesta = { datos: null };

// Acceso a elemento de array que puede no existir
const primerElemento = respuesta.datos?.[0];
console.log(primerElemento); // undefined

// Llamada a método que puede no existir
const config = { inicio: null };
config.inicio?.();
// No hace nada, no lanza error

Un caso muy común es trabajar con respuestas de una API donde algunos campos son opcionales:

const producto = {
    nombre: "Portátil",
    fabricante: {
        nombre: "TechCorp"
    }
};

console.log(producto.fabricante?.direccion?.pais); // undefined
console.log(producto.fabricante?.nombre); // "TechCorp"

Nullish coalescing con el operador ??

El operador ?? (doble interrogante) devuelve el operando de la izquierda si no es null ni undefined; en caso contrario, devuelve el operando de la derecha. Se utiliza sobre todo para asignar valores por defecto.

Diferencia con el operador OR

Durante años, la forma habitual de asignar un valor por defecto era el operador ||:

const cantidad = valorRecibido || 10;

El problema es que || devuelve el operando de la derecha ante cualquier valor falsy: 0, "", false, null o undefined. Esto introduce errores sutiles:

const descuento = 0;
const descuentoAplicado = descuento || 25;
console.log(descuentoAplicado); // 25 (incorrecto, queríamos 0)

El operador ?? sólo activa el valor por defecto cuando el valor es null o undefined, tratando 0, "" o false como valores válidos:

const descuento = 0;
const descuentoAplicado = descuento ?? 25;
console.log(descuentoAplicado); // 0 (correcto)

const nombre = "";
const nombreFinal = nombre ?? "Anónimo";
console.log(nombreFinal); // "" (el string vacío se respeta)

const dato = null;
const datoFinal = dato ?? "sin datos";
console.log(datoFinal); // "sin datos"

Regla práctica: usa ?? cuando "no hay valor" significa exactamente null o undefined, y || sólo cuando quieres descartar también valores como 0, "" o false.

Combinación con optional chaining

Los dos operadores se complementan muy bien. Optional chaining garantiza que el acceso no falle y nullish coalescing proporciona un valor por defecto cuando el resultado es ausente.

const pedido = {
    cliente: { nombre: "Luis" },
    envio: null
};

const direccionEnvio = pedido.envio?.direccion ?? "Sin dirección de envío";
console.log(direccionEnvio); // "Sin dirección de envío"

const telefonoCliente = pedido.cliente?.telefono ?? "No disponible";
console.log(telefonoCliente); // "No disponible"

Esta combinación es el patrón idiomático de JavaScript moderno para leer datos opcionales y dar valores por defecto sensatos.

Asignación con el operador ??=

Existe también una variante de asignación llamada nullish assignment (??=) que asigna un valor sólo si la variable o propiedad es null o undefined.

const configuracion = {
    tema: "oscuro",
    idioma: null
};

configuracion.tema ??= "claro";
configuracion.idioma ??= "es";
configuracion.zona ??= "Europe/Madrid";

console.log(configuracion);
// { tema: "oscuro", idioma: "es", zona: "Europe/Madrid" }

Sólo los campos que eran null o undefined se han actualizado; tema se respeta tal como estaba.

Ejemplo integrador

Imagina una aplicación que recibe datos de usuarios desde un servidor. Cada usuario puede tener o no avatar, dirección o preferencias. Con optional chaining y nullish coalescing podemos escribir un código limpio y seguro:

function mostrarPerfil(usuario) {
    const nombre = usuario?.nombre ?? "Usuario anónimo";
    const ciudad = usuario?.direccion?.ciudad ?? "Ciudad desconocida";
    const tema = usuario?.preferencias?.tema ?? "claro";
    const avatar = usuario?.avatar?.url ?? "/img/avatar-default.png";

    return {
        nombre,
        ciudad,
        tema,
        avatar
    };
}

const perfilCompleto = mostrarPerfil({
    nombre: "Ana",
    direccion: { ciudad: "Madrid" },
    preferencias: { tema: "oscuro" },
    avatar: { url: "https://example.com/ana.png" }
});

const perfilIncompleto = mostrarPerfil({
    nombre: "Luis"
});

console.log(perfilCompleto);
console.log(perfilIncompleto);
// { nombre: "Luis", ciudad: "Ciudad desconocida",
//   tema: "claro", avatar: "/img/avatar-default.png" }

Sin estos operadores, la misma función requeriría múltiples if o cadenas largas con && y ||. La versión moderna es más breve, más segura y más fácil de leer para cualquier persona del equipo.