Como combinar dois objetos em JavaScript: 5 melhores métodos

Introdução: por que a fusão de objetos é a dor de cabeça de todo desenvolvedor JavaScript

Imagine: você está trabalhando em um aplicativo e precisa combinar dados de duas fontes diferentes. Por exemplo, você tem uma configuração básica de usuário do banco de dados e as configurações vindas do frontend. Como juntá-las sem dor e sofrimento? É exatamente essa pergunta — «How can I merge properties of two JavaScript objects?» — que reuniu milhares de visualizações no Stack Overflow. E não é à toa: a fusão de objetos em JavaScript esconde muitas armadilhas.

Neste artigo, vamos abordar todas as formas populares de combinar objetos em JS: desde o clássico Object.assign() até o moderno operador spread. Você aprenderá como copiar profundamente estruturas aninhadas, evitar a mutação dos dados originais e escolher o método certo para sua tarefa. Vamos lá!

O problema: o que significa «combinar propriedades de dois objetos»?

Quando falamos em «merge objects JavaScript», nos referimos à criação de um novo objeto que contém todas as propriedades dos objetos originais. Se houver chaves iguais — o valor do segundo objeto «sobrescreve» o valor do primeiro.

Suponha que existam dois objetos:

const user = {  name: 'Ana',  age: 28,  city: 'Moscou'};

const updates = {  age: 29,  job: 'Desenvolvedor'};

Após a fusão de objetos JS, queremos obter:

{  name: 'Ana',  age: 29,       // valor atualizado  city: 'Moscou',  job: 'Desenvolvedor'  // nova propriedade}

Parece simples. Mas o diabo está nos detalhes: objetos aninhados, arrays, mutação do original e desempenho.

Método 1: Object.assign() — o clássico e confiável

O método Object.assign() é a forma mais antiga e testada de combinar objetos em JavaScript. Ele copia as propriedades próprias enumeráveis de um ou mais objetos de origem para um objeto de destino.

Sintaxe

Object.assign(target, ...sources)

Importante: o primeiro argumento é o objeto de destino, que será modificado. Todos os seguintes são fontes de propriedades.

Exemplo de fusão

const user = { name: 'Ana', age: 28 };const updates = { age: 29, job: 'Desenvolvedor' };

const merged = Object.assign({}, user, updates);console.log(merged);// { name: 'Ana', age: 29, job: 'Desenvolvedor' }

Observe: passamos um objeto vazio {} como target. Isso garante que os objetos originais não sejam mutados — a clonagem de objetos JS é feita corretamente.

A armadilha: cópia superficial

Object.assign() realiza apenas uma cópia superficial (shallow copy). Se você tiver objetos aninhados, eles serão copiados por referência:

const obj1 = { data: { value: 10 } };const obj2 = { info: 'teste' };

const merged = Object.assign({}, obj1, obj2);merged.data.value = 999;console.log(obj1.data.value); // 999 — mutação do objeto original!

Para uma fusão profunda, serão necessárias outras abordagens, que discutiremos a seguir.

Método 2: Operador Spread — a elegância do ES6

Com o advento do ES6, o operador spread JavaScript (reticências ...) tornou-se a forma mais popular de combinar propriedades de objetos. Ele é conciso, legível e não requer chamada de método.

Sintaxe

const merged = { ...obj1, ...obj2 };

Exemplo

const defaults = { theme: 'light', lang: 'pt', showSidebar: true };const userPrefs = { theme: 'dark', fontSize: 16 };

const settings = { ...defaults, ...userPrefs };console.log(settings);// { theme: 'dark', lang: 'pt', showSidebar: true, font