O operador spread, representado por ..., é uma ferramenta útil para criar novos objetos ao mesclar e copiar propriedades de objetos existentes. Com o operador spread, é possível realizar as seguintes tarefas:

• Clonar objetos;
• Adicionar ou modificar propriedades;
• Criar novos objetos.

Vamos focar em como utilizar o operador spread com objetos.

Operador Spread

O operador spread (...) pode ser utilizado em vários contextos, mas um dos usos mais comuns é para criar novos objetos ao espalhar as propriedades de objetos existentes.

Veja a sintaxe básica do operador spread utilizado para criação de objetos:

const newObject = { ...sourceObject }; 

• newObject: O novo objeto que desejamos criar;
• sourceObject: O objeto de origem cujas propriedades queremos copiar.

Clonando um Objeto

Vamos considerar como clonar um objeto. Será criado um novo objeto com as mesmas propriedades e valores do objeto de origem. Quaisquer alterações feitas no novo objeto não afetam o 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'}

Neste exemplo, clonedObject é um novo objeto que é um clone de originalObject. Quaisquer alterações feitas em clonedObject não impactam originalObject. Por isso, clonedObject possui três propriedades e originalObject possui apenas duas.

Adicionando ou Modificando Propriedades

O operador spread também é útil para adicionar ou modificar propriedades em um novo objeto. É possível incluir propriedades adicionais ou sobrescrever as existentes no novo 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'}

Neste exemplo, extendedWaterBottle é criado espalhando as propriedades de waterBottle. Além disso, a propriedade color é adicionada e a propriedade capacity é sobrescrita.

Mesclando Objetos

O operador spread pode ser utilizado para mesclar as propriedades de múltiplos objetos em um novo objeto. Isso é especialmente útil quando há várias fontes de dados para 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'}

Neste exemplo, apartment é criado ao mesclar as propriedades de apartmentFeatures e apartmentDetails.