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

JavaScriptで名前付き引数を実現する方法｜分割代入を使ったサンプルコード付き

JavaScriptには、Pythonなどの言語に存在するような「名前付き引数（キーワード引数）」の専用構文は用意されていません。しかし、オブジェクトの分割代入（Destructuring）とデフォルト値を組み合わせることで、名前付き引数とまったく同じ挙動を簡単に実現できます。

名前付き引数とは？

通常のJavaScript関数は、引数を「位置（順番）」で受け取ります。この方式では、引数の数が多い場合に順番を間違えやすく、コードの可読性も低下します。

そこで、オブジェクトを1つだけ引数として渡し、そのプロパティ名で値を指定する方法がよく使われます。こうすることで、引数の順番に依存しない、意図が伝わりやすい関数呼び出しが可能になります。

サンプルコード

以下は、JavaScriptの関数で名前付き引数のようにオブジェクトを受け取るコード例です。

<!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;
    }
    .sample,.result {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
    .result {
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScript関数での名前付き引数</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、関数を呼び出して
上記のオブジェクトを引数として渡します
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    sampleEle.innerHTML = "{a:22,b:44,c:55,d:99}";
    function add({ a = 0, b = 0, c = 0, d = 0 }) {
        return a + b + c + d;
    }
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML += "Sum = " + add({ a: 22, b: 44, c: 55, d: 99 });
    });
</script>
</body>
</html>

コードのポイント

  • function add({ a = 0, b = 0, c = 0, d = 0 })：引数としてオブジェクトを1つ受け取り、分割代入によって各プロパティを個別の変数へ展開しています。
  • = 0 の部分はデフォルト値です。対応するプロパティが渡されなかったり undefined だったりした場合に、自動的に 0 が使用されます。
  • ボタンをクリックすると、{ a: 22, b: 44, c: 55, d: 99 } というオブジェクトが add() に渡され、4つの値の合計が画面に表示されます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptで名前付き引数を実現する方法｜分割代入を使ったサンプルコード付き

「CLICK HERE」ボタンをクリックすると、合計値が表示されます。

JavaScriptで名前付き引数を実現する方法｜分割代入を使ったサンプルコード付き

名前付き引数を使うメリット

  • 引数の順番を気にせず呼び出せる：プロパティ名で値を指定するため、順序の誤りによるバグを防げます。
  • 必要な引数だけを渡せる：デフォルト値が設定されているため、省略した項目は自動的に補完されます。
  • コードの可読性が向上する：呼び出し箇所を見ただけで、どの値が何を意味するのか一目でわかります。

このように、オブジェクトの分割代入を活用すれば、JavaScriptでも安全で読みやすい「名前付き引数」スタイルの関数設計が可能です。特に引数の多い関数や、オプション設定を扱う関数で効果を発揮します。

  1. JavaScriptで無名関数（匿名関数）に引数を渡す方法をわかりやすく解説

    JavaScriptにおける無名関数（匿名関数）は、名前を持たない関数であり、変数に代入したり、イベントリスナーのコールバックとして利用したりする際に非常に便利です。通常の関数と同様に、無名関数にも引数を渡すことができます。ここでは、具体的なコード例を通じてその方法を解説します。 無名関数への引数の渡し方 無名関数に引数を渡す基本的な方法は、関数を変数に代入し、その変数を通じて呼び出す際に引数を指定することです。以下は、ボタンをクリックすると無名関数が呼び出され、引数を受け取って計算結果を表示するサンプルコードです。 サンプルコード <!DOCTYPE html> <ht

  2. JavaScriptの名前付き関数式とは？実装方法と動作をわかりやすく解説

    名前付き関数式（Named Function Expression）とはJavaScriptでは、関数式に対して名前を付けることができます。これを「名前付き関数式」と呼びます。通常の無名関数式と異なり、付けた名前はその関数の内部でのみ参照可能という特徴があります。この仕組みを活用すると、以下のようなメリットがあります。関数内部から自分自身を呼び出す再帰処理が書きやすくなるデバッグ時のスタックトレースに関数名が表示され、エラー箇所の特定が容易になるサンプルコード以下は、オブジェクトのプロパティとして名前付き関数式「factorial」を定義し、階乗を計算する例です。<!DOCTYPE ht