Spread operator (...) com objetos: copiando e combinando de forma fácil

O spread operator (...) é uma forma prática de “espalhar” propriedades de um objeto em outro.

Pense assim:
você tem uma ficha de cadastro pronta e quer criar uma nova ficha parecida, mudando só alguns campos.
Com spread, isso fica rápido e organizado.

Exemplo básico: copiando objeto

const usuario = {
  nome: "Ana",
  idade: 25
};

const copia = { ...usuario };

console.log(copia); // { nome: "Ana", idade: 25 }

Aqui, copia recebe as mesmas propriedades de usuario.

Atualizando propriedades ao copiar

Uma vantagem enorme: copiar e já alterar campos no mesmo passo.

const usuario = {
  nome: "Ana",
  idade: 25
};

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

console.log(usuarioAtualizado); // { nome: "Ana", idade: 26 }

Adicionando novas propriedades ao copiar

const usuarioComPerfil = {
  ...usuario,
  perfil: "admin"
};

console.log(usuarioComPerfil);
// { nome: "Ana", idade: 25, perfil: "admin" }

Combinando dois objetos

Você também pode juntar várias “fichas” em uma só.

const dadosBasicos = { nome: "Bruno", idade: 30 };
const contato = { email: "bruno@email.com", cidade: "Recife" };

const completo = { ...dadosBasicos, ...contato };

console.log(completo);
// { nome: "Bruno", idade: 30, email: "bruno@email.com", cidade: "Recife" }

Ordem importa (quem vem por último sobrescreve)

Se duas propriedades tiverem o mesmo nome, vence a última.

const a = { tema: "claro", fonte: 14 };
const b = { tema: "escuro" };

const config = { ...a, ...b };
console.log(config); // { tema: "escuro", fonte: 14 }

Como b veio depois, tema virou "escuro".

Muito útil para não alterar o objeto original

Com spread, você cria um novo objeto em vez de modificar o antigo direto.
Isso deixa o código mais previsível e evita efeitos colaterais.

const produto = { nome: "Mouse", preco: 80 };

const produtoPromo = { ...produto, preco: 60 };

console.log(produto.preco);      // 80 (original intacto)
console.log(produtoPromo.preco); // 60

Atenção: cópia rasa (shallow copy)

Spread copia só o primeiro nível.
Se houver objeto dentro de objeto, o interno continua compartilhado.

const original = {
  nome: "Lia",
  endereco: { cidade: "Recife" }
};

const copia = { ...original };

copia.endereco.cidade = "Olinda";

console.log(original.endereco.cidade); // Olinda

Isso acontece porque endereco continua referenciando o mesmo objeto interno.

Spread x Rest (não confundir)

O mesmo ... pode ter dois papéis:

• Spread: espalha propriedades para copiar/juntar.
• Rest: junta o restante das propriedades.

Exemplo com rest:

const pessoa = { nome: "Ana", idade: 25, cidade: "Recife" };
const { nome, ...resto } = pessoa;

console.log(nome);  // Ana
console.log(resto); // { idade: 25, cidade: "Recife" }

Resumo da lição

• ...obj ajuda a copiar objetos de forma simples.
• Dá para copiar e atualizar campos no mesmo passo.
• Dá para combinar vários objetos.
• Em conflito de chave, prevalece a última.
• Spread faz cópia rasa (atenção com objetos aninhados).
• É ótimo para escrever código mais limpo e previsível.