DevPath · Aprenda a programar ESPTEN

JavaScript moderno (ES6+)

Optional chaining e nullish coalescing

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)
Coloque isto em prática

O DevPath é um curso prático: aqui você lê a teoria; no app você a coloca em prática com exercícios que rodam de verdade, offline.

Comece grátis no app →
← Spread e rest (...)Módulos: import e export →