JavaScript Academy · Aula

Combinando ?. e ??

Combine o acesso seguro com valores padrão adequados.

Combinando ?. e ?? é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Duas ferramentas em conjunto

O encadeamento opcional ?. lê com segurança valores possivelmente ausentes, e a coalescência nula ?? fornece um valor padrão. Juntos, eles leem dados profundos e usam um valor alternativo de forma clara.

const user = {};
console.log(user.profile?.name ?? "Anonymous");

O padrão comum

O idioma a?.b ?? fallback faz uma leitura segura e usa um valor padrão se o resultado for nulo ou indefinido. Isso substitui longas cadeias de verificações.

const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"

Usando um valor alternativo quando algo está ausente

Se qualquer elo for nulo ou indefinido, ?. produz undefined, que ?? então substitui pelo valor padrão.

const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"

Aninhamento profundo

O padrão pode ser usado em estruturas profundamente aninhadas, mantendo um único valor alternativo no final.

const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"

Mantendo valores falsos válidos

Como ?? só fornece um valor padrão para valores nulos ou indefinidos, os valores reais 0 da cadeia são preservados.

const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0

A armadilha de && / ||

Escrever a && a.b || fallback substituiria incorretamente um 0 ou "" legítimo. A combinação de ?. + ?? evita isso.

const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50);      // 0, correct

Com resultados de funções

Também é possível usar um valor padrão para o resultado de uma chamada opcional, combinando os dois operadores ao redor de uma invocação de método.

const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"

Usando um valor padrão no acesso a vetores

O padrão funciona com acesso por colchetes para vetores ou chaves dinâmicas.

const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"

Criando textos para exibição

Um uso prático é produzir textos seguros para exibição a partir de dados incertos.

function label(order) {
  return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"

Observação sobre precedência

?. tem precedência maior que ??, portanto a?.b ?? c é interpretado como (a?.b) ?? c, exatamente como você deseja.

const u = { age: null };
console.log(u?.age ?? 18); // 18

Um idioma claro

Juntos, esses operadores substituem um código defensivo extenso por uma única linha legível, tornando a intenção evidente.

const profile = null;
console.log(profile?.bio?.length ?? 0); // 0

Verificação rápida

Preveja a saída.

Recapitulação

O idioma obj?.deep?.prop ?? fallback lê valores aninhados possivelmente ausentes e fornece um valor padrão somente quando o resultado é null ou undefined. Ele preserva valores falsos válidos, como 0 e "", ao contrário da abordagem com &&/||. ?. tem precedência maior que ??, portanto o agrupamento é naturalmente correto.

Perguntas Frequentes

A aula “Combinando ?. e ??” é grátis?

Sim — o texto completo de “Combinando ?. e ??” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Combinando ?. e ??”?

Combine o acesso seguro com valores padrão adequados. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Combinando ?. e ??”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy