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

JavaScriptのデフォルト引数・レスト引数・分割代入の使い方を実例付きで解説

ES6（ECMAScript 2015）では、関数の引数をより柔軟かつ簡潔に扱うための機能として、デフォルト引数（Default Parameters）、レスト引数（Rest Parameters）、そして分割代入（Destructuring）が導入されました。本記事では、それぞれの特徴と具体的なコード例を通じて、実践的な使い方をわかりやすく解説します。

デフォルト引数（Default Parameters）とは

デフォルト引数を使うと、関数の仮引数に初期値をあらかじめ設定できます。呼び出し時に値が渡されなかった場合、または undefined が渡された場合にのみ、このデフォルト値が適用されます。これにより、「引数が省略されたときの処理」を if 文などで書く必要がなくなり、コードが大幅にすっきりします。

コード例

<html>
   <body>
      <script>
         // inc のデフォルト値は 1
         function inc(val1, inc = 1) {
            return val1 + inc;
         }
         document.write(inc(10,10)); // 20 を出力
         document.write("<br>");
         document.write(inc(10)); // 11 を出力
      </script>
   </body>
</html>

上記の例では、2つ目の引数を指定して inc(10,10) を呼び出した場合は「20」が出力されます。一方、引数を1つだけ渡した inc(10) では、デフォルト値の「1」が自動的に適用され、「11」が出力されます。

レスト引数（Rest Parameters）とは

レスト引数は、可変長の引数を受け取りたい場合に便利な機能です。3つのドット ... を引数名の前につけることで、複数の引数をひとつの配列としてまとめて受け取れます。従来の arguments オブジェクトと異なり、本物の配列として扱えるため、forEach や map などの配列メソッドをそのまま利用できるのが大きなメリットです。

コード例

<html>
   <body>
      <script>
         function addition(...numbers) {
            var res = 0;
            numbers.forEach(function (number) {
               res += number;
            });
            return res;
         }
         document.write(addition(3)); // 3 を出力
         document.write(addition(5,6,7,8,9)); // 35 を出力
      </script>
   </body>
</html>

この例では、addition 関数がいくつの引数を受け取っても、それらをすべて合計して返します。引数が1つでも5つでも、同じ関数で柔軟に対応できるのがレスト引数の強みです。なお、レスト引数は必ず引数リストの最後に配置する必要がある点に注意してください。

分割代入（Destructuring）とは

分割代入もES6で導入された構文で、配列やオブジェクトの中身をパターンマッチングのように個別の変数へ展開できます。対応する値が存在しない場合は undefined が返されます。ここでは、配列を個々の変数に分解する例を見てみましょう。

コード例

<html>
   <body>
      <script>
         let marks = [92, 95, 85];
         let [val1, val2, val3] = marks;

         document.write("Value 1: "+val1); // Value 1: 92
         document.write("<br>Value 2: "+val2); // Value 2: 95
         document.write("<br>Value 3: "+val3); // Value 3: 85
      </script>
   </body>
</html>

このように、配列 marks の各要素が、左辺の val1・val2・val3 へ順番に代入されます。オブジェクトに対しても同様の構文が使え、プロパティ名を指定して値を取り出すことが可能です。

まとめ

  • デフォルト引数： 引数が未指定または undefined のときに初期値を適用できる
  • レスト引数： 可変長の引数を配列として受け取り、配列メソッドで自由に操作できる
  • 分割代入： 配列やオブジェクトの要素を個別の変数へ簡潔に展開できる

これら3つの機能を組み合わせることで、JavaScriptの関数設計はより読みやすく、保守しやすいものになります。日常的なコーディングにぜひ取り入れてみてください。

  1. JavaScriptでサブオブジェクトや配列を含むオブジェクトをインポートする方法

    はじめに JavaScriptでは、ESモジュール（import / export）の仕組みを利用することで、別ファイルに定義したオブジェクトを簡単に読み込めます。オブジェクトの中にサブオブジェクト（ネストされたオブジェクト）や配列が含まれていても、そのままインポートして扱うことができます。以下に具体的なコード例を示します。 コード例 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta na

  2. JavaScriptのデフォルト引数とレストパラメータで実現する柔軟な関数シグネチャ

    JavaScriptでは、デフォルトパラメータ（デフォルト引数）とレストパラメータ（残余引数）を組み合わせることで、引数の有無や個数に柔軟に対応できる関数シグネチャを簡単に実装できます。本記事では、それぞれの仕組みと実際のコード例を通じて、効果的な関数の設計方法を解説します。 デフォルトパラメータとは デフォルトパラメータは、関数呼び出し時に引数が省略された場合やundefinedが渡された場合に自動的に適用される初期値です。これにより、引数不足によるエラーやNaNの発生を防ぎ、より堅牢な関数を作成できます。 レストパラメータとは レストパラメータは、引数名の前に「...」を付けて定義し、残り