Оператор розширення, позначений як ..., є корисним інструментом для створення нових об'єктів шляхом об'єднання та копіювання властивостей з існуючих об'єктів. За допомогою оператора розширення можна виконувати такі завдання:

• Клонування об'єктів;
• Додавання або змінення властивостей;
• Створення нових об'єктів.

Розглянемо, як використовувати оператор розширення з об'єктами.

Оператор розширення

Під час використання з об'єктами оператор розширення копіює всі перелічувані властивості з вихідного об'єкта у новий об'єкт.

Базовий синтаксис:

const newObject = { ...sourceObject }; 

• newObject: новий об'єкт, який потрібно створити;
• sourceObject: вихідний об'єкт, властивості якого потрібно скопіювати.

Клонування об'єкта

Оператор розширення дозволяє створити поверхневу копію (shallow clone) об'єкта. Це корисно, коли потрібно зберегти оригінальний об'єкт і працювати з модифікованою копією.

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

У цьому прикладі clonedObject — це новий об'єкт, який є копією originalObject. Будь-які зміни, внесені до clonedObject, не вплинуть на originalObject. Саме тому clonedObject має три властивості, а originalObject — лише дві.

Додавання або зміна властивостей

Оператор розгортання також можна використовувати для створення нового об'єкта з додатковими або зміненими властивостями.

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

У цьому прикладі extendedWaterBottle створюється шляхом розгортання властивостей об'єкта waterBottle. Додатково додається властивість color, а властивість capacity перевизначається.

Об'єднання об'єктів

Оператор розповсюдження дозволяє об'єднувати два або більше об'єктів в один. Це корисно при комбінуванні функціоналу, налаштувань, конфігурацій або даних з різних джерел.

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

У цьому прикладі об'єкт apartment створюється шляхом об'єднання властивостей з apartmentFeatures та apartmentDetails.