JavaScriptのスプレッド構文(...)ことはじめ #JavaScript

スプレッド構文とは

ドットを3つ使用した構文(...)で、公式の回答では

関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。

長くてわかりにくいですが、スプレッド構文を使える場所が下記のようになっています。

関数呼び出し function(...hoge)
array [...hoge]
オブジェクト { ...hoge }

iterableオブジェクトって？

iterableは繰り返し可能なという意味の単語です。
繰り返しの処理(for)で扱えるオブジェクトかどうかということだと認識しています。
for文の中で使われるiはiteraterのiだという話は聞きますね。

そしてそのようなオブジェクトを展開してくれる構文がスプレッド構文だそうです。

具体例

先ほどの公式の例にログを追加したものです。
これでnumbersが展開されて、それぞれの引数x,y,zに入っていることがわかります。

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

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// 1, 2, 3, 6

便利な使い方

便利だから色々と使えますが、ここら辺の使い方を知っておくと便利だなと思いました。

html要素を取得して配列として扱う

odeList や HtmlCollection を配列のように操作する

このコードでは、特定のクラスの要素を取得して、それをスプレッド構文で展開して、配列として扱っています。
そのためそのままfilterメソッドがしようできて、取得したクラスの要素一覧から、特定の要素のみを抜き出すということができます。

const elems = document.getElementByClassName('checkboxClassName');
const filtered = [...elems].filter(el => el.checked && el.classList.contains('foo'));

// こうもかける
const filtered = [...document.getElementByClassName('checkboxClassName')].filter(el => el.checked && el.classList.contains('foo'));

連番の作成

ちょうど少し前にスプレッド構文を使用して連番を作成する記事がありました。
JavaScriptで[ 0, 1, 2, 3, 4 ]のような連番の配列を生成する方法

スプレッド構文を使わない場合はどのように書くか？

apply

Function.prototype.apply()を使うと同じようなことができるそう。

apply() メソッドは与えられた this 参照値と、配列 (もしくは配列風のオブジェクト) の形で与えられた引数を用いて関数を呼び出します。

console.log(sum.apply(null, numbers));

// スプレッド構文を使った方がシンプル
console.log(sum(...numbers));

参考

使い所については、この記事わかりやすかったです。
【JavaScript】スプレッド演算子の便利な使い方まとめ