Aula 35 — Revisão prática: Optional Chaining, Nullish Coalescing e Spread Operator

Nas últimas aulas, aprendemos três recursos muito importantes do JavaScript moderno: Optional Chaining (?.), Nullish Coalescing (??) e Spread Operator (...).

Agora é hora de ver esses conceitos funcionando em situações reais, do tipo que aparecem todos os dias em aplicações web.

🎯 Objetivo da aula

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

• Usar Optional Chaining com segurança em dados incertos
• Aplicar Nullish Coalescing para definir valores padrão corretos
• Usar Spread Operator para copiar e combinar dados
• Combinar esses recursos em cenários reais

Exemplo 1 — Dados vindos de uma API

Imagine um objeto retornado por uma API, onde nem todas as informações são garantidas:

 const respostaApi = { usuario: { nome: "Daniel" } }; 

Acessando dados com segurança:

 const cidade = respostaApi.usuario?.endereco?.cidade ?? "Cidade não informada";

console.log(cidade); // Saída será "Cidade não informada"

Exemplo 2 — Configurações do sistema

Suponha que um sistema tenha configurações opcionais:

 const config = { tema: "dark", itensPorPagina: 0 }; 

Definindo valores padrão corretamente:

 const itens = config.itensPorPagina ?? 10;

console.log(itens); // Saída será 0

Aqui, 0 é um valor válido e não deve ser substituído.

Exemplo 3 — Atualizando objetos com Spread Operator

Imagine que você precise atualizar dados de um usuário sem alterar o objeto original:

 const usuario = { nome: "Daniel", idade: 30 }; 

 const usuarioAtualizado = { ...usuario, idade: 31 };

console.log(usuario);
// Saída será { nome: "Daniel", idade: 30 }

console.log(usuarioAtualizado);
// Saída será { nome: "Daniel", idade: 31 }

Exemplo 4 — Juntando dados de formulários

Muito comum em formulários web:

 const dadosPessoais = { nome: "Ana", email: "ana@email.com" };

const endereco = {
cidade: "São Paulo",
estado: "SP"
};

const cadastroCompleto = {
...dadosPessoais,
...endereco
};

console.log(cadastroCompleto);
// Saída será { nome: "Ana", email: "ana@email.com
", cidade: "São Paulo", estado: "SP" }

Exemplo 5 — Funções com dados opcionais

Função que recebe um objeto de opções:

 function criarMensagem(opcoes) { const nome = opcoes?.nome ?? "Visitante"; const idade = opcoes?.idade ?? "não informada";

return nome + " tem idade " + idade;
}

console.log(criarMensagem({ nome: "Carlos", idade: 25 }));
// Saída será "Carlos tem idade 25"

console.log(criarMensagem({ nome: "Maria" }));
// Saída será "Maria tem idade não informada"

console.log(criarMensagem());
// Saída será "Visitante tem idade não informada"

Resumo mental: quando usar cada um

• ?. → quando algo pode não existir
• ?? → quando null ou undefined são esperados
• ... → quando precisa copiar ou combinar dados

Na próxima aula, vamos entrar em um novo capítulo do JavaScript e entender assincronicidade: como o JavaScript lida com tarefas que não acontecem imediatamente.