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

JavaScriptの最新演算子を解説！スプレッド演算子とレストパラメータの使い方

JavaScript（ES6以降）に追加された注目の演算子として、「スプレッド演算子」と「レストパラメータ」が挙げられます。どちらも「...」（3つのドット）を使う点で共通していますが、その役割はまったく異なります。本記事では、それぞれの特徴と具体的な使い方をサンプルコード付きでわかりやすく解説します。

レストパラメータ（Rest Parameters）

レストパラメータを使うと、関数に渡された複数の引数をひとつの配列として受け取ることができます。従来のargumentsオブジェクトよりも直感的で柔軟な記述が可能になり、開発者の作業を大きく効率化しました。構文はシンプルで、仮引数の前に「...」（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へまとめられるため、1つの関数であらゆるケースに対応できます。

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

スプレッド演算子は、配列や文字列などの反復可能なオブジェクトを展開し、個々の要素や引数として扱えるようにする機能です。配列の結合・コピー、関数への引数の渡しなど、さまざまな場面で活用できます。

サンプルコード

次のコードを実行すると、concatメソッドとスプレッド演算子の動作を比較できます。

<html>
   <body>
      <script>
         var a, b, c, d, e, f, g;
         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>

この例では、変数eとfはどちらも「10,20,rank,30,points,run」という同じ結果になります。しかし、スプレッド演算子を使ったfの方が、より簡潔で読みやすいコードになっているのが分かります。

まとめ：レストとスプレッドの違い

両者は同じ「...」記法を使いますが、意味は正反対です。レストパラメータは「複数の値を1つの配列にまとめる」働きをする一方で、スプレッド演算子は「配列などを個々の要素へ展開する」働きをします。この2つを使いこなすことで、JavaScriptのコードはより簡潔で保守しやすいものになります。

  1. JavaScriptのPromiseとは？非同期処理の基本をわかりやすく解説

    JavaScriptのPromiseとは？Promise（プロミス）は、JavaScriptで非同期処理を扱うためのオブジェクトです。Promiseが生成された時点では、最終的な結果の値はまだ確定していません。処理が完了した将来のタイミングで、成功または失敗の結果を受け取ることができます。これにより、APIからのデータ取得やファイル読み込みなど、時間のかかる処理を効率的に記述できます。Promiseの3つの状態Promiseは、必ず以下の3つの状態のいずれかを持ちます。pending（待機）：初期状態。処理がまだ完了していない状態です。fulfilled（履行）：処理が正常に完了し、結果の値が

  2. JavaScriptのwithステートメントとは？用途と使い方をわかりやすく解説

    JavaScriptのwithステートメントは、特定のプロパティに対してデフォルトのオブジェクトを指定し、冗長になりがちなオブジェクト参照の記述を省略するための構文です。withブロック内で指定したオブジェクトは、スコープチェーンの先頭に追加されるため、そのプロパティ名だけで直接アクセスできるようになります。 基本的な動作 通常、オブジェクトのプロパティにアクセスするには、毎回オブジェクト名を明示する必要があります。しかし、withステートメントを使えば、以下のようにコードを簡潔に書けます。 オブジェクト名の繰り返し記述を省略できる 同じオブジェクトの複数のプロパティへ短くアクセスできる 指