El optional chaining llegó con ECMAScript 11 en junio de 2020 y resuelve uno de los dolores más comunes al manipular objetos en JavaScript: intentar acceder a propiedades que no existen y romper toda la aplicación. Si trabajas con frameworks como React o consumes APIs, esta característica te va a salvar más de una vez.

¿Qué problema resuelve el optional chaining en JavaScript?

Cuando tienes un objeto anidado y quieres acceder a una propiedad que no existe, JavaScript lanza un error que puede dejar tu interfaz en blanco o cortar el flujo de ejecución. Imagina que pides datos a una API y el registro que esperabas ya fue eliminado: tu render se rompe.

Mira este ejemplo sencillo. Tienes un objeto users con dos personas y cada una guarda su country:

js const users = { gndx: { country: 'MX' }, ana: { country: 'CO' } };

console.log(users.gndx.country); // 'MX'

Hasta ahí todo bien. Pero si intentas leer una propiedad que no existe, como users.gndx.age, el resultado es undefined. Y si vas un nivel más profundo sobre algo que tampoco existe, por ejemplo users.developer.country, JavaScript lanza un error porque no puede leer country de undefined [01:55].

¿Qué es el optional chaining? Es un operador (?.) de ECMAScript 11 que permite acceder a propiedades anidadas sin lanzar error cuando un eslabón de la cadena no existe. En lugar de romper, devuelve undefined.

¿Cómo se usa el operador ?. para acceder a propiedades anidadas?

La sintaxis es simple: agregas un signo de interrogación antes del punto en cada nivel donde la propiedad podría no existir. Así le dices a JavaScript que pregunte si el valor está presente antes de seguir avanzando.

js console.log(users?.developer?.country); // undefined

En lugar de un error que detiene tu programa, recibes undefined. Eso te permite encadenar validaciones, mostrar un fallback o simplemente dejar que el flujo continúe sin sobresaltos.

Los tres pasos que sigues con optional chaining son:

• Identificar la cadena de propiedades anidadas que quieres leer.
• Colocar ?. en cada eslabón que podría no existir.
• Manejar el undefined resultante con la lógica que necesites.

¿Por qué optional chaining importa en React y consumo de APIs?

Cuando renderizas componentes con datos que vienen de una API, no controlas el momento exacto en que llegan. Aunque uses async/await, el primer render puede ejecutarse antes de que la respuesta esté lista, y ahí es donde aparecen los errores de propiedades no definidas.

Antes de ECMAScript 11 tocaba escribir validaciones largas con operadores && o funciones auxiliares. Hoy basta con un ?. para que la cadena devuelva undefined y tu framework siga su ciclo de actualización sin problema.

¿Qué devuelve optional chaining si la propiedad no existe? Devuelve undefined. No lanza excepción, no detiene el script, y te deja libre para validar o asignar un valor por defecto.

¿Cuándo conviene usar optional chaining? Cuando trabajas con datos externos cuya estructura no controlas: respuestas de APIs, props opcionales en componentes, configuraciones de usuario o cualquier objeto que pueda venir incompleto.

Esta característica es de las más queridas de ECMAScript 11 porque convierte código defensivo y verboso en una sola línea legible. Si vienes peleando con errores de cannot read property of undefined, ya tienes la herramienta para dejarlos atrás.

¿Ya lo probaste en tu próximo proyecto? Cuéntame en los comentarios en qué caso te resultó más útil.