Optional chaining: ?.
Ao acessar propriedades aninhadas, se uma intermediária for undefined ou null,
o JavaScript lança um erro. O operador ?. evita o problema: se algo não existe,
ele retorna undefined em vez de falhar.
const usuario = { perfil: { nome: "Ana" } };
console.log(usuario.perfil?.nome); // "Ana"
console.log(usuario.conta?.email); // undefined (não quebra)
Sem ?., usuario.conta.email lançaria um erro porque conta é
undefined.
Nullish coalescing: ??
O operador ?? retorna o lado direito apenas se o esquerdo for null ou
undefined. É ideal para valores padrão:
const nome = usuario.nome ?? "Anônimo";
Por que não usar ||?
|| considera "falsos" valores como 0, "" ou false, o que pode trazer
surpresas. ?? só reage a null/undefined:
const quantidade = 0;
console.log(quantidade || 10); // 10 ❌ (0 é válido mas é ignorado)
console.log(quantidade ?? 10); // 0 ✅ (respeita o 0)
Combinados, ?. e ?? tornam o acesso a dados muito robusto:
const cidade = usuario.endereco?.cidade ?? "Desconhecida";
Exemplos
Acesso seguro com valor padrão
const config = { tema: { cor: "azul" } };
const cor = config.tema?.cor ?? "preto";
const fonte = config.tipografia?.fonte ?? "Arial";
console.log(cor); // "azul"
console.log(fonte); // "Arial" (não existia)