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.
Array.prototype.concat()
Uncaught TypeError: objeto1.concat is not a function at <anonymous>:1:25