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

JavaScriptでオプション（省略可能）な関数パラメーターを実装する最良の方法

デフォルトパラメーターを使えば簡単に実装できる

JavaScriptでオプション（省略可能）な関数パラメーターを実装する最も推奨される方法は、デフォルトパラメーター（既定値パラメーター）を使用することです。これは ES6（ECMAScript 2015）で導入された機能で、引数が渡されなかった場合に自動的に適用される初期値を、パラメーター宣言時に直接指定できます。

基本構文

function myFunc(a, b = 0) {
    // 関数本体
}

このように、パラメーター名の後に「=」とデフォルト値を記述するだけで、そのパラメーターは省略可能になります。呼び出し時に値が渡されなければ、自動的にデフォルト値が使用されます。

実際のサンプルコード

以下のコードを実行して、オプションの関数パラメーターの動作を確認してみましょう。

<html>
    <body>
        <script>
            // デフォルト値は1に設定
            function inc(val1, inc = 1) {
                return val1 + inc;
            }

            document.write(inc(10, 10));
            document.write("<br>");
            document.write(inc(10));
        </script>
    </body>
</html>

実行結果

20
11

解説

  • 1回目の呼び出し inc(10, 10) では、第2引数に 10 が明示的に渡されているため、10 + 10 = 20 が出力されます。
  • 2回目の呼び出し inc(10) では第2引数が省略されているため、デフォルト値の 1 が使用され、10 + 1 = 11 が出力されます。

デフォルトパラメーターを使うメリット

  • コードがシンプルになる： 従来のように typeof で引数の有無をチェックしたり、関数内で条件分岐して値を代入したりする必要がありません。
  • 意図が明確になる： 関数のシグネチャを見るだけで、どの引数が省略可能で、省略時にどんな値になるのかがひと目でわかります。
  • バグを防げる： 引数の渡し忘れによる undefined の意図しない演算などを未然に防止できます。

なお、古いブラウザー向けに ES5 以前の環境をサポートする必要がある場合は、typeof inc === 'undefined' のようなチェックで代替できますが、現代の開発ではデフォルトパラメーターを使うのが最良の選択です。

  1. JavaScriptでイベントを追加する最良の方法とは？addEventListener()の使い方を徹底解説

    任意の要素にイベントを追加する最良の方法は、addEventListener()メソッドを使用することです。このメソッドは、指定した要素に対してイベントリスナー（イベント発生時に実行される処理）を登録します。従来のonclick属性と異なり、1つの要素に複数のイベントハンドラを追加できるため、現代のWeb開発では標準的な手法とされています。 addEventListener()メソッドの基本構文 element.addEventListener(event, function, useCapture); event： 監視したいイベントの種類（例： 「click」「mouseover」「ke

  2. JavaScriptで新しいブラウザウィンドウを開く最良の方法とは？window.open()の使い方を解説

    JavaScriptで新しいブラウザウィンドウを開くには、windowオブジェクトのopen()メソッドを使うのが最も標準的で確実な方法です。 window.open()メソッドは、指定したURLを新しいウィンドウ（またはタブ）で開きます。第2引数でウィンドウ名、第3引数でサイズや位置などの表示特性を指定することも可能です。 window.open()の基本構文 window.open(URL, name, features); URL： 開きたいページのアドレス（必須） name： ウィンドウの名前またはターゲット属性（例： _blank）（省略可） features： ウィンドウの幅・高