Objetos e destructuring
Spread, destructuring e por que 'copiar' um objeto com = não copia nada.
Objeto — chave e valor
const usuario = {
nome: "Ana",
idade: 28,
endereco: { cidade: "Porto Velho", uf: "RO" },
};
usuario.nome; // "Ana"
usuario["nome"]; // "Ana" — mesma coisa, útil quando a chave é dinâmica
usuario.endereco.cidade; // "Porto Velho"Destructuring — extrair campos direto
const usuario = { nome: "Ana", idade: 28 };
// sem destructuring
const nome = usuario.nome;
const idade = usuario.idade;
// com destructuring — mesma coisa, uma linha
const { nome, idade } = usuario;
// renomeando e com valor padrão
const { nome: nomeCompleto, cidade = "não informada" } = usuario;Isso também funciona em parâmetro de função — muito comum em componente React, que recebe props como um objeto:
function Cartao({ titulo, preco }) {
return `${titulo}: R$ ${preco}`;
}
// em vez de: function Cartao(props) { return `${props.titulo}...`; }Spread — copiar e sobrescrever, sem mutar o original
const usuario = { nome: "Ana", idade: 28 };
// ATENÇÃO: isso NÃO copia, cria uma segunda referência pro MESMO objeto
const copiaErrada = usuario;
copiaErrada.nome = "Bia";
usuario.nome; // "Bia" — o original mudou também!
// spread cria um objeto NOVO de verdade
const copiaCerta = { ...usuario, nome: "Bia" };
usuario.nome; // "Ana" — original intacto
copiaCerta.nome; // "Bia"Esse é um dos bugs mais comuns pra quem começa: = em objeto/array copia a referência, não o conteúdo. Mudar a "cópia" muda o original junto, porque os dois apontam pro mesmo lugar na memória. { ...objeto } (ou [...array]) resolve criando algo realmente novo.
Exercício
Dado const produto = { nome: "Mouse", preco: 80 }, crie um novo objeto produtoComDesconto com o mesmo nome mas preco: 72, sem alterar produto.