Encadenamiento Opcional 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