【JavaScript】レスト構文、スプレッド構文

レスト構文

• 配列の最初の要素だけ別の定数/変数にして、残りを配列にする分割代入する書き方
• 左辺でドット3つが使用されている分割代入

const scores = [65, 37, 85, 69, 94];
const [first, ...others] = scores; // ドット3つを使った分割代入。

console.log(first); // 65
console.log(others); // [37, 85, 69, 94] ドット3つの後の文字列が定数名

スプレッド構文

• 右辺で使われる。要素を取り出して広げるための構文

const addScores = [99, 88];

const scores = [65, 37, 85, 69, 94, addScores]; // [65, 37, 85, 69, 94, [99, 88]]と、配列の中に配列ができてしまう]
const scores = [65, 37, 85, 69, 94, ...addScores]; // [65, 37, 85, 69, 94, 99, 88]と、並べることができる

console.log(scores);

const arr1 = [10, 20];
const arr2 = [30, 40];
const arr3 = [...arr1]; // 配列のコピー
const arr3 = [...arr1, ...arr2]; // まとめる

オブジェクトでの分割代入、レスト構文、スプレッド構文の動き

const scores = {
    a: 38,
    b: 90,
    c: 45,
};
const {a, b, c} = scores; // オブジェクトの場合、波括弧を使った分割代入。それぞれのキーの値を定数に代入

const scores = {
    a: 38,
    b: 90,
    c: 45,
};
const {a, ...others} = scores; // レスト構文
console.log(a); // 38
console.log(others); // {b: 90, c: 45} 残りはオブジェクト

const addScores = {
    d: 138,
    e: 290,
};

const scores = {
    a: 38,
    b: 90,
    c: 45,
    // addScores, // 配列の中に配列が入る
    ...addScores, // スプレッド構文。要素が取り出されて同じ配列に並ぶ
};

スプレッド構文を使ったコピー

• 配列/オブジェクトの場合、定数/変数に代入すると、参照することがコピーされるだけで、値自体がコピーされるわけではないので挙動に注意が必要
• 値自体をコピーするには、スプレッド構文を使う

const scores = [65, 37, 85];
const scoresBackup = scores; // これだと、参照することがコピーされただけ
const scoresBackup = [65, 37, 85]; // これだと、重複。保守性も良くない
const scoresBackup = [...scores]; // スプレッド構文

scores[0] = 99;
console.log(scores); // [99, 37, 85]
console.log(scoresBackup); // [65, 37, 85]