<aside> 💡 ...とドット3つ書くやつ。配列を展開したり、分割代入時にまとめてくれたりする。 以下では配列の場合で説明しているが、オブジェクトでも同じように使える!

</aside>

【配列の展開】

...とドット3つ書いてから配列名を記述することで、配列の値を順番に処理して展開(表示)してくれる

const arr1 = [1, 2];
console.log(arr1);
→[1, 2]

console.log(...arr1);
→1 2

より分かりやすい例)

const arr1 = [1, 2];
const sumFunc = (num1, num2) => console.log(num1 + num2);

sumFunc(arr1[0], arr1[1]);
→3

sumFunc(...arr1);
→3

sumFunc関数を使って、arr1の配列の要素を足すように指示するとき、...を使えば[0]とか書かずに、ドットと配列名さえ書けばOKになる!便利!!


【配列をまとめる】

まとめる時は、分割代入と一緒に使われることが多い

ドットさえつければOK。名前は任意でつけられる。

const arr2 = [1, 2, 3, 4, 5];
const [num1, num2, ...arr3] = arr2;

console.log(num1);
→1
console.log(num2);
→2
console.log(arr3);
→(3)[3, 4, 5]

残りの3, 4, 5が一つにまとめられた。(=レスト構文

レスト構文:特定の要素だけ個別の定数に入れて、残りは配列のままにしておきたい。なんて場合に使える。

実際に出力するとこんな感じになる。