Aula 33 — Optional Chaining (?.)

Nas últimas aulas, aprendemos recursos modernos como Destructuring e Spread Operator, que deixam o código mais limpo e elegante.

Agora vamos conhecer um operador que ajuda a evitar um dos erros mais comuns do JavaScript: tentar acessar propriedades de algo que não existe. Esse operador é o Optional Chaining, representado por ?..

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Entender o problema que o Optional Chaining resolve
• Acessar propriedades de forma segura
• Evitar erros do tipo Cannot read property
• Usar Optional Chaining com objetos, arrays e funções
• Escrever código mais robusto

O problema: acessando algo que não existe

Veja o objeto abaixo:

 const usuario = { nome: "Daniel", endereco: { cidade: "São Paulo" } }; 

Agora imagine tentar acessar uma propriedade que pode não existir:

 console.log(usuario.endereco.rua); 

Isso retorna undefined, o que ainda é seguro. Mas se endereco não existir, o código quebra.

O erro clássico do JavaScript

 const usuario2 = { nome: "Ana" };

console.log(usuario2.endereco.cidade);

Resolvendo com Optional Chaining

Com o Optional Chaining, podemos acessar propriedades de forma segura:

 console.log(usuario2.endereco?.cidade); 

Se endereco não existir, o JavaScript simplesmente retorna undefined, sem quebrar o código.

 console.log(usuario2.endereco?.cidade); // Saída será undefined 

Optional Chaining em níveis mais profundos

Você pode usar o operador em cadeias maiores:

 const pedido = { cliente: { nome: "Carlos" } };

console.log(pedido.cliente?.endereco?.cidade); // Saída será undefined

Optional Chaining com arrays

Também é possível usar Optional Chaining ao acessar posições de arrays:

 const produtos = ["Notebook", "Mouse"];

console.log(produtos[2]?.toUpperCase()); // Saída será undefined

Sem Optional Chaining, chamar métodos em algo inexistente causaria erro.

Optional Chaining com funções

O operador também funciona para chamadas de funções que podem não existir:

 const api = { buscarDados() { return "Dados carregados"; } };

console.log(api.buscarDados?.()); // Saída será "Dados carregados"

const api2 = {};

console.log(api2.buscarDados?.()); // Saída será undefined

Quando usar Optional Chaining?

• Dados vindos de APIs
• Objetos com estrutura incerta
• Propriedades opcionais
• Código defensivo e seguro

Na próxima aula, vamos aprender sobre Nullish Coalescing (??) e lidar melhor com valores nulos.