The spread operator, denoted by ..., is a helpful tool for creating new objects by merging and copying properties from existing objects. With the spread operator, we can perform the following tasks:

• Clone objects;
• Add or modify properties;
• Create new objects.

Let's focus on how to use the spread operator with objects.

Spread Operator

When used with objects, the spread operator copies all enumerable properties from the source object into a new object.

Basic syntax:

const newObject = { ...sourceObject }; 

• newObject: the new object we want to create;
• sourceObject: the source object whose properties we want to copy.

Cloning an Object

The spread operator allows us to create a shallow clone of an object. This is useful when we want to preserve the original object and work with a modified copy.

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'}

In this example, clonedObject is a new object that is clone of originalObject. Any changes made to clonedObject will not impact originalObject. That is why clonedObject has three properties and originalObject has only two.

Adding or Modifying Properties

You can also use the spread operator to create a new object with additional or modified properties.

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'}

In this example, extendedWaterBottle is created by spreading the properties of the waterBottle. Additionally, the color property is added, and the capacity property is overridden.

Merging Objects

The spread operator can merge two or more objects into one. This is helpful when combining features, settings, configurations, or data from different sources.

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'}

In this example, apartment is created by merging the properties from apartmentFeatures and apartmentDetails.