スプレッド構文のできること、使い方
- 配列の展開と結合
- オブジェクトの展開と結合
- 配列のコピー
一般的な配列の代入
original = [ 1, 2 ]
のときに
copy = original
とした場合
bはaの参照を持っているため
original[0] = 100とすると
copy[0]の出力も100になる。
配列のコピー
const original = [1, 2, 3];
const copy = [...original];
console.log(copy);
このときに
original[0] = 100;
console.log(original);
console.log(copy);
//出力:original => [100, 2, 3]
//出力:copy => [1, 2, 3]
となる。
配列の結合
const array1 = [1, 2];
const array2 = [3, 4];
const combined = [...array1, ...array2];
console.log(combined);
//出力: [1, 2, 3, 4]
...array1はarray1を展開したものになるので
...array1自体は配列ではない。
なのでarray1自体をそのままイミュータブルな方式でコピーしたいだけの場合
const array1 = [1, 2];
const copy = [...array1];
にしなければいけない。
copy = ...array1
じゃないので注意。
逆にいうと全て展開されるため
複数の配列を同一の1次元配列にしたい場合も非常に便利。
配列に要素を追加したい場合
通常のやり方ではなくイミュータブルなコピーをしてからそこに追加するやり方
const original = [1, 2];
const newElement = [...original, 3, 4];
console.log(newElement);
//出力: [1, 2, 3, 4]
多分
const original = [1, 2];
const newElement = [...original];
newElement.push(3, 4);
としても同じだと思われる。
オブジェクトのコピー
const original = { a: 1, b: 2 };
const copy = { ...original };
console.log(copy);
//出力: { a:1, b:2 }
こちらもオブジェクトが展開されるので{}で囲んであげないといけない。
（オブジェクトが展開されるってのがいまいちしっくりこない）
オブジェクトの結合
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 }
console.log(merged);
//出力: { a: 1, b: 2, c: 3, d: 4 }
となる。
まとめ
スプレッド構文は展開を行うため、
それを元の形と同じ（配列なら{}など）に入れることで
イミュータブルなコピーを作成することができる。