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

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

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

Оператор розповсюдження

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

Ось базовий синтаксис використання оператора розповсюдження для створення об'єкта:

const newObject = { ...sourceObject }; 

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

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

Розглянемо, як клонувати об'єкт. Ми створимо новий об'єкт з такими ж властивостями та значеннями, як у вихідного об'єкта. Будь-які зміни, внесені до нового об'єкта, не впливають на оригінальний об'єкт.

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.