El operador de propagación, representado por ..., es una herramienta útil para crear nuevos objetos al combinar y copiar propiedades de objetos existentes. Con el operador de propagación, se pueden realizar las siguientes tareas:

• Clonar objetos;
• Agregar o modificar propiedades;
• Crear nuevos objetos.

A continuación, se explica cómo utilizar el operador de propagación con objetos.

Operador de propagación

El operador de propagación (...) puede utilizarse en varios contextos, pero uno de sus usos más comunes es la creación de nuevos objetos al expandir las propiedades de objetos existentes.

Esta es la sintaxis básica del operador de propagación para la creación de objetos:

const newObject = { ...sourceObject }; 

• newObject: El nuevo objeto que se desea crear;
• sourceObject: El objeto fuente cuyas propiedades se desean copiar.

Clonación de un objeto

Consideremos cómo clonar un objeto. Crearemos un nuevo objeto con las mismas propiedades y valores que el objeto fuente. Cualquier cambio realizado en el nuevo objeto no afecta al objeto original.

const originalObject = {
  name: "Diamond Kite",
  color: "purple",
};

// Create a cloned object by spreading the original object
const clonedObject = { ...originalObject }; // Cloning with the help of the spread operator

// Add a new property to the cloned object
clonedObject.size = "large"; // Adding a new property to the cloned object

console.log(originalObject); // Output: {name: 'Diamond Kite', color: 'purple'}
console.log(clonedObject); // Output: {name: 'Diamond Kite', color: 'purple', size: 'large'}

En este ejemplo, clonedObject es un nuevo objeto que es un clon de originalObject. Cualquier cambio realizado en clonedObject no afectará a originalObject. Por eso, clonedObject tiene tres propiedades y originalObject solo tiene dos.

Adición o modificación de propiedades

El operador de propagación también es útil para agregar o modificar propiedades en un nuevo objeto. Se pueden incluir propiedades adicionales o sobrescribir las existentes en el nuevo objeto.

const waterBottle = {
  brand: "HydroFlask",
  capacity: 32,
};

const extendedWaterBottle = {
  ...waterBottle,
  color: "blue",
  capacity: 24,
};

console.log(waterBottle); // Output: {brand: 'HydroFlask', capacity: 32}
console.log(extendedWaterBottle); // Output: {brand: 'HydroFlask', capacity: 24, color: 'blue'}

En este ejemplo, extendedWaterBottle se crea extendiendo las propiedades de waterBottle. Además, se añade la propiedad color y se sobrescribe la propiedad capacity.

Fusión de objetos

El operador de propagación puede utilizarse para fusionar las propiedades de varios objetos en un solo objeto nuevo. Esto resulta especialmente útil cuando se tienen múltiples fuentes de datos que combinar.

const apartmentFeatures = {
  size: "1200 square feet",
  bedrooms: 2,
  bathrooms: 2,
};

const apartmentDetails = {
  rent: 2000,
  location: "Downtown City",
};

const apartment = { ...apartmentFeatures, ...apartmentDetails };
console.log(apartment); // Output: {size: '1200 square feet', bedrooms: 2, bathrooms: 2, rent: 2000, location: 'Downtown City'}

En este ejemplo, apartment se crea fusionando las propiedades de apartmentFeatures y apartmentDetails.