Mesclando dois objetos em JavaScript: `Object.assign()` vs Spread Operator

Como mesclar dois objetos (Object.assign e spread operator)?

Em JavaScript, você pode combinar as propriedades de dois ou mais objetos em um único objeto, uma operação chamada mesclagem de objetos. Isso é útil quando você precisa combinar dados de diferentes fontes ou criar novos objetos a partir de outros. Vamos explorar duas maneiras populares de mesclar objetos em JavaScript: Object.assign() e o spread operator (...).

Usando Object.assign() para mesclar objetos

O método Object.assign() é uma maneira simples de mesclar dois ou mais objetos em um novo objeto. Ele copia todas as propriedades de um ou mais objetos para um objeto de destino. Quando duas ou mais propriedades têm o mesmo nome, a última propriedade sobrescreve as anteriores.

Exemplo de código com Object.assign():

let pessoa = { nome: 'João', idade: 25 };
let endereco = { cidade: 'São Paulo', rua: 'Rua das Flores' };
let pessoaComEndereco = Object.assign({}, pessoa, endereco);
console.log(pessoaComEndereco);
// Exibe { nome: 'João', idade: 25, cidade: 'São Paulo', rua: 'Rua das Flores' }

Neste exemplo, Object.assign() mescla os objetos pessoa e endereco, criando um novo objeto pessoaComEndereco. A ordem das propriedades mescladas é importante: as propriedades de endereco sobrescrevem as propriedades do objeto pessoa, caso haja chaves em comum.

Características do Object.assign()

• Mesclagem superficial: Object.assign() cria uma cópia rasa, o que significa que objetos internos são passados por referência.
• Sobrescrição de propriedades: Se os objetos tiverem propriedades com o mesmo nome, o valor do último objeto sobrescreve o valor dos objetos anteriores.
• Objetos modificados: O primeiro argumento de Object.assign() é o objeto de destino, que é modificado pela mesclagem.

Usando o Spread Operator (...) para mesclar objetos

O spread operator (...) é uma maneira mais moderna e concisa de mesclar objetos. Ele espalha as propriedades de um ou mais objetos em um novo objeto. Assim como o Object.assign(), o spread operator cria uma cópia rasa do objeto e sobrescreve as propriedades em caso de conflito.

Exemplo de código com o spread operator:

let pessoa = { nome: 'João', idade: 25 };
let endereco = { cidade: 'São Paulo', rua: 'Rua das Flores' };
let pessoaComEndereco = { ...pessoa, ...endereco };
console.log(pessoaComEndereco);
// Exibe { nome: 'João', idade: 25, cidade: 'São Paulo', rua: 'Rua das Flores' }

Neste exemplo, usamos o spread operator para combinar os objetos pessoa e endereco. Assim como o Object.assign(), o spread operator sobrescreve as propriedades com o mesmo nome do objeto anterior.

Características do Spread Operator

• Sintaxe simples: O spread operator é mais legível e compacto do que o Object.assign(), tornando o código mais limpo.
• Mesclagem superficial: Assim como Object.assign(), o spread operator faz uma cópia rasa do objeto, passando objetos internos por referência.
• Não modifica o objeto original: O spread operator cria um novo objeto, sem modificar os objetos originais.

Diferenças entre Object.assign() e o Spread Operator

Quando usar Object.assign() ou o Spread Operator?

• Use Object.assign() quando precisar de mais controle, como mesclar objetos em uma ordem específica ou quando estiver manipulando objetos mutáveis.
• Use o spread operator quando desejar uma sintaxe mais moderna, legível e compacta, especialmente para mesclar dois ou mais objetos em um novo objeto.

Cuidado com a cópia rasa

Tanto Object.assign() quanto o spread operator fazem cópias rasas, o que significa que, se o objeto contiver objetos ou arrays internos, essas propriedades serão copiadas por referência. Se você modificar um objeto interno, isso afetará tanto o objeto original quanto o objeto mesclado.

Exemplo com cópia rasa:

let pessoa = { nome: 'João', endereco: { rua: 'Rua A' } };
let copiaPessoa = { ...pessoa };
pessoa.endereco.rua = 'Rua B';
console.log(copiaPessoa.endereco.rua);  // Exibe 'Rua B'

Aqui, a modificação da propriedade rua do objeto pessoa afeta a cópia copiaPessoa, porque a cópia é rasa e a propriedade endereco ainda é referenciada por ambos os objetos. Para evitar esse comportamento, você pode criar uma cópia profunda usando outras técnicas, como JSON.parse()/JSON.stringify().

Conclusão

A mesclagem de objetos é uma operação útil e simples em JavaScript. Tanto Object.assign() quanto o spread operator são métodos eficazes para combinar objetos, mas ambos criam cópias rasas, o que pode ser um problema em objetos complexos com propriedades internas. A escolha entre os dois métodos depende da sua preferência de sintaxe e do nível de controle necessário. Ambos oferecem soluções rápidas e fáceis para mesclar objetos em JavaScript.

Quando usar Object.assign() ou o Spread Operator para mesclar objetos

Mesclar objetos é uma tarefa comum e importante em JavaScript, especialmente quando se trabalha com dados complexos ou ao combinar configurações de diferentes fontes. Usar Object.assign() e o spread operator são duas abordagens eficientes para combinar objetos, mas lembre-se de que ambos fazem cópias rasas. Se precisar de uma mesclagem profunda, você pode explorar soluções como a técnica JSON.parse()/JSON.stringify() ou criar uma função de clonagem personalizada. A escolha do método certo pode melhorar a legibilidade e a eficiência do seu código.

Algumas aplicações:

• Combinar configurações de objetos em aplicativos dinâmicos.
• Mesclar dados de diferentes fontes, como objetos recebidos de APIs ou de usuários.
• Unir dados de um objeto com configurações padrão ou de fallback.
• Trabalhar com objetos mutáveis e imutáveis, combinando suas propriedades de maneira eficiente.

Dicas para quem está começando

• Use o spread operator para sintaxes mais limpas e legíveis ao mesclar objetos.
• Se o seu objeto contiver objetos ou arrays internos, lembre-se de que Object.assign() e o spread operator fazem cópias rasas.
• Se precisar de uma cópia profunda ao mesclar objetos, considere usar métodos como JSON.parse()/JSON.stringify().
• Experimente combinar vários objetos em um novo objeto usando ambos os métodos e veja como eles funcionam na prática.

Compartilhe este tutorial