JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのレストパラメータとスプレッド演算子の使い方をわかりやすく解説

JavaScript（ES6以降）には、可変長の引数を柔軟に扱うための強力な機能が2つあります。それが「レストパラメータ（Rest Parameter）」と「スプレッド演算子（Spread Operator）」です。どちらも「...（ドット3つ）」という同じ記法を使いますが、役割は正反対です。この記事では、それぞれの違いと具体的な使い方をサンプルコード付きで解説します。

レストパラメータ（Rest Parameter）とは

レストパラメータを使うと、関数に渡された複数の引数を1つの配列として受け取ることができます。従来はargumentsオブジェクトを使って可変長引数を処理していましたが、ES6でレストパラメータが導入されたことで、より直感的で安全な記述が可能になりました。

レストパラメータは、パラメータ名の前にドット3つ「...」を付けて定義します。

<html>
  <body>
    <script>
      function addition(...numbers) {
        var res = 0;
        numbers.forEach(function (number) {
          res += number;
        });
        return res;
      }
      document.write(addition(3));
      document.write(addition(9,10,11,12,13));
    </script>
  </body>
</html>

この例では、addition(3)は「3」、addition(9,10,11,12,13)は「55」という結果になります。numbersには渡された引数すべてが配列として格納されるため、引数の個数に制限されず合計を計算できます。

ポイント： レストパラメータは必ずパラメータリストの最後に置く必要があります。また、argumentsオブジェクトと異なり本物の配列なので、mapやfilterなどの配列メソッドをそのまま使えるのも大きなメリットです。

スプレッド演算子（Spread Operator）とは

スプレッド演算子は、レストパラメータとは逆に、配列などの反復可能オブジェクトを個別の引数へ展開するための機能です。配列の中身をバラバラにして、関数の独立した引数として渡したい場合に便利です。

構文

function myfunction(...iterableObj);

使用例：配列を引数として展開する

次の例では、配列myArgsをスプレッド演算子で展開し、multiply関数の引数として渡しています。

function multiply(x, y) {
  return x * y;
}
var myArgs = [50, 100];
console.log(multiply(...myArgs)); // 結果: 5000

multiply(...myArgs)はmultiply(50, 100)と書いたのと同じ意味になり、「50 × 100 = 5000」が出力されます。

使用例：concatメソッドとの比較

スプレッド演算子は配列の結合にも活用できます。従来のconcat()メソッドと比較してみましょう。

<html>
  <body>
    <script>
      var a, b, c, d, e, f;
      a = [10,20];
      b = "rank";
      c = [30, "points"];
      d = "run";

      // concatメソッドによる結合
      e = a.concat(b, c, d);

      // スプレッド演算子による結合
      f = [...a, b, ...c, d];

      document.write(e);
      document.write("<br>" + f);
    </script>
  </body>
</html>

どちらの方法でも結果は「10,20,rank,30,points,run」となり、配列と文字列が1つの配列に結合されます。スプレッド演算子を使えば、要素を挿入する位置を自由に指定できるため、より柔軟で読みやすいコードになります。

まとめ：レストパラメータとスプレッド演算子の違い

  • レストパラメータ： 関数の定義側で使い、複数の引数を1つの配列にまとめる（集約）
  • スプレッド演算子： 関数の呼び出し側などで使い、配列を個々の要素に展開する（分散）

同じ「...」という記法でありながら、まとめるのか展開するのかという正反対の役割を持っています。両者を使いこなせるようになると、可変長引数の処理や配列操作のコードが格段にシンプルになります。ぜひ実際のコードで試してみてください。

  1. JavaScriptの配列で使えるスプレッド演算子（...）の使い方

    スプレッド構文（...）を使うと、配列などのイテラブルなオブジェクトを、0個以上の引数が期待される場所で展開することができます。これにより、配列の要素をまとめて関数の引数として渡すことが可能になります。スプレッド演算子の基本例えば、5つの引数を受け取る関数に対して5つの要素を持つ配列を渡したい場合、従来の書き方では各要素を個別に指定する必要がありました。しかし、スプレッド演算子を使えば「add(...arr)」のように記述するだけで、配列の各要素が順番に引数として展開されて渡されます。スプレッド演算子は、配列の結合やコピーなど、さまざまな場面でも活用できる便利な構文です。以下は、JavaScr

  2. 【JavaScript】スプレッド演算子（...）で配列を関数の引数として渡す方法

    スプレッド構文（spread syntax）とは、配列などのイテラブル（反復可能なオブジェクト）を展開し、関数呼び出しの際に0個以上の引数として渡すことができるJavaScriptの便利な機能です。 通常、配列の各要素を個別の引数として関数に渡すには、一つずつ指定する必要がありますが、「...」（ドット3つ）を付けるだけで、配列の中身が自動的に展開され、それぞれ独立した引数として扱われます。これにより、コードがシンプルになり、可読性も大きく向上します。 スプレッド演算子を使った関数呼び出しのサンプルコード 以下は、関数呼び出しでスプレッド演算子を使用する具体例です。このサンプルでは、4つの引数