スプレッド構文とは

もっかReactを勉強中ですが、Reactではよくピリオドが3つ並ぶやつ（...）が使われているのを見ます。
これはスプレッド構文と呼ばれるものです。
私自身、今まであまり理解せず使っていましたが、自分用に少しまとめました。

1.基本事項確認

MDNのドキュメントで書いてあったものを要約すると

配列式や文字列などの反復可能オブジェクトを展開する

雰囲気はforループみたいなもので、展開して値を渡しているという感じですね。

2.使ってみる

MDNのドキュメントに載っていたものは

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
> 6

ここでは配列を展開して、関数の引数として渡しています。

展開したものがどういうものか見てみますと、

const numbers = [1, 2, 3];

console.log(numbers);
> Array [1, 2, 3]

console.log(...numbers);
> 1 2 3

展開した場合は、リストではなく、別のものになっていました。

オブジェクトの場合、

const numbers = { x: 1, y: 2 };

console.log(numbers);
> Object { x: 1, y: 2 }

console.log(...numbers);
> Error: Found non-callable @@iterator

console.log({...numbers});
> Object { x: 1, y: 2 }

console.log([...numbers]);
>Error: numbers is not iterable

オブジェクトを展開してそのまま表示しようとするとエラーになります。
オブジェクトを展開して配列にしようとしてもエラーになります。
また、オブジェクトを展開して再度オブジェクト化すると、元のオブジェクトと同じものができます。
オブジェクトの展開について、MDNのドキュメントを見ますと、

オブジェクト自体は反復可能ではありませんが、配列の中で使用したり、 map(), reduce(), assign() などの反復関数と共に使用したりすることで反復可能になります。
スプレッド演算子で結合する場合は、結合時に別の反復処理関数を使用することを前提としています。

どうやらオブジェクトは反復可能な状態にして使うようです。

エラー文を見ると配列に変換できないのは、iteratorを持たないかららしいです。この結果からオブジェクトを展開したものは配列を展開したものとデータの型が違うことがわかります。

その他、連結について、

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];

arr1 = [...arr2, ...arr1];
console.log(arr1);
> Array [3, 4, 5, 0, 1, 2]

連結も可能です。

また、調べたところ、※1.ある方がオブジェクトのネストのことも書かれてました。

const nest = {
  x: {"a1":1, "a2":2, "a3":3},
  y: [4, 5, 6]
};

console.log(...nest);
>Error: Found non-callable @@iterator

console.log(...nest.y);
> 4 5 6

なるほど。なるほど。

3.参考

※1.ネストのこと
https://qiita.com/akisx/items/682a4283c13fe336c547