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:

• Clonagem de objetos;
• Adição ou modificação de propriedades;
• Criação de novos objetos.

A seguir, será abordado como utilizar o operador spread com objetos.

Operador Spread

Quando utilizado com objetos, o operador spread copia todas as propriedades enumeráveis do objeto de origem para um novo objeto.

Sintaxe básica:

const newObject = { ...sourceObject }; 

• newObject: novo objeto a ser criado;
• sourceObject: objeto de origem cujas propriedades serão copiadas.

Clonagem de um Objeto

O operador spread permite criar uma cópia superficial (shallow clone) de um objeto. Isso é útil quando se deseja preservar o objeto original e trabalhar com uma cópia 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'}

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

Adicionando ou Modificando Propriedades

Também é possível utilizar o operador spread para criar um novo objeto com propriedades adicionais ou 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'}

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 mesclar dois ou mais objetos em um só. Isso é útil ao combinar funcionalidades, configurações, parâmetros ou dados de diferentes fontes.

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.