分割代入・スプレッド構文

はじめに
分割代入
- 例
- 活用方法
スプレット構文の応用
- オブジェクトでも利用可能
=演算子でコピーしない
参考
続く…
- コメント

はじめに

本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。

書籍に記載されている内容を順序立ててまとめるというよりは、整理しておきたい周辺の知識と深ぼった内容を雑多に書いています。

今回は超基礎的な内容です、、

分割代入

JavaScriptにおけるオブジェクトの分割代入（Destructuring Assignment）は、オブジェクトのプロパティを個別の変数として取り出すための構文です。

例

分割代入は以下のような構文で使用されます

const { プロパティ名1, プロパティ名2, ... } = オブジェクト;

以下のようなオブジェクトがあるとします

const person = {
  name: 'John',
  age: 30,
  city: 'Tokyo',
};

分割代入を使用すると、personオブジェクトからnameとageプロパティを取り出すことができます。

const { name, age } = person;

console.log(name); // 'John'
console.log(age); // 30

分割代入では、オブジェクトのプロパティ名と同じ名前の変数を宣言することで、オブジェクトから対応するプロパティの値が取り出され、変数に割り当てられます。

活用方法

分割代入は、オブジェクトから複数のプロパティを取り出す際に特に便利です。

一度に複数の変数に代入することができ、コードの可読性を向上させることができます。

また、オブジェクトの名前が長い場合、可読性が低下するのに対し、分割代入を行うことで毎回オブジェクト名を書かずに済みます。

const longObjectName = {
  name: 'Value 1',
  // 他のプロパティが続く...
};

// 長い
console.log(longObjectName.name); // 'Value 1'

// 分割代入を行う場合
const { name } = longObjectName;

// オブジェクトを毎回書かなくていい
console.log(name); // 'Value 1'

参考: 分割代入 (MDN Web Docs)

スプレット構文の応用

スプレット構文は配列を展開したりまとめる場合に有用ですが、要素のコピーや結合にも使用することができます。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

// 配列の要素を展開して新しい配列を作成
const newArray = [...array1, ...array2];
console.log(newArray); // [1, 2, 3, 4, 5, 6]

// 配列の要素をコピーして新しい配列を作成
const copiedArray = [...array1];
console.log(copiedArray); // [1, 2, 3]

オブジェクトでも利用可能

const object1 = { foo: 'bar', baz: 'qux' };
const object2 = { hello: 'world' };

// オブジェクトのプロパティを展開して新しいオブジェクトを作成
const newObject = { ...object1, ...object2 };
console.log(newObject); // { foo: 'bar', baz: 'qux', hello: 'world' }

// オブジェクトのプロパティをコピーして新しいオブジェクトを作成
const copiedObject = { ...object1 };
console.log(copiedObject); // { foo: 'bar', baz: 'qux' }

=演算子でコピーしない

オブジェクトと配列を=演算子でコピーすると、参照が引き継がれるため、元のオブジェクトや配列と同じ参照先を共有します。

そのため、一方を変更するともう一方も影響を受けます。

copiedObject1はoriginalObjectを直接参照しているためプロパティを追加すると双方のオブジェクトに影響があります。

// オブジェクトのコピー

const originalObject = { name: 'John', age: 30 };

// =演算子でオブジェクトをコピー
const copiedObject1 = originalObject;
copiedObject1.age = 40;

// スプレッド構文でオブジェクトをコピー
const copiedObject2 = { ...originalObject, age: 50 };

console.log(originalObject); // { name: 'John', age: 40 }
console.log(copiedObject1); // { name: 'John', age: 40 }
console.log(copiedObject2); // { name: 'John', age: 50 }

配列でも同様でcopiedArrayはoriginalArrayを直接参照しているためどちらかに要素を追加すると双方のオブジェクトに影響があります。

// 配列のコピー

const originalArray = [1, 2, 3];

// =演算子で配列をコピー
const copiedArray1 = originalArray;
copiedArray1.push(4);

// スプレッド構文で配列をコピー
const copiedArray2 = [...originalArray, 5];

console.log(originalArray); // [1, 2, 3, 4]
console.log(copiedArray1); // [1, 2, 3, 4]
console.log(copiedArray2); // [1, 2, 3, 5]