Acessando Propriedades Aninhadas com Segurança no JavaScript (?. e ??)

Evite erros fatais como TypeError: Cannot read properties of undefined ao navegar por objetos complexos em JavaScript. Combinando o Encadeamento Opcional (?.) com o Operador de Coalescência Nula (??), você consegue acessar propriedades profundamente aninhadas com segurança e definir um valor padrão quando o retorno for null ou undefined.

JavaScript

// Exemplo de objeto retornado de uma API (com dados incompletos)
const usuario = {
  nome: "Ana",
  perfil: {
    // a propriedade 'endereco' não existe neste objeto
  }
};

// 1. Acesso seguro com Encadeamento Opcional (?.)
const cidade = usuario.perfil?.endereco?.cidade;
console.log(cidade); // Output: undefined (sem estourar erro!)

// 2. Definindo valor padrão com Coalescência Nula (??)
const cidadeFinal = usuario.perfil?.endereco?.cidade ?? "Cidade não informada";
console.log(cidadeFinal); // Output: "Cidade não informada"

// Exemplo de chamada de função opcional
const resultadoCallback = usuario.notificar?.(); // Não executa e retorna undefined se a função não existir
console.log(resultadoCallback); // Output: undefined

Pontos-chave:

• Curto-circuito seguro: O operador ?. para a avaliação imediatamente e retorna undefined se o valor à sua esquerda for null ou undefined.
• Diferença crucial entre ?? e ||: O operador ?? só aciona o valor padrão quando a expressão resulta estritamente em null ou undefined. Ele preserva valores falsy válidos como 0, "" (string vazia) ou false.
• Suporte a chamadas de métodos e arrays: Você também pode usar ?.() para invocar métodos opcionais e ?.[index] para acessar elementos de um array que pode ser nulo.
• Boa prática de leitura: Evite encadear excessivamente o ?. em propriedades que você tem certeza que existem, mantendo o código limpo e focando o operador onde os dados são realmente incertos ou externos.