6

Possuo dois objetos no JavaScript, com os seguintes dados:

const objeto1 = {
    prop1: 'a', 
    prop2: 'b', 
    prop3: 'c'
}
const objeto2 = {
    prop4: 'd', 
    prop5: 'e', 
    prop6: 'f'
}

Eu queria pegar essas propriedades todas e unir em um mesmo objeto, e cheguei nisso através do seguinte código:

const objeto3 = objeto1;
objeto3.prop4 = objeto2.prop4;
objeto3.prop5 = objeto2.prop5;
objeto3.prop6 = objeto2.prop6;

Mas eu vi que, em arrays, eu posso fazer usando Array.prototype.concat(), e pensei que agora está fácil, mas se o objeto tivesse mais propriedades, me causaria problemas. Existe uma forma de concatenar esses dois objetos de forma simplificada?

3
  • 2
    Tu consegue isso utilizando o Array.prototype.concat() Commented 15/01/2020 às 17:24
  • tentei, mas me rendeu esse erro: Uncaught TypeError: objeto1.concat is not a function at <anonymous>:1:25 Commented 15/01/2020 às 17:25
  • Pode fornecer um Exemplo Mínimo, Completo e Verificável de como fez essa concatenação que gerou erro? Commented 15/01/2020 às 17:26

1 Resposta 1

9

Existem diversas formas de se fazer isso. Abaixo listarei três casos diferentes.

Utilizar a sintaxe de espalhamento (spread operator)

Se você estiver em um ambiente que a suporte, você pode usar a sintaxe de espalhamento, também conhecida como spread operator, em objetos literais. Funciona assim:

const obj1 = { foo: 'A', bar: 'B' };
const obj2 = { baz: 'C' /* ... */ };

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

console.log(newObj);

Basicamente, no exemplo acima, estamos criando um novo objeto, newObj, através da sintaxe de espalhamento. Basicamente, com isso:

   { ...obj1, ...obj2 }
// ↑
// Entenda isso como a criação de um novo objeto. Por isso `obj1` e `obj2` não
// são alterados.

Estamos programando a criação de um novo objeto, cujas propriedades derivar-se-ão do espalhamento de obj1 e obj2. Nesse caso, obj1 e obj2 não terão suas propriedades modificadas, já que estamos criando uma nova literal.

Note que você pode criar um objeto com as propriedades espalhadas e novas propriedades também. Assim:

const oldObj = {
  foo: 'A'
};

const newObj = {
  ...oldObj,
  bar: 'B',
  baz: 'C' 
};

console.log(newObj);

Object.assign

Você também pode utilizar o Object.assign, que é um pouco mais suportado que a sintaxe de espalhamento. Assim:

const obj1 = { foo: 'A', bar: 'B' };
const obj2 = { baz: 'C' /* ... */ };

const newObj = Object.assign({}, obj1, obj2);

console.log(newObj);

Note que no método assign, eu coloquei uma nova literal de objeto no primeiro argumento. Fiz isso porque esse método irá mutar a referência que você passar no primeiro argumento:

const obj1 = { foo: 'A', bar: 'B' };
const obj2 = { baz: 'C' /* ... */ };

Object.assign(obj1, obj2);

console.log('Objeto 1', obj1);
console.log('Objeto 1', obj2);

A própria documentação do Object.assign nomeia o primeiro argumento como target. Isso porque, conforme expliquei acima, a referência que você passar para ele será alterada. Por isso é útil passar um novo objeto se você não quiser que isso aconteça.

Outras implementações (para ambientes antigos)

Se você quiser dar suporte a ambientes que não tenham esses novos recursos, introduzidos em especificações recentes do ECMAScript, ainda há formas (um pouco menos triviais) de fazer isso. Uma delas é usar um laço for..in, que itera sobre as propriedades enumeradas de um objeto. Então, pode fazer algo assim:

// Irá retornar um **novo** objeto, a partir da união dos argumentos.
function merge() {
  'use strict';

  // Note que criamos um novo objeto. Assim nenhum objeto
  // passado será alterado. :)
  var newObj = {};

  for (var i = 0; i < arguments.length; i++) {
    // `arguments`:
    var currentObj = arguments[i];

    for (var key in currentObj) {
      // `hasOwnProperty`:
      if (Object.prototype.hasOwnProperty.call(currentObj, key)) {
        newObj[key] = currentObj[key];
      }
    }
  }

  return newObj;
}

var obj1 = { foo: 'A', bar: 'B' };
var obj2 = { baz: 'C' };
var obj3 = { qux: 'D' };

var newObj = merge(obj1, obj2, obj3);

console.log(newObj);

A implementação anterior da função merge usa alguns recursos da linguagem que são muito pouco usados:

  • O arguments object foi usado, já que a função merge foi implementada visando aceitar múltiplos argumentos (como merge(a, b, c, d, ... n)). Desse modo, utilizei arguments, já que recursos modernos como o spread operator, que são usados para fazer isso em ambientes que suportam novas especificações do ECMAScript, não estão disponíveis.
  • O método hasOwnProperty foi utilizada para garantir que somente propriedades do objeto passado sejam unidas. Isso excluirá propriedades herdadas pelo prototype.
  • A declaração var foi usada, já que let e const não estariam disponíveis nesse ambiente hipotético. A diretiva 'use strict' também foi utilizada nesse sentido.
5
  • 3
    Por que o negativo? T_T Commented 15/01/2020 às 17:29
  • 3
    Também gostaria de saber? Commented 15/01/2020 às 17:32
  • 2
    Uma resposta excelente com poucos votos é inacreditável
    – novic
    Commented 16/01/2020 às 3:26
  • @LuizFelipe deve ser perseguição por alguma pergunta que tenha fechado. Já passei por isso. Commented 16/01/2020 às 19:03
  • Provavelmente. É a triste realidade que eventualmente temos que enfrentar por aqui. :P Commented 16/01/2020 às 19:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .