JavaScript Academy · Aula

Encadeamento opcional com o operador ?.

Acesse propriedades profundamente aninhadas com segurança.

Encadeamento opcional com o operador ?. é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 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.

O problema

Ler uma propriedade de algo que seja undefined ou null lança um TypeError. O encadeamento opcional permite ler valores aninhados com segurança.

const user = {};
console.log(user.profile && user.profile.name);

O operador ?.

O operador de encadeamento opcional ?. para e retorna undefined se o valor à sua esquerda for null ou undefined, em vez de lançar uma exceção.

const user = {};
console.log(user.profile?.name); // undefined, no error

Lendo propriedades profundas

Você pode encadear várias etapas com ?. para acessar estruturas profundas sem verificações manuais em cada nível.

const data = { user: { address: { city: "Paris" } } };
console.log(data.user?.address?.city); // "Paris"

Curto-circuito

Se qualquer elo da cadeia for nulo ou indefinido, toda a expressão resulta imediatamente em undefined e o restante não é avaliado.

const data = { user: null };
console.log(data.user?.address?.city); // undefined

Somente valores nulos ou indefinidos ativam isso

?. só causa um curto-circuito com null ou undefined. Outros valores falsos, como 0 ou "", são valores reais e são acessados normalmente.

const obj = { count: 0 };
console.log(obj.count?.toString()); // "0"

Comparação com &&

Antes de ?., as pessoas encadeavam verificações com &&. O encadeamento opcional é mais curto e claro para a mesma finalidade.

const u = { profile: { name: "Ada" } };
const a = u && u.profile && u.profile.name;
const b = u?.profile?.name;
console.log(a, b);

Encadeamento após uma chamada

Você pode continuar o encadeamento após uma chamada de método, acessando com segurança as propriedades do valor retornado.

const config = { get: () => ({ port: 8080 }) };
console.log(config.get()?.port); // 8080

Curto-circuito no meio da cadeia

Se um elo intermediário for nulo ou indefinido, a avaliação para imediatamente, mesmo que elos posteriores pudessem chamar funções.

const obj = { a: null };
console.log(obj.a?.b.c.d); // undefined, never touches b/c/d

Não serve para atribuição

O encadeamento opcional serve para leitura. Não é possível atribuir a uma cadeia opcional; isso causa um erro de sintaxe no lado esquerdo de =.

const o = { x: 1 };
// o?.x = 5; // SyntaxError
o.x = 5;
console.log(o.x);

Combinando com vetores

Ele também funciona com o acesso entre colchetes, que será abordado mais adiante. A mesma segurança contra valores nulos ou indefinidos se aplica.

const state = { items: ["a", "b"] };
console.log(state.items?.[0]); // "a"

Evitando o uso excessivo

Use ?. somente onde um valor possa legitimamente estar ausente. O uso excessivo pode ocultar erros que você realmente deveria identificar, silenciando-os.

const order = { total: 42 };
console.log(order.total?.toFixed(2)); // "42.00"

Verificação rápida

Preveja o resultado.

Resumo

O operador ?. lê propriedades com segurança: se o lado esquerdo for null ou undefined, ele retorna undefined em vez de lançar uma exceção, interrompendo o restante da cadeia. Somente valores nulos ou indefinidos o ativam (não 0 nem ""), e ele não pode ser usado como destino de uma atribuição.

Perguntas Frequentes

A aula “Encadeamento opcional com o operador ?.” é grátis?

Sim — o texto completo de “Encadeamento opcional com o operador ?.” é 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 “Encadeamento opcional com o operador ?.”?

Acesse propriedades profundamente aninhadas com segurança. 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 1 de 4.

Quanto tempo leva a aula “Encadeamento opcional com o operador ?.”?

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