Combinar objetos con JavaScript - Mezclar propiedades

Combinar objetos con JavaScript

En este post de programación con JS vamos a ver cómo mezclar dos objetos, de modo que combinemos sus propiedades y tengamos un nuevo objeto.

Veremos dos maneras de mezclar las propiedades de un objeto con JavaScript: con el operador spread y con una función manual.

Combinando objetos en JavaScript

Lo que tenemos que hacer es declarar un objeto vacío, ahí almacenaremos las propiedades de los objetos que vamos a combinar. Luego recorremos cada clave de los objetos y la vamos guardando (junto con su valor) en el nuevo objeto, así de simple.

Por cierto, en caso de que haya claves repetidas se van a mantener las propiedades del segundo objeto.

Con función manual

Si quieres hacerlo manualmente con una función puedes hacerlo como se ve a continuación:

const combinarObjetos = (objeto1, objeto2) => {
    const resultado = {};
    for (const clave of Object.keys(objeto1)) {
        resultado[clave] = objeto1[clave];
    }
    for (const clave of Object.keys(objeto2)) {
        resultado[clave] = objeto2[clave];
    }
    return resultado;
}

Con esto puedes mezclar cualquier cantidad de objetos en JavaScript, ya que puedes combinar el resultado con otro objeto.

Usando operador de propagación

Una manera más elegante es usar el spread operator u operador de propagación que se representa como ....

Éste operador es relativamente nuevo en JS y permite varias cosas como enviar los elementos de un arreglo como argumentos a una función o combinar objetos.

El operador “desempaca” los elementos. Entonces podemos combinar dos objetos así:

const combinadoConSpread = { ...objeto1, ...objeto2 };

Es más simple y elegante. Además, podemos combinar cualquier cantidad de objetos. Recuerda que la misma regla aplica: si existen claves repetidas, se mantendrán las del último objeto.

Poniendo todo junto

Ya te enseñé a colocar las propiedades de dos objetos en uno solo. Ahora te mostraré el código completo. Al final puedes usar el método que tú prefieras:

Combinar objetos con JavaScript - Mezclar propiedades
Combinar objetos con JavaScript – Mezclar propiedades

El código (que se puede ejecutar en Node y en el navegador) queda así:

// https://parzibyte.me/blog
const combinarObjetos = (objeto1, objeto2) => {
    const resultado = {};
    for (const clave of Object.keys(objeto1)) {
        resultado[clave] = objeto1[clave];
    }
    for (const clave of Object.keys(objeto2)) {
        resultado[clave] = objeto2[clave];
    }
    return resultado;
}
const objeto1 = {
    nombre: "Luis",
    mascotas: ["Maggie", "Panqué", "Grim"]
};

const objeto2 = {
    web: "https://parzibyte.me/blog",
    nombre: "Parzibyte",
};

const combinado = combinarObjetos(objeto1, objeto2);
const combinadoConSpread = { ...objeto1, ...objeto2 };
console.log("Combinado con función:");
console.log(combinado);
console.log("Combinado con spread operator:");
console.log(combinadoConSpread);

Por aquí te dejo más tutoriales de JavaScript.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

1 comentario en “Combinar objetos con JavaScript”

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *