Como mesclar objetos em JavaScript: guia completo e exemplos
Neste guia completo, aprenda como mesclar objetos em JavaScript de forma simples usando o spread operator e o método assign().
Publicado em 8 de agosto de 2023
Glossário
Como mesclar objetos em JavaScript de forma simples
Utilizando o spread operator
Para mesclar objetos em JavaScript de forma simples, você pode usar a sintaxe de spread operator. Esse operador permite expandir os valores de um objeto em outro. Veja um exemplo:
const objeto1 = { a: 1, b: 2 };
const objeto2 = { c: 3, d: 4 };
const objetoMesclado = { ...objeto1, ...objeto2 };
console.log(objetoMesclado);
// Saída: { a: 1, b: 2, c: 3, d: 4 }
Nesse exemplo, os objetos objeto1 e objeto2 são mesclados em um novo objeto chamado objetoMesclado. O spread operator ... é usado para espalhar as propriedades dos objetos em um novo objeto.
Essa forma de mesclar objetos é simples e prática quando você tem apenas dois objetos para mesclar. No entanto, se você tiver mais objetos ou quiser controlar melhor a mesclagem, pode ser necessário usar outras abordagens.
Utilizando o método assign()
Outra forma de mesclar objetos em JavaScript é usando o método Object.assign(). Esse método recebe um objeto de destino e um ou mais objetos de origem e mescla todas as propriedades nos objetos de destino. Veja um exemplo:
const objeto1 = { a: 1, b: 2 };
const objeto2 = { c: 3, d: 4 };
const objetoMesclado = Object.assign({}, objeto1, objeto2);
console.log(objetoMesclado);
// Saída: { a: 1, b: 2, c: 3, d: 4 }
Nesse exemplo, o objeto vazio {} é usado como o objeto de destino para mesclar as propriedades de objeto1 e objeto2.
É importante notar que o método Object.assign() faz uma mesclagem superficial, ou seja, apenas copia as propriedades dos objetos de origem para o objeto de destino. Se alguma propriedade tiver o mesmo nome nos objetos de origem e destino, o valor do objeto de origem substituirá o valor do objeto de destino.
Além disso, o método Object.assign() modifica o objeto de destino original. Se você deseja manter os objetos de origem intactos, pode passar um objeto vazio como primeiro argumento ou um novo objeto como objeto de destino.
Essas são duas formas simples de mesclar objetos em JavaScript. No entanto, existem outras maneiras de realizar essa tarefa, como o uso de bibliotecas ou a implementação de algoritmos personalizados. Você pode escolher a abordagem que melhor se adequa às suas necessidades.
Exemplos de mesclagem de objetos em JavaScript passo a passo
-
Mesclar objetos com propriedades duplicadas
Suponha que você tenha dois objetos com uma propriedade em comum, mas com valores diferentes. Você pode usar o operador spread para mesclar esses objetos, e o valor do último objeto mesclado prevalecerá. Veja o exemplo:
const objeto1 = { a: 1, b: 2 }; const objeto2 = { b: 3, c: 4 }; const objetoMesclado = { ...objeto1, ...objeto2 }; console.log(objetoMesclado); // Saída: { a: 1, b: 3, c: 4 }Nesse exemplo, a propriedade
btem valores diferentes nos objetosobjeto1eobjeto2. Ao mesclar os objetos, o valor do objeto2, que é 3, prevalece. -
Mesclando objetos com propriedades aninhadas
Se você tiver objetos com propriedades aninhadas, pode usar o spread operator para mesclar esses objetos. Veja o exemplo a seguir:
const objeto1 = { a: { b: 1 } }; const objeto2 = { a: { c: 2 } }; const objetoMesclado = { ...objeto1, ...objeto2 }; console.log(objetoMesclado); // Saída: { a: { c: 2 } }Nesse exemplo, os objetos
objeto1eobjeto2têm a propriedadeacom propriedades aninhadas. Ao mesclar os objetos, a propriedadeadoobjeto2substitui completamente a propriedadeadoobjeto1.Portanto, ao mesclar objetos com propriedades aninhadas, é importante entender como as propriedades serão mescladas e se isso atende às suas necessidades.
Esses são apenas alguns exemplos de como mesclar objetos em JavaScript de forma simples, usando spread operator e o método assign(). Com essas técnicas, você poderá mesclar objetos de maneira eficiente e adequada às suas necessidades.
Espero que este guia completo e os exemplos tenham sido úteis para você entender como mesclar objetos em JavaScript. Experimente essas abordagens em seus projetos e aproveite os benefícios de ter objetos mesclados de maneira adequada e eficiente.
A Awari é a melhor plataforma para aprender sobre programação no Brasil.
Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.
Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.
Aprenda uma nova língua na maior escola de idioma do mundo!
Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.
+ 400 mil alunos
Método validado
Aulas
Ao vivo e gravadas
+ 1000 horas
Duração dos cursos
Certificados
Reconhecido pelo mercado
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas
Um curso técnico desenvolvedor de sistemas é uma formação...
Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira
Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma...
Curso Técnico de Desenvolvedor de Software: Aprenda as habilidades necessárias para se tornar um profissional de sucesso na área de desenvolvimento de software.
Resumo: Descubra os benefícios de fazer um curso técnico...
