El operador de encadenamiento opcional (?.) permite aceder de forma segura a propiedades anidadas de un objeto sin provocar errores si alguna parte de la cadena es null o undefined.

Acceso seguro a propiedades anidadas

Sin este operador, para evitar errores al acceder a propiedades profundas, se requiere verificar manualmente cada nivel:

const data = {};
const edad = data.usuario && data.usuario.edad;

Con el encadenamiento opcional, esto se simplifica:

const data = {};
const edad = data.usuario?.edad;

Si data.usuario es null o undefined, la expresión devuelve undefined en lugar de lanzar un error. Internamente, equivale a:

const temp = data.usuario;
const edad = (temp == null) ? undefined : temp.edad;

Llamadas condicionales a métodos

También se puede usar para invocar métodos que podrían no existir:

const herramienta = {};
const resultado = herramienta.procesar?.();

Si procesar no está definido, resultado será undefined sin generar una excepción.

Manejo seguro de callbacks

function ejecutar(accion, manejarError) {
  try {
    // lógica principal
  } catch (error) {
    manejarError?.(error.message);
  }
}

Esto evita errores si manejarError no se proporciona.

Acceso condicional a elementos de array

const elemento = lista?.[2];

Si lista es null o undefined, elemento será undefined.

Evaluación cortocircuitada

La parte derecha del operador no se evalúa si la izquierda es null o undefined:

let ref = null;
let contador = 0;
let valor = ref?.[contador++];

console.log(contador); // 0, porque contador++ nunca se ejecutó

Operador de fusión nula (??)

Este operador devuelve el operando derecho únicamente si el izquierdo es null o undefined. A diferencia de ||, no considera valores falsos como 0, false o '' como "vacíos".

const a = null ?? 'predeterminado';     // 'predeterminado'
const b = 0 ?? 1;                       // 0
const c = '' ?? 'texto';                // ''

Combinación con encadenamiento opcional

Es común usar ambos operadores juntos para asignar valores por defecto:

const config = {};
const umbral = config.limite?.valor ?? 100;

Si config.limite o config.limite.valor no existen, umbral será 100.

Precedencia de operadores

El operador ?? no puede combinarse directamente con && o || sin paréntesis, ya que genera un error de sintaxis:

// ❌ Error de sintaxis
null || undefined ?? "valor";

// ✅ Correcto
(null || undefined) ?? "valor";