Encadenamiento Opcional JavaScript

Inicial JavaScript Curso JavaScript en Escuela Vue
  • El encadenamiento opcional (optional chaining) de JavaScript ES11 (ES2020) te va a encantar.
  • Hasta ahora teníamos que ser superdefensivos a la hora de acceder a propiedades de objetos.
  • Por ejemplo utilizando el operador && lógico.
const cats = {
  nino: {
    age: 7,
    color: 'black',
  },
};

// 🛑
cats.rouco.age; // TypeError: Cannot read ...

// ❌
cats.rouco && cats.rouco.age; // undefined

// ✅
cats.rouco?.age // undefined
  • Pero esto es algo poco mantenible, como seguro podrás imaginar.
  • Imagina que hay que atravesar aún más propiedades.
  • El operador de encadenamiento opcional consiste en un signo de interrogación y un punto ?. y permite comprobar si la propiedad contiene un valor.
  • Si no es así retorna undefined de forma silenciosa, evitando el error y la parada de ejecución.

Usarlo con Arrays

  • Podemos usar el encadenamiento opcional a la hora de acceder a elementos de un Array.
let cats = ['Nino', 'Rouco', 'Moma'];

// Nás tarde, o accidentalmente
cats = null;

// 🛑
cats[3]; // TypeError: Cannot read...

// ❌
Array.isArray(cats) && cats[3];

// ✅
cats?.[3];

Usarlo con funciones

  • Incluso podemos usarlo con funciones de la misma manera.
let meow = () => 'Meow 😸';

// Nás tarde, o accidentalmente
meow = null;

// 🛑
// meow(); // TypeError: meow is not a function

// ❌
typeof meow === 'function' && meow();

// ✅
meow?.(); // undefined
Curso JavaScript en Escuela Vue

¿Tienes alguna pregunta sobre Encadenamiento Opcional JavaScript?

Resuelve todas tus dudas sobre JavaScript en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬