> Faqs > ¿Cuál es la mejor manera de hacer un merge sobre dos objetos en Javascript?

¿Cuál es la mejor manera de hacer un merge sobre dos objetos en Javascript?

Tengo dos objetos de Javascript.

const obj1 = {
    name: "pepe",
    age: 6,
    course: '1º primaria'
}

const obj2 = {
    course: '2º primaria',
    address: 'Av. JS, 2'
}

Deseo hacer un merge entre estos dos objetos. La operación debe devolverme un tercer objeto que es la suma de el obj1 y el obj2.

  • Tendrá todas las propiedades del objeto 1
  • Sumará todas las propiedades del objeto 2
  • Si las propiedades del objeto 2 existen en el objeto 1, entonces se sustituyen (se quedan las del objeto 2)

Según tengo entendido no existe una función de merge en Javascript, que lo haga de manera nativa. ¿Cuál sería la mejor manera de mezclar las propiedades de ambos objetos?

Respuestas

Efectivamente, no existe una manera de hacer merge a dos objetos Javascript, pero se puede conseguir muy fácilmente por medio del operador de propagación (spread).

Para tus dos objetos, sería tan sencillo como hacer lo siguiente:

const obj3 = {
  ...obj1,
  ...obj2
}

Como dices, se mezclarán las propiedades, siendo las propiedades de obj2 que sobreescribirán las de obj1.

Sergio
366 11 32 13
Gracias por la respuesta! veo que así es muy fácil, pero que existen otros métodos si no puedes usar versiones más nuevas de js. Me gustaría marcar como válidas también otras respuestas. Saludos existen varias formas de lograrlo, aunque las posibilidades son muchas más Quisiera darte mas ayuda, pero este portal es pésimo y no permite comentarios largos y así no se te puede ayudar mucho. Dame tu email y con gusto te apoyo. Para ayudar simplemente escribe una respuesta nueva a la pregunta, es bien sencillo y permite cualquier cantidad de texto. Justamente se limitan los comentarios porque no es un foro, sino una pregunta con sus respuestas.

La respuesta que apunta Sergio, con el operador spread en objetos, es muy buena y quizás sea la mejor. Sin embargo ese operador a nivel de objeto está disponible solo a partir de EcmaScript 2018, si no me equivoco, por lo que no todos los navegadores la podrían hacer.

Por eso es posible conseguir un resultado similar por medio de un algoritmo, que crea un objeto 3 y va recorriendo las propiedades del objeto 1 y el objeto 2 para hacer un merge, pero manual.

El código sería:

const obj1 = {
  name: "pepe",
  age: 6,
  course: '1º primaria'
}

const obj2 = {
  course: '2º primaria',
  address: 'Av. JS, 2'
}

let obj3 = {}
for (let i in obj1) {
  obj3[i] = obj1[i];
}
for(let i in obj2) {
  obj3[i] = obj2[i];
}

Esto funcionaría en todos los navegadores, incluso viejos Internet Explorer que andan por ahí.

Agustín
255 6 15 14
Muchas gracias Joaquín, este script se ve muy comprensible, seguro que funciona en todos los navegadores.

Hay una tercera manera de hacer el merge entre dos objetos Javascript, que funcionaría en todos los navegadores actuales.

let objeto_resultado_merge = Object.assign(obj1, obj2);

No considero navegador actual a IExplorer. La verdad no sé si esto funciona en ese navegador. Pero en todos los otros navegadores del mercado diría que funciona sin problemas.

Miguel Angel
3310 147 216 17
Gracias por la respuesta!

En JavaScript, puedes fusionar dos objetos utilizando el operador de propagación (...). Esta función usa el operador de propagación para conseguir el merge y devuelve el nuevo objeto mergeado.

function mergeObjects(obj1, obj2) {
    return { ...obj1, ...obj2 };
}

// Ejemplo de uso:
const objA = { a: 11, b: 22 };
const objB = { b: 33, c: 44 };

const resultado = mergeObjects(objA, objB);
console.log(resultado);  // Object { a: 11, b: 33, c: 44 }

Ten en cuenta que si ambos objetos tienen propiedades con el mismo nombre, el valor del segundo objeto (obj2) se sobrescribirá sobre el valor del primer objeto (obj1). Por lo tanto el orden con el que hagas el merge importa bastante.

Si quieres hacer un merge profundo (deep merge, es decir, también fusionar objetos anidados en lugar de sobrescribirlos), el proceso resulta un poco más complicado.

Si fuera el caso podrías hacerlo con una función como esta:

function deepMerge(obj1, obj2) {
    const result = { ...obj1 };

    for (const key in obj2) {
        if (obj2.hasOwnProperty(key)) {
            if (typeof obj2[key] === 'object' && obj2[key] !== null && obj1.hasOwnProperty(key) && typeof obj1[key] === 'object') {
                result[key] = deepMerge(obj1[key], obj2[key]);
            } else {
                result[key] = obj2[key];
            }
        }
    }

    return result;
}

// Ejemplo de uso:
const objComplejoA = { a: 1, b: { x: 10, y: 20 } };
const objComplejoB = { b: { y: 30, z: 40 }, c: 4 };

const result = deepMerge(objComplejoA, objComplejoB);
console.log(result);  // { a: 1, b: { x: 10, y: 30, z: 40 }, c: 4 }

Esta función no maneja arrays ni otras estructuras de datos más complejas. Para fusiones más complicadas, puedes quizás te recomendaría usar bibliotecas como Lodash, que ofrece una función _.merge() que puede manejar otras sitaciones más complejas que las que soluciona este deep merge.

Santiago
571 18 45 21