これまで何となく使ってきたJavaScriptですが、本質的な部分をきちんと理解するため、名著と名高い「JavaScript本格入門」を使って改めて勉強しています。

そんな中、びっくしたのが「…」の便利さ。

斜め読みをしていたら、「…」だし、絶対見逃してしまいます。単なる省略を示すものと思っていたのは内緒の話で🤫🤫🤫

展開記法（スプレッド記法）

MDN Web Docsによると、「…」は、展開記法（スプレッド記法）と呼ぶようで、以下のように解説されています。

…obj

展開記法（スプレッド記法）は、式を複数の引数または複数の要素に展開して、それぞれ関数呼び出しまたは配列リテラルに渡します。

ちなみに、念のため英語版のMDN Web Docsを見てみると「Spread syntax」と記載されているので、自然に訳すなら、展開記法というより、スプレッド記法でしょうか？

展開記法（スプレッド記法）の利用例

解説だけだとよくわからないので、利用例を書いておくと、以下のように使います。

let data = [56, 40, 26, 82, 19, 17];
let [x0, x1, x2, ...other] = data;

console.log(x0); //結果：56
console.log(x1); //結果：40
console.log(x2); //結果：26
console.log(other); //結果：[82, 19, 17]

「えっ、こんなことができるの！」と驚きましたが、おそらく上のような使い方は現実にはあまりないでしょう。

衝撃を受けたのが以下の書き方。

function getMaxMin(...nums){
  return [Math.max(...nums), Math.min(...nums)];
}

let [max, min] = getMaxMin(10, 35, -5, 78, 0);
console.log(max); //結果：78
console.log(min); //結果：-5

分割代入を使うことで複数の戻り値を個別の変数に代入するこの書き方も今回とても参考になりましたが、それよりも「…nums」とすることで、配列の要素が増えても関数を変更することなく対応できることにびっくりしました。

例えば、配列の要素に「86」と「-22」を加えた場合、関数を一切変更せずに必要な結果が得られます。

function getMaxMin(...nums){
  return [Math.max(...nums), Math.min(...nums)];
}

let [max, min] = getMaxMin(10, 35, -5, 78, 0, 86, -22);
console.log(max); //結果：86
console.log(min); //結果：-22

この展開記法(スプレッド記法)は、ECMAScript2015によって可能となった書き方のようで、知っている人からすれば「今さら？」と思うかもしれません。

ただ、私のように趣味で独学をしている人間は、自ら気がつかないと誰も指摘をしてくれないので、1つ1つをきちんと理解して進めていかなければなりません。

しかし、JavaScript学習者の中で名著と名高い「JavaScript本格入門」、そしてPHP学習者にオススメされる「独習PHP 第4版」、どちらの本にも私自身お世話になっていますが、これらの著者は山田祥寛さんという方です。

1冊の本を書きあげるだけでも大変でしょうに、こんなに感謝される本を何冊も書かれていて、本当に尊敬します。