Combinar propiedades de dos objetos dinámicamente en JavaScript

En este tutorial, veremos cómo fusionar dos objetos dinámicamente en JavaScript, usando el operador de extensión y el método Object.assign(), con ejemplos prácticos.

Introducción

En JavaScript, un objeto se define como una colección de pares clave-valor. Un objeto también es un tipo de datos no primitivo.

A menudo necesitará combinar objetos en uno solo que contenga todas las propiedades individuales de sus partes constituyentes. Esta operación se llama fusión. Las dos formas más comunes de hacer esto son:

  • Usando el operador de propagación (...)
  • Usando el método Object.assign()

En este tutorial, veremos cómo fusionar dos objetos dinámicamente en JavaScript.

Después de eso, cubriremos la diferencia entre combinación superficial y combinación profunda, porque es esencial para comprender completamente la combinación de objetos.

Combinar objetos de JavaScript con el operador de extensión

Podemos fusionar diferentes objetos en uno usando el operador de propagación (...). Este es también el método más común de fusionar dos o más objetos.

Este es un enfoque inmutable para fusionar dos objetos, es decir, los dos objetos iniciales que se usan para hacer el fusionado no cambian de ninguna manera debido a los efectos secundarios. Al final, tienes un nuevo objeto, construido a partir de los dos, mientras todavía están intactos.

Vamos a crear dos objetos y fusionarlos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const person = {
    name: "John Doe",
    age: 24
}
const job = {
    title: "Full stack developer",
    location: "Remote"
}

const employee = {...person, ...job};

console.log(employee);

Esto resulta en:

1
2
3
4
5
6
{
    name: "John Doe", 
    age: 24, 
    title: "Full stack developer", 
    location: "Remote"
}

Nota: Si hay propiedades comunes entre estos dos objetos, como que ambos tengan una ubicación, las propiedades del segundo objeto (trabajo) sobrescribirán las propiedades del primer objeto (persona ):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const person = {
    name: "John Doe",
    location: "Remote"
}
const job = {
    title: "Full stack developer",
    location: "Office"
}
const employee = {...person, ...job}

console.log(employee);

Esto resulta en:

1
2
3
4
5
{
  name: 'John Doe',
  location: 'Office',
  title: 'Full stack developer'
}

Si se fusionan más de dos objetos, el objeto más a la derecha anula los de la izquierda.

Combinar objetos JavaScript usando Object.assign()

Otra forma común de fusionar dos o más objetos es usar el método integrado Object.assign():

1
Object.assign(target, source1, source2, ...);

Este método copia todas las propiedades de uno o más objetos origen en el objeto destino. Al igual que con el operador de propagación, al sobrescribir, se usa el valor más a la derecha:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const person = {
    name: "John Doe", 
    age: 24,
    location: "U.S.A"
}
const job = {
    title: "Full stack developer",
    location: "Remote"
}

const employee = Object.assign(person, job);

console.log(employee);

Ejecutar el código anterior dará como resultado el siguiente resultado:

1
2
3
4
5
6
{
    name: "John Doe", 
    age: 24,
    location: "Remote",
    title: "Full stack developer"
}

Una vez más, tenga en cuenta que el objeto al que hace referencia empleado es un objeto completamente nuevo y no está vinculado de ninguna manera a los objetos a los que hace referencia persona o trabajo.

Fusión superficial frente a fusión profunda

En el caso de una combinación superficial, si una de las propiedades de un objeto de origen es otro objeto, el objeto de destino contiene la referencia al mismo objeto que existe en el objeto de origen. En este caso no se crea un nuevo objeto.

Modifiquemos el objeto ‘persona’ anterior y hagamos de ‘ubicación’ un objeto por sí mismo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
const person = {
    name: "John Doe",
    location: {
        city: "London", 
        country: "England"
    }
}
const job = {
    title: "Full stack developer"
}

const employee = {...person, ...job};

console.log(employee.location === person.location);

Esto resulta en:

1
true

Podemos ver que la referencia al objeto ubicación en los objetos persona y empleado es la misma. De hecho, tanto el operador de propagación (...) como Object.assign() realizan una fusión superficial.

JavaScript no tiene compatibilidad con combinación profunda lista para usar. Sin embargo, hay módulos y bibliotecas de terceros que lo admiten, como [_.unir] (https://www.npmjs.com/package/lodash.merge) de Lodash.

Conclusión

En este tutorial, hemos echado un vistazo a cómo fusionar dos objetos en JavaScript. Hemos explorado el operador de propagación (...) y el método Object.assign(), que realizan una combinación superficial de dos o más objetos, en uno nuevo, sin afectar las partes constituyentes .