Qué es el encadenamiento opcional?

El encadenamiento opcional, representado por ?. en JavaScript, es una funcionalidad introducida en ES2020.

El encadenamiento opcional cambia la forma en que se accede a las propiedades desde objetos profundamente anidados. Solucionando el problema de tener que comprobar elementos nulos múltiples veces al acceder a una larga cadena de propiedades de objetos en JavaScript.

Estado Actual: Propuesta de ECMAScript en la etapa 4 del proceso. : https://github.com/tc39/proposal-optional-chaining

Casos de uso

  1. Acceder potencialmente a propiedades null o undefined de un objeto.
  2. Obtener resultados de una variable que puede no estar disponible todavía.
  3. Obtener valores predeterminados.
  4. Acceder a largas cadenas de propiedades.

Imagina que esperas que una API devuelva un objeto de este tipo:

obj = {
  prop1: {
    prop2: {
      algunaProp: "valor"
    }
  }
};

Pero es posible que no sepas si cada uno de estos campos está disponible de antemano. Algunos de ellos pueden no haber sido devueltos por la API o pueden haber regresado con valores nulos.

Aquí hay un ejemplo:

//esperado
obj = {
  id: 9216,
  hijo: [
    { id: 123, hijo: null },
    { id: 124, hijo: [{ id: 1233, hijo: null }] }
  ]
};

//actual
obj = {
  id: 9216,
  hijo: null
};

Esto sucede muy a menudo con funciones que llaman a una API. Es posible que hayas visto código en React que intenta protegerse contra estos problemas de la siguiente manera:

render = () => {
  const obj = {
    prop1: {
      prop2: {
        algunaProp: "valor",
      },
    },
  };

  return (
    <div>
      {obj && obj.prop1 && obj.prop1.prop2 && obj.prop1.prop2.algunaProp && (
        <div>{obj.prop1.prop2.algunaProp}</div>
      )}
    </div>
  );
};

Para afrontar mejor este problema, muchas veces en el pasado hemos utilizado Lodash, específicamente el método _.get:

_.get(obj, prop1.prop2.algunaProp);

Esto genera undefined si alguna de esas propiedades es undefined. ¡El encadenamiento opcional es exactamente eso! Ahora en lugar de utilizar una librería externa, esta funcionalidad está disponible de forma nativa.

¿Cómo funciona el encadenamiento opcional?

?. se puede utilizar para encadenar propiedades que pueden ser null o undefined.

const propNecesitada = obj?.prop1?.prop2?.algunaProp;

Si cualquiera de esas propiedades encadenadas es null o undefined, JavaScript regresará undefined.

¿Qué pasa si queremos devolver algo más significativo? Prueba esto:

let arbolFamiliar = {
    nosotros: {
        hijo: {}
    }
}

// usando _.get
const nieto = _.get(arbolFamiliar, 'nosotros.hijo.suHijo', 'No se encontraron hijos' );

// usando encadenamiento opcional y null coalescing 
const nullCoalescing = arbolFamiliar?.nosotros?.hijo?.suHijo ?? 'No se encontraron hijos'

console.log(nullCoalescing) // No se encontraron hijos

También funciona para objetos que pueden ser null o undefined:

let usuario;
console.log(usuario?.id) // undefined

Cómo obtener esta funcionalidad tan reciente

  1. Pruébalo en la consola de tu navegador: Esta es una adición reciente y los navegadores antiguos pueden necesitar polyfills. Puedes probarlo en Chrome o Firefox desde la consola del navegador. Si no funciona, intenta activar las funciones experimentales de JavaScript visitando chrome://flags/ y habilitando "JavaScript Experimental".
  2. Pruébalo en una aplicación de Node usando Babel:
{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

En resumen

Utiliza el encadenamiento opcional ?. para comprobar objetos o propiedades en cadenas largas que pueden ser null o undefined. La sintaxis es la siguiente:

let usuario = {};
console.log(usuario?.id?.nombre)

¿Interesado en más tutoriales y JSBytes de mi parte? Suscríbete a mi boletín de noticias o sígueme en Twitter.

Traducido del artículo de Shruti Kapoor - JavaScript Optional Chaining `?.` Explained - How it Works and When to Use it