Teoría: spread y creación de nuevos objetos

Cuando trabajamos con objetos en JavaScript, a menudo necesitamos modificarlos sin alterar el original. La mejor forma de hacer esto es clonando y fusionando objetos. Aprenderemos cómo hacerlo con Object.assign() y el operador spread (...), una herramienta moderna que hace este proceso más fácil y legible.

Clonación y fusión con Object.assign()

Supongamos que tenemos un objeto que representa a un usuario:

const user = { name: 'Miguel', email: 'support@codica.io', age: 44 };
const data = { name: 'Miguel 2', age: 33 };

// Creamos un nuevo objeto combinando user y data
const copyOfUser = Object.assign({}, user, data);

console.log(copyOfUser);
// Resultado: { name: 'Miguel 2', email: 'support@codica.io', age: 33 }

Explicación

• Object.assign({}, user, data) crea un nuevo objeto.
• El primer argumento {} es el objeto destino, donde se copiarán las propiedades.
• Los objetos user y data se combinan en el nuevo objeto.
• Si hay propiedades duplicadas, se mantienen los valores del objeto que aparece más a la derecha, en este caso, data sobrescribe name y age.

Clonación con el operador spread(...)

Con la llegada de ES6, JavaScript introdujo una forma más concisa y legible para clonar y fusionar objetos: el operador spread (...).

const copyOfUser = { ...user };
console.log(copyOfUser);
// Resultado: { name: 'Miguel', email: 'support@codica.io', age: 44 }

Este código hace lo mismo que Object.assign({}, user), pero de forma más clara.

Fusión de objetos con spread

Si queremos combinar objetos y añadir nuevas propiedades, spread también nos ayuda.

const user = { name: 'Alejandro', age: 11 };
const newUser = { ...user, married: true, age: 25 };

console.log(newUser);
// Resultado: { name: 'Alejandro', married: true, age: 25 }

Reglas importantes al fusionar

⏬ Ejemplo:

const user = { name: 'Alejandro', age: 11 };
const newUser = { age: 25, married: true, ...user };

console.log(newUser);
// Resultado: { name: 'Alejandro', age: 11, married: true }

Como ...user está al final, sus valores sobrescriben los anteriores.

Si cambiamos el orden:

const newUser = { ...user, age: 25, married: true };

console.log(newUser);
// Resultado: { name: 'Alejandro', age: 25, married: true }

Ahora age: 25 sobrescribe age: 11 porque está más a la derecha.

Uso de múltiples operadores spread

Se pueden combinar varios objetos usando spread:

const user = { name: 'Alejandro', married: true, age: 25 };
const user2 = { name: 'Isabela', surname: 'Rodríguez' };

const mergedObject = { ...user, ...user2 };

console.log(mergedObject);
// Resultado: { name: 'Isabela', married: true, age: 25, surname: 'Rodríguez' }

Aquí, name: 'Isabela' sobrescribe name: 'Alejandro' porque user2 está a la derecha.

Si invertimos el orden:

const mergedObject2 = { ...user2, ...user };

console.log(mergedObject2);
// Resultado: { name: 'Alejandro', surname: 'Rodríguez', married: true, age: 25 }

Ahora name: 'Alejandro' sobrescribe name: 'Isabela'.

Uso flexible del operador spread

Podemos mezclar propiedades nuevas con múltiples objetos:

const user = { name: 'Isabela', age: 25, married: false };
const user2 = { name: 'Sebastián', surname: 'López' };

const newUser = { ...user, married: true, ...user2 };

console.log(newUser);
// Resultado: { name: 'Sebastián', age: 25, married: true, surname: 'López' }

Aquí,

• married: true sobrescribe married: false.
• name: 'Sebastián' sobrescribe name: 'Isabela'.

Con estas herramientas puedes trabajar con objetos de forma más flexible y eficiente en JavaScript.