❓Encadenamiento Opcional

Permite acceder a propiedades de objetos, elementos de arrays y llamar funciones sin causar errores si alguna propiedad es null o undefined.

Usa el operador ?..

📚 Encadenamiento Opcional con Objetos

Ejemplo Tradicional:

let name = undefined;
if (user.details && user.details.name && user.details.name.firstName) {
    name = user.details.name.firstName;
}

Refactorizado

const name = user.details?.name?.firstName;

📦 Encadenamiento Opcional con Arrays

Ejemplo Tradicional:

const data = {
    temperatures: [-3, 14, 4]
};

let firstValue = undefined;
if (data.temperatures) {
    firstValue = data.temperatures[0];
}

Refactorizado

const firstValue = data.temperatures?.[0];

🚀 Encadenamiento Opcional con Funciones

Ejemplo Tradicional:

const person = {
    age: 43,
    name: "Sam"
};

let upperCasedName = person.name;
if (person.name) {
    upperCasedName = person.name.toUpperCase();
}

Refactorizado

const upperCasedName = person.name?.toUpperCase();

🚫No Usar Encadenamiento Opcional para Asignaciones

El encadenamiento opcional solo se usa para lectura, no para asignaciones directas.

const settings = {};

// ❌ Error de Sintaxis
settings?.theme = "dark";

Uso Correcto con &&:

const settings = {};

settings?.theme && (settings.theme = "dark");
console.log(settings); // {}

💡Estrategias Alternativas para Asignaciones

Uso de ?? para Valores Predeterminados:

type Settings = {
    theme?: string | null;
};

const settings: Settings = {};

settings.theme = settings.theme ?? "dark";

console.log(settings); // { theme: "dark" }