Encadenamiento opcional: acceso seguro con el operador ?.

Al finalizar este tema

Comprenderá por qué es necesario el operador ?., cómo funciona y en qué situaciones prácticas se utiliza.

La trampa de los objetos anidados

Tenemos los siguientes datos de usuario recibidos de una API:

const user = {
  name: "Alice",
  address: {
    city: "Seoul"
  }
};

console.log(user.address.city); // "Seoul"

Sin embargo, algunos usuarios no ingresaron su dirección:

const user = { name: "Bob" };
console.log(user.address.city);
// TypeError: Cannot read properties of undefined

user.address es undefined, pero al intentar leer .city se produce un error. Es el error de tiempo de ejecución más común en JavaScript.

Método anterior: encadenamiento de sentencias if

if

let city;
if (user && user.address && user.address.city) {
  city = user.address.city;
}

Es necesario verificar cada paso intermedio. A medida que aumenta la profundidad, el código se vuelve más largo.

Encadenamiento opcional: ?.

const city = user?.address?.city;

?. devuelve undefined sin generar un error si el valor de la izquierda es null o undefined.

user?.address?.city se lee así:

• Si hay user, continúa hacia .address
• Si hay address, continúa hacia .city
• Si encuentra null o undefined en cualquier punto, devuelve undefined inmediatamente

Permite un acceso seguro en una sola línea.

También se aplica a métodos y arrays

También se puede utilizar en llamadas a métodos:

const result = user.getProfile?.();

Si getProfile existe, se llama; si no, se devuelve undefined. Se añade ?. antes del paréntesis.

También funciona para el acceso a índices de un array:

const first = users?.[0]?.name;

users No se produce un error aunque el array no exista o esté vacío.

Combinación con el operador nullish coalescing (??)

?. se utiliza a menudo junto con el operador nullish coalescing ??:

const city = user?.address?.city ?? "Unknown";

Accede de forma segura mediante ?. y, si el resultado es null o undefined, utiliza el valor predeterminado después de ??. A diferencia de ||, 0 o "" (cadena vacía) se consideran valores válidos.

const count = data?.total ?? 0;   // si total es 0, se mantiene 0
const count2 = data?.total || 0;  // si total es 0, también es falsy y devuelve 0 (puede diferir de la intención)

Precaución por uso excesivo

No debe aplicarse ?. en todas partes solo porque sea cómodo:

// esto es excesivo
const name = user?.name?.toString?.()?.trim?.();

user.name es absolutamente necesario; en ese caso, lo correcto es acceder sin ?.. Debe producirse un error para poder detectar el error.

?. transmite al código el significado de "este valor podría no existir". Úselo únicamente donde realmente pueda faltar.

Conceptos clave

?. devuelve undefined en lugar de un error cuando encuentra undefined o null. Se utiliza al acceder a datos con una estructura incierta, como las respuestas de una API. Combinado con ??, permite gestionar los valores predeterminados de forma limpia.