Encadenamiento Opcional JavaScript
Inicial
JavaScript

- 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
¿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.