Optional chaining: ?.
Al acceder a propiedades anidadas, si una intermedia es undefined o null,
JavaScript lanza un error. El operador ?. evita el problema: si algo no existe,
devuelve undefined en lugar de fallar.
const usuario = { perfil: { nombre: "Ana" } };
console.log(usuario.perfil?.nombre); // "Ana"
console.log(usuario.cuenta?.email); // undefined (no revienta)
Sin ?., usuario.cuenta.email lanzaría un error porque cuenta es
undefined.
Nullish coalescing: ??
El operador ?? devuelve el lado derecho solo si el izquierdo es null o
undefined. Es ideal para valores por defecto:
const nombre = usuario.nombre ?? "Anónimo";
¿Por qué no usar ||?
|| considera "falsos" valores como 0, "" o false, lo que puede dar
sorpresas. ?? solo reacciona a null/undefined:
const cantidad = 0;
console.log(cantidad || 10); // 10 ❌ (0 es válido pero se ignora)
console.log(cantidad ?? 10); // 0 ✅ (respeta el 0)
Combinados, ?. y ?? hacen el acceso a datos muy robusto:
const ciudad = usuario.direccion?.ciudad ?? "Desconocida";
Ejemplos
Acceso seguro con valor por defecto
const config = { tema: { color: "azul" } };
const color = config.tema?.color ?? "negro";
const fuente = config.tipografia?.fuente ?? "Arial";
console.log(color); // "azul"
console.log(fuente); // "Arial" (no existía)