Encadenamiento Opcional de JavaScript (?.)

El operador de encadenamiento opcional ?. es una forma corta y segura de leer un valor profundamente dentro de una cadena de objetos conectados cuando uno de los eslabones de esa cadena podría no existir. En lugar de lanzar un error, simplemente se detiene y devuelve undefined. Este capítulo explica el problema que resuelve, las tres formas que adopta y las pocas reglas que necesitas para usarlo correctamente.

El Problema: Acceder a Propiedades Inexistentes

Imagina que tienes un object user y quieres leer la ciudad de un object address anidado. Si address no existe, acceder a una propiedad sobre él lanza un error:

let user = {}; // a user without an address

console.log(user.address.city);
// TypeError: Cannot read properties of undefined (reading 'city')

La razón es que user.address es undefined, y tratar de leer .city desde undefined no está permitido. Esta es una situación común cuando los datos provienen de una API, un formulario o una base de datos donde algunos campos son opcionales.

Antes de que existiera ?., los desarrolladores resolvían esto con cadenas de && o comprobaciones anidadas. Funcionan, pero son verbosas y repiten los nombres de las propiedades:

let user = {};

// The old way with the && operator
let city = user && user.address && user.address.city;
console.log(city); // undefined

// Or with an even longer ternary
let city2 = user ? (user.address ? user.address.city : undefined) : undefined;
console.log(city2); // undefined

Cómo Funciona el Encadenamiento Opcional

El operador de encadenamiento opcional ?. detiene la evaluación si el valor que está antes es null o undefined, y devuelve undefined en lugar de lanzar un error. Este comportamiento se denomina cortocircuito (short-circuiting).

Aquí está la misma consulta, ahora segura y legible:

Cuando user.address es undefined, la expresión user?.address?.city devuelve undefined silenciosamente. Cuando los datos están presentes, la cadena llega hasta city.

Solo Protege el Valor a Su Izquierda

Esta es la regla más importante, y la que los principiantes suelen confundir con más frecuencia. ?. comprueba únicamente el valor inmediatamente a su izquierda, no toda la cadena.

Considera a?.b.c:

• Si a es null o undefined, la expresión completa hace cortocircuito y devuelve undefined.
• Pero si a existe y b es null o undefined, entonces .c sigue siendo un acceso simple — y lanza un error.

let a = { b: null };

console.log(a?.b);    // null — fine, a exists
console.log(a?.b.c);  // TypeError: Cannot read properties of null (reading 'c')

La solución es colocar ?. en cada lugar donde un valor pueda estar legítimamente ausente:

let a = { b: null };

console.log(a?.b?.c); // undefined — no error

Así que la regla es simple: pon ?. directamente después de cada valor que pueda no estar, no solo al inicio de la cadena.

El Cortocircuito Detiene Toda la Cadena

Cuando la parte anterior a ?. es null o undefined, el resto de la expresión no se evalúa en absoluto. Esto incluye cualquier llamada a función y cualquier acceso adicional a propiedades que venga después.

Esto es una garantía útil: nada de lo que venga después de un eslabón faltante tiene oportunidad de ejecutarse ni de causar efectos secundarios.

Las Tres Formas del Encadenamiento Opcional

?. no es un operador por sí solo — es una construcción sintáctica que se presenta en tres formas, una para cada manera de acceder a un valor.

?. para Acceso a Propiedades

Usa obj?.prop para leer una propiedad cuando obj podría ser null o undefined.

let user = { name: 'John' };

console.log(user?.name);    // John
console.log(user?.surname); // undefined (key missing, but no error)

?.() para Llamar Métodos

Usa obj.method?.() para llamar a un método solo si existe. Esto es útil cuando un object puede o no implementar un método determinado.

Si greet no es una función (porque no existe), ?.() omite la llamada y devuelve undefined en lugar de lanzar TypeError: greet is not a function.

?.[] para Claves Dinámicas

Usa obj?.[key] cuando lees una propiedad con notación de corchetes — por ejemplo, una clave dinámica almacenada en una variable.

let user = { name: 'Alice' };
let key = 'name';

console.log(user?.[key]); // Alice

let nobody = null;
console.log(nobody?.[key]); // undefined (no error)

El Encadenamiento Opcional es para Leer, No para Escribir

Puedes usar ?. para leer un valor e incluso para delete una propiedad de forma segura. Pero no puedes usarlo en el lado izquierdo de una asignación.

let user = null;

// Reading is fine
console.log(user?.name); // undefined

// Deleting is fine — delete is skipped if user is null
delete user?.name; // no error

// Assignment does NOT work — this is a syntax error
// user?.name = 'John'; // SyntaxError

La razón es que no hay nada significativo a lo que asignar cuando el lado izquierdo no existe, por lo que el lenguaje no lo permite.

No Abuses del Encadenamiento Opcional

?. es una herramienta precisa: úsala solo donde el valor a su izquierda es genuinamente opcional. Usarlo en todas partes es un error, porque puede ocultar bugs reales.

Por ejemplo, si escribes mal el nombre de una propiedad, ?. devolverá undefined silenciosamente en lugar de alertarte del problema:

let user = { name: 'John' };

console.log(user?.nmae); // undefined — typo hidden, no error to alert you

Combinación con el Operador Nullish Coalescing

El encadenamiento opcional devuelve undefined cuando falta un eslabón, lo que combina perfectamente con el operador nullish coalescing ?? para proporcionar un valor predeterminado.

Aquí user?.name se evalúa como undefined, y ?? interviene para proporcionar el valor de reserva 'Anonymous'. Esta combinación es uno de los usos más comunes en el mundo real de ?..

Compatibilidad con Navegadores

El encadenamiento opcional forma parte de la especificación ES2020. Es compatible con todos los navegadores modernos (Chrome, Firefox, Safari y Edge) y con Node.js 14 y versiones posteriores, por lo que puedes usarlo sin un transpilador en los entornos actuales. Para profundizar en los valores que verifica, consulta tipos de datos de JavaScript y métodos de object y this.

Pon a Prueba Tu Conocimiento