JavaScript Optional Chaining (?.): Accede a propiedades anidadas sin errores

Uno de los avances más útiles que introdujo ECMAScript 2020 (ES11) fue el operador ?., también conocido como Optional Chaining.
Este operador nos permite acceder a propiedades anidadas sin tener que validar cada nivel manualmente.

📌 ¿Qué problema soluciona?

Supongamos que tenemos un objeto user y queremos acceder a user.profile.name. Sin Optional Chaining, debíamos hacer esto:

  const name = user && user.profile && user.profile.name;
  console.log(name);

Esto evita errores como:

     TypeError: Cannot read property 'name' of undefined

Pero este enfoque es verboso, poco elegante y difícil de leer.

La solución moderna

Con ?, podemos reescribir ese mismo ejemplo de forma más simple y segura:

  const name = user?.profile?.name;
  console.log(name); // "Alejandro" o undefined, sin lanzar error

El operador ?. verifica automáticamente si la propiedad existe. Si no, retorna undefined sin romper tu aplicación.

Ejemplo completo

  const user1 = {
    profile: {
      name: "Alejandro"
    }
  };

  const user2 = {}; // no tiene la propiedad 'profile'

  console.log(user1?.profile?.name); // "Alejandro"
  console.log(user2?.profile?.name); // undefined (sin error)

🧠 ¿Cómo funciona internamente?

El operador ?. detiene la evaluación si el valor a su izquierda es null o undefined.

• Se puede utilizar en distintos contextos:

  obj?.prop

• Propiedades dinámicas:

  obj?.[propName]

• Llamadas a funciones opcionales:

      funcOptional?.()

Comparación rápida

Cuándo usar y no usar Optional Chaining

Recomendado cuando:

• Trabajas con respuestas de APIs u objetos anidados que pueden ser undefined.
• Deseas evitar validaciones innecesarias.
• Estás implementando un patrón defensivo.

Evítalo cuando:

• Necesitas asegurarte de que una propiedad sí exista.
• Estás depurando un error que podría estar oculto con undefined.

Compatibilidad

Disponible en la mayoría de los navegadores modernos:

• Chrome 80+
• Firefox 74+
• Safari 13.1+

Para entornos más antiguos, puedes transpilarlo con Babel o Vite.

En resumen

El operador ?. (Optional Chaining) mejora la legibilidad, previene errores y nos permite trabajar con objetos complejos de forma más limpia. Una mejora pequeña en sintaxis, pero enorme en productividad.

Próxima semana:

Exploraremos ?? (Nullish Coalescing), un operador que te permite establecer valores por defecto solo cuando realmente son null o undefined.