Cómo combinar dos objetos en JavaScript: los 5 mejores métodos

Introducción: por qué la fusión de objetos es el dolor de cada desarrollador de JavaScript

Imagine: está trabajando en una aplicación y necesita combinar datos de dos fuentes diferentes. Por ejemplo, tiene una configuración básica de usuario de la base de datos y ajustes provenientes del frontend. ¿Cómo unirlos sin dolor ni sufrimiento? Precisamente esta pregunta — «How can I merge properties of two JavaScript objects?» — ha acumulado miles de visitas en Stack Overflow. Y con razón: la fusión de objetos en JavaScript esconde numerosas trampas.

En este artículo, analizaremos todas las formas populares de combinar objetos en JS: desde el clásico Object.assign() hasta el moderno operador spread. Aprenderá cómo copiar en profundidad estructuras anidadas, evitar la mutación de los datos originales y elegir el método correcto para su tarea. ¡Allá vamos!

El problema: ¿qué significa «combinar las propiedades de dos objetos»?

Cuando hablamos de «merge objects JavaScript», nos referimos a crear un nuevo objeto que contenga todas las propiedades de los objetos originales. Si se encuentran claves iguales, el valor del segundo objeto «sobrescribe» el valor del primero.

Supongamos que tenemos dos objetos:

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

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

Después de la fusión de objetos JS queremos obtener:

{  name: 'Ana',  age: 29,       // valor actualizado  city: 'Moscú',  job: 'Desarrollador'  // nueva propiedad}

Parece sencillo. Pero el diablo está en los detalles: objetos anidados, arrays, mutación del original y rendimiento.

Método 1: Object.assign() — el clásico de toda la vida

El método Object.assign() es la forma más antigua y probada de combinar objetos en JavaScript. Copia las propiedades enumerables propias de uno o más objetos fuente a un objeto destino.

Sintaxis

Object.assign(target, ...sources)

Importante: el primer argumento es el objeto destino, que será modificado. Todos los siguientes son fuentes de propiedades.

Ejemplo de fusión

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

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

Observe: pasamos un objeto vacío {} como destino. Esto garantiza que los objetos originales no sean mutados — la clonación de objetos JS se realiza correctamente.

La trampa: copia superficial

Object.assign() solo realiza una copia superficial (shallow copy). Si tiene objetos anidados, se copiarán por referencia:

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

const merged = Object.assign({}, obj1, obj2);merged.data.value = 999;console.log(obj1.data.value); // 999 — ¡mutación del objeto original!

Para una fusión profunda se necesitan otros enfoques, de los que hablaremos más adelante.

Método 2: Operador Spread — la elegancia de ES6

Con la llegada de ES6, el operador spread de JavaScript (los tres puntos ...) se ha convertido en la forma más popular de combinar propiedades de objetos. Es conciso, legible y no requiere llamar a un método.

Sintaxis

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

Ejemplo

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

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