Cómo combinar múltiples objetos en JavaScript

Javascript

En JavaScript puedes combinar múltiples objetos de diversas formas. Los métodos más utilizados son el operador spread ... y la función Object.assign().

Cómo copiar objetos con el operador spread

Para empezar utilizaremos el spread operator u operador de propagación para esta tarea, pues el el método más eficiente. Vamos a partir de que tenemos los siguiente objetos:

const marcas1 = {'a': 'Fiat', 'b': 'Seat'};
const marcas2 = {'c': 'Renault'};
const marcas3 = {'d': 'Ford'};

El operador spread se representa por tres puntos ... y sirve para separar los elementos del interior de los objetos. Para unir los objetos en uno solo tendríamos que hacer lo siguiente:

const marcasFinal = {...marcas1, ...marcas1, ...marcas1};

Si hacemos un console.log(marcasFinal) tendremos el siguiente resultado:

a: Fiat
b: Seat
c: Renault
d: Ford

El objeto marcasFinal que hemos obtenido es un nuevo objeto creado con copias de los otros objetos, por lo que podemos modificar los objetos marcas1, marcas2 y marcas3 sin miedo a que este se vea afectado. Sin embargo, si se incluyen objetos dentro de los objetos marcas1, marcas2 o marcas3, no se crearán copias de estos, sino que se copiará su referencia. Es decir, el operador spread ... solo creará copias de los elementos de nivel superior.

Aquí tienes un enlace al fiddle de ejemplo.

Cómo copiar objetos con Object.assign()

Otra posible forma de copiar objetos consiste en usar la función Object.assign(), que copiará todas las propiedades de un objeto a otro. En caso de que el objeto al que copias elementos ya contenga propiedades, las propiedades que se copien se agregarán a estas y, en caso de que tengan el mismo nombre, siempre se dará prioridad a las nuevas.

Aquí tienes un ejemplo:

const marcas1 = { a: 'Nissan', b: 'Fiat' };
const marcas2 = { b: 'Mercedes', c: 'Ford' };

Object.assign(marcas1, marcas2);

Si ahora hacemos un console.log del objeto marcas1, obtendremos lo siguiente:

a: Nissan
b: Mercedes
c: Ford

Como puedes ver, la propiedad b del objeto que hemos copiado, cuyo valor es Mercerces, tiene prioridad.

Aquí tienes un enlace al fiddle de ejemplo.

Y esto ha sido todo.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

2 comentarios en “Cómo combinar múltiples objetos en JavaScript

  1. De mucha ayuda muchas gracias!
    unico comentario hay un error en
    const marcasFinal = {…marcas1, …marcas1, …marcas1};
    deberia ser
    const marcasFinal = {…marcas1, …marcas2, …marcas3};

    Saludos!

Responder a Anonimo Cancelar la respuesta

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

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”