El operador de propagación, representado por ..., es una herramienta útil para crear nuevos objetos al fusionar 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

Cuando se utiliza con objetos, el operador de propagación copia todas las propiedades enumerables del objeto fuente en un nuevo objeto.

Sintaxis básica:

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

El operador de propagación permite crear una clonación superficial de un objeto. Esto es útil cuando se desea preservar el objeto original y trabajar con una copia modificada.

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 una copia de originalObject. Cualquier cambio realizado en clonedObject no afectará a originalObject. Por eso, clonedObject tiene tres propiedades y originalObject solo tiene dos.

Agregar o Modificar Propiedades

También se puede utilizar el operador de propagación para crear un nuevo objeto con propiedades adicionales o modificadas.

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 propagando las propiedades de waterBottle. Además, se añade la propiedad color y se sobrescribe la propiedad capacity.

Combinación de objetos

El operador de propagación puede combinar dos o más objetos en uno solo. Esto es útil al unir características, configuraciones, ajustes o datos de diferentes fuentes.

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 combinando las propiedades de apartmentFeatures y apartmentDetails.