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

JavaScriptで擬似必須パラメータを実装する2つの方法

JavaScriptには、他の言語のような厳密な「必須引数」の構文はありません。しかし、引数にデフォルト値を設定しておくことで、値が渡されなくてもエラーにならない擬似的な必須パラメータを実装できます。この記事では、代表的な2つの手法をサンプルコードとともに解説します。

擬似必須パラメータとは

関数の引数が省略されると、その値は undefined になります。そのまま計算に使うと NaN が返るなど、予期しない動作の原因となります。そこで、引数が渡されなかった場合に初期値へフォールバックさせる処理を加え、関数を安全に動作させます。

実装例

次のコードでは、add() 関数に ES6 のデフォルト引数を、multiply() 関数に論理OR演算子（||）を使ったフォールバック処理を実装しています。

Example

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>オプション引数を持つ関数</h1>
<div class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、add() 関数と multiply() 関数が呼び出されます</h3>
<script>
    let resEle = document.querySelector(".result");

    // 方法1：デフォルト引数を使用
    function add(a = 0, b = 0) {
        return a + b;
    }

    // 方法2：論理OR演算子（||）を使用
    function multiply(a, b) {
        a = a || 0;
        b = b || 0;
        return a * b;
    }

    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML = "2つの数の合計 = " + add() + "<br>";
        resEle.innerHTML += "2つの数の積 = " + multiply() + "<br>";
    });
</script>
</body>
</html>

コードの解説

方法1：デフォルト引数を使う（ES6以降・推奨）

function add(a = 0, b = 0) のように、仮引数に「= 初期値」を指定します。引数が省略された場合、または undefined が渡された場合にだけデフォルト値が適用されます。意図が明確で読みやすい、現代のJavaScriptにおける標準的な書き方です。

方法2：論理OR演算子（||）を使う

a = a || 0; のように記述すると、左辺が falsy 値（undefined・null・0・空文字列など）の場合に右辺の値へ置き換わります。旧来から使われる手法ですが、0 や "" といった正当な値まで置き換えてしまう点には注意が必要です。より厳密に判定したい場合は、null 合体演算子（??）の利用を検討してください。

実行結果

ページを開いた直後の画面：

JavaScriptで擬似必須パラメータを実装する2つの方法

「クリックしてください」ボタンをクリックすると −

JavaScriptで擬似必須パラメータを実装する2つの方法

まとめ

デフォルト引数や || 演算子を活用すれば、引数が省略されても安全に動作する関数を作成できます。可読性と保守性の観点から、特別な理由がない限りは ES6 のデフォルト引数を使うことをおすすめします。

  1. JavaScriptの分割代入を使った関数パラメータの受け渡し方法

    JavaScriptでは、関数にオブジェクトを引数として渡す際、「分割代入（デストラクチャリング）」と呼ばれる構文を利用することで、オブジェクトの各プロパティを個別の変数として受け取ることができます。 さらに、各プロパティにデフォルト値を指定しておけば、対応するプロパティが存在しない場合でもエラーにならず、あらかじめ設定した値が使用されます。これにより、安全で柔軟な関数設計が可能になります。 サンプルコード 以下は、分割代入を使って関数のパラメータを受け取るJavaScriptのコード例です。 <!DOCTYPE html> <html lang="en&quo

  2. JavaScriptでコールバック関数にパラメータを渡す方法をわかりやすく解説

    はじめにJavaScriptでは、コールバック関数に対して直接引数を指定することができません。そこで一般的に使われるのが、「コールバック関数を別の関数（高階関数）の引数として受け取り、その内部で必要なパラメータとともに呼び出す」という手法です。本記事では、実際のコード例をもとに、コールバック関数へパラメータを渡す具体的な方法を解説します。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name=