JSのスリードット(…) スプレッド構文とレスト構文の違いを分かりやすく解説！

Reactで開発をしていて。三つのドット（英語ではスリードット）が書かれてるコードがあって、

よく分からなかったので調べてみることにした。

どうやらスリードット（…）記述法には、

スプレッド構文とレスト構文という同じ演算子を使うやり方があるらしいということが分かった。

レスト構文

レスト構文というのは、関数の引数に複数の値がランダムな数入ってくるのを配列で受け取れる機能があるらしくて、複数の値をまとめるという意味合いで使われるらしい。

function outputArgs(...args) {
  for(const a of args){
    console.log(a);
  }
}
outputArgs('a', 'b', 'c', 'd');
// 出力 a  b  c  d

Qiita

【JavaScript】「スプレッド構文」と「レスト構文」について - Qiita

https://qiita.com/kamijodev/items/89543ca267ac9ad51529#可変長引数の関数

はじめにどちらも同じ演算子「...」を利用する為混乱するかもしれないので初めに簡単に違いを説明すると。スプレッド構文レスト構文展開集約だと個人的には考えていますです。これを踏まえた上...

でも実は、関数に複数を沢山突っ込んでもJavaScriptでは受け取れる方法があります。

それは、argumentという機能を使うと実現できるんだけれども、

var f = function(){
    for(var i = 0; i < arguments.length; ++i){ // 関数実行時に引数として渡されたものは『arguments』で参照できます。
        console.log(arguments[i]);
    }
};
 
// 引数に渡したもの全てをそれぞれ出力します。
f(0);
f(0, 1);
f(0, 1, 2);
f(0, 1, 2, 3);

wp-p.info

https://wp-p.info/tpl_rep.php?cat=js-application&fl=r12

こういう風にすると、arguments[0] とかで引数の一番最初の値を取れます。

でも、これだと結構、不便なのです。

なぜなら、argumentsは配列ではないので、Arrayの機能が使えないので、従来はArrayに直さなければなりませんでした。

// 残余引数の登場以前は、"arguments" を普通の配列に変換するには以下のようにしていました。

function f(a, b) {

  let normalArray = Array.prototype.slice.call(arguments)
  // -- or --
  let normalArray = [].slice.call(arguments)
  // -- or --
  let normalArray = Array.from(arguments)

  let first = normalArray.shift()  // OK、最初の引数が得られる
  let first = arguments.shift()    // エラー (arguments は通常の配列ではない)
}

// 残余引数を使ってふつうの配列へのアクセスが得られるようになりました

function f(...args) {
  let normalArray = args
  let first = normalArray.shift() // OK、最初の引数が得られる
}

developer.mozilla.org

残余引数 - JavaScript | MDN

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters#from_arguments_to_an_array

残余引数構文により、不定数の引数を配列として表すことができます。

これを、レスト構文では簡単に解決できるようになったんですね。

スプレッド構文

スプレッド構文とは、スリードット演算子を同じように使いますが、レスト構文とは全然逆でして、

レスト構文が複数の値を配列にまとめるのに対して、スプレッド構文は配列の中身を展開します。

const arr1 = ['solid', 'bicolor', 'tabby'];
const arr2 = ['calico', 'tortoiseshell'];

//スプレッド構文以前
var conCats = arr1.concat(arr2);
// ['solid', 'bicolor', 'tabby', 'calico', 'tortoiseshell']

//スプレッド構文を使う
const conCats = [...arr1, ...arr2]; 
// ['solid', 'bicolor', 'tabby', 'calico', 'tortoiseshell']

Qiita