スプレッド演算子によるオブジェクトのクローン作成とマージ

スプレッド演算子（...）は、既存のオブジェクトからプロパティをコピーして新しいオブジェクトを作成したり、複数のオブジェクトを結合したりする際に便利なツールです。スプレッド演算子を使うことで、以下の操作が可能です：

• オブジェクトのクローン作成
• プロパティの追加や変更
• 新しいオブジェクトの作成

ここでは、オブジェクトに対するスプレッド演算子の使い方に注目します。

スプレッド演算子

オブジェクトに対して使用すると、スプレッド演算子はソースオブジェクトのすべての列挙可能なプロパティを新しいオブジェクトにコピーします。

基本構文：

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 には3つのプロパティがあり、originalObject には2つだけです。

プロパティの追加や変更

スプレッド構文を使うことで、追加や変更されたプロパティを持つ新しいオブジェクトを作成できます。

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 プロパティが上書きされています。

オブジェクトのマージ

スプレッド構文は、2つ以上のオブジェクトを1つにまとめることが可能。異なるソースからの機能、設定、構成、データを結合する際に有用。

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 のプロパティをマージして作成されている。